Есть ли возможность переопределить flex-direction: row?

Question

У меня есть контейнер, который использует flex-direction: row, и я хотел бы сохранить его таким образом, единственная проблема в том, что теперь я хочу поместить что-то в div без необходимости вложения в него.

Эточто я имею.

И я хотел бы сделать что-то вроде этого:

Мой файл main_continer css выглядит примерно так:

main_container {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    border: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    text-align: left;
.div_2 {
    width: 90%;
 }

Можно ли как-то переопределить строку направления гибкого направления?

Answer 1

Добавьте возможность сгибать гибкие элементы:

.main_container {
  // ...rest of styles
  flex-wrap: wrap;
}

Затем измените порядок для этого второго элемента, сделав его следующим за четвертым элементом:

.div_2 {
  order: 4; // default is 0, you might need to play with this value
}

Последнее созданиеубедитесь, что расположение элементов 3, добавьте новый класс ко всем элементам в гибком контейнере, чтобы вы могли нацелить их вместе:

.new_class_on_all_items {
  width: 33.333%;
}