Случайный порядок флексбоксов

Question

Это может показаться немного странным, но мне нужно рандомизировать порядка 4 элементов flexbox. Они должны быть рандомизированы onInit.

Я мог бы рандомизировать числа в javascript, но как мне связать это свойство с CSS?

Это мой код:

CSS:

.buttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin: 2rem;
}

HTML:

  <div class="buttons">
    <button>{{ mcqs.answer1 }}</button>
    <button>{{ mcqs.answer2 }}</button>
    <button>{{ mcqs.answer3 }}</button>
    <button>{{ mcqs.answer4 }}</button>
  </div>

По сути, мне просто нужен действительно простой способ рандомизировать порядок ответов (для тестового приложения с множественным выбором). Спасибо!

Answer 1

Добавьте flex-order к buttons, чтобы заставить их отображать в любом порядке, независимо от разметки.

Вот базовый вариант использования:

.flex-item {
   order: 1;
}

Или вы можете добавить встроенный CSS-код следующим образом:

<div class="buttons">
    <button ng-style="{'order': randomIndexNum}">{{ mcqs.answer1 }</button>
    <button ng-style="{'order': randomIndexNum}">{{ mcqs.answer2 }</button>
    <button ng-style="{'order': randomIndexNum}">{{ mcqs.answer3 }</button>
    <button ng-style="{'order': randomIndexNum}">{{ mcqs.answer4 }</button>
</div>

Это может быть сделано с помощью Angular или любых других инструментов, которые могут изменять HTML onInit.

Документация от CSS-хитрости

Answer 2

попробуйте, вам не нужно рандомизировать числа:

var answers  = $("button");
for(var i = 0; i < answers .length; i++){
    var target = Math.floor(Math.random() * answers .length -1) + 1;
    var target2 = Math.floor(Math.random() * answers .length -1) +1;
    answers .eq(target).before(answers .eq(target2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
    <button>{{ mcqs.answer1 }}</button>
    <button>{{ mcqs.answer2 }}</button>
    <button>{{ mcqs.answer3 }}</button>
    <button>{{ mcqs.answer4 }}</button>
  </div>

оригинальный ответ здесь: Случайный порядок деления при загрузке страницы

Answer 3

Вы захотите условно применить классы к вашим элементам, используя функцию в вашем контроллере AngularJS. Добавьте правила CSS для этих классов.

<style>
.col-order-1 {
    order: 1;
}
.col-order-2 {
    order: 2;
}
</style>

<div class="buttons" ng-class="getOrderClass($index)"> ... </div>

Не пытайтесь изменять CSS напрямую. Вы также можете создать полную разметку списка кнопок в контроллере и связать ее вместо этого.