Изменение порядка элементов и перенос после определенного элемента с помощью flexbox

Я пытаюсь создать эту структуру, используя только flexbox.

enter image description here

Так выглядит мой html.

<div class="container">
  <div class="first_container"></div>
  <div class="second_container"></div>
  <div class="third_container"></div>
</div>

Я знаю, что это действительно основная проблема, если бы я мог просто изменить порядок div или добавить дополнительную оболочку для первой строки. Проблема в том, что он должен оставаться таким, как есть.

Основные размеры: 1. first_container - должен занимать 100% минус ширина третьего_контейнера 2. second_container - shoudl берет 100%

Прошу совета, потому что руки у меня медленно опускаются.

вы используете бутстрап?

Shaik 11.04.2018 12:13

Вы хотите посмотреть order. css-tricks.com/almanac/properties/o/order.

deEr. 11.04.2018 12:14

@Shaik В этом конкретном элементе я не знаю.

Dan Zawadzki 11.04.2018 12:17

@AjAX Я уже пытаюсь, но у меня проблема с переносом после определенного элемента.

Dan Zawadzki 11.04.2018 12:18
0
4
288
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать свойство заказа flexbox

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container div {
  padding: 10px;
  border: 5px solid #fff;
  background: gray;
  text-align: center;
}

.first_container {
  width: 70%;
  order: 1;
}

.second_container {
  width: 100%;
  order: 3;
}

.third_container {
  width: 30%;
  order: 2;
}
<div class="container">
  <div class="first_container">1</div>
  <div class="second_container">2</div>
  <div class="third_container">3</div>
</div>

Спасибо! Я также переделал ширину дочерних элементов на гибкую основу, и это отличное решение. Буду иметь в виду.

Dan Zawadzki 11.04.2018 12:25

Другие вопросы по теме