У меня есть два .flex-container с 3 .box детьми, которых я хочу настроить по-другому. Смотрите мой фрагмент для визуального и моего решения.

Первое легко, так как я могу установить для первого поля значение width: 100%;, а затем просто использовать flex-wrap: wrap;. Хорошо пойти.

Для второго .flex-container я обнаружил, что мне нужно добавить дополнительный контейнер .box-container вокруг двух последних блоков, а затем дать ему flex: auto;, чтобы получить желаемый эффект.

Мой вопрос: нужен ли мне этот дополнительный контейнер .box-container? Если ответ да, пусть будет так. Я чувствую, что мне не хватает чего-то фундаментального, но я думаю, что это может потребоваться, потому что эти макеты не основаны на высоте, и я думаю, что это вертикально ориентировано? Я пытался использовать flex-direction: column; по-разному.

Любое решение, использующее flexbox и без лишних контейнеров, как, например, первый макет, который я представил, будет высоко оценено Спасибо.

* {
  box-sizing: border-box;
}

section {
  display: flex;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}

.flex-container-1 {
  flex-wrap: wrap;
  border: 3px solid seagreen;
  background-color: mediumseagreen;
}

.flex-container-1 .box:first-of-type {
  width: 100%;
}

.flex-container-2 {
  border: 3px solid firebrick;
  background-color: indianred;
}

.box-container {
  flex: auto;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: auto;
  padding: 10px;
  border: 1px solid #fff;
}

.box .box-num {
  font-size: 40px;
  color: #fff;
}
<section class="flex-container-1">
  <div class="box">
    <span class="box-num">1</span>
  </div>
  <div class="box">
    <span class="box-num">2</span>
  </div>
  <div class="box">
    <span class="box-num">3</span>
  </div>
</section>

<section class="flex-container-2">
  <div class="box">
    <span class="box-num">1</span>
  </div>
  <div class="box-container">
    <div class="box">
      <span class="box-num">2</span>
    </div>
    <div class="box">
      <span class="box-num">3</span>
    </div>
  </div>
</section>
1
StefanBob 24 Апр 2017 в 22:14

2 ответа

Лучший ответ

Flex Layout

Вы не можете сделать гибкие элементы намотанными на другие элементы в том же ряду. Это просто не то, как работает flexbox, вдоль горизонтальных и вертикальных линий. Таким образом, чтобы разместить два элемента рядом с одним в одной и той же «строке», вам понадобится немного хитрости CSS или HTML.

Вы также можете:

  • Определите высоту на контейнере. Это позволит вам использовать flex-flow: column wrap, чтобы сложить элементы 2 и 3 рядом с элементом 1 как два столбца одинаковой высоты, в противном случае ...

  • Используйте вложенный контейнер. Это позволит вам обернуть элементы 2 и 3 в один элемент, который может стать одним из элементов элемента 1, и оба столбца могут иметь одинаковую высоту.

Эти понятия и их ограничения более подробно объясняются в моем ответе здесь:


Макет сетки

Поскольку Макет CSS-сетки теперь поддерживается в большинстве основных браузеров, а также потому, что ваша задача макета проста с помощью этой новой технологии, а также потому, что с помощью Grid Layout вам никогда не придется упаковывать элементы во вложенные контейнеры или устанавливать фиксированную высоту в главном контейнере , я разместил ответ ниже:

article {
  display: grid;                            /* 1 */
  grid-template-columns: repeat(2, 1fr);    /* 2 */
}

section:nth-child(1) {
  grid-row: 1 / 3;                          /* 3 */
}

/* non-essential decorative styles */

article {
  padding: 10px;
  border-radius: 5px;
  border: 3px solid firebrick;
  background-color: indianred;
}
section {
  padding: 10px;
  border: 1px solid #fff;
  font-size: 40px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
* {
  box-sizing: border-box;
}
<article>
    <section>1</section>
    <section>2</section>
    <section>3</section>
</article>

Примечания:

  1. Установите контейнерный блок уровня блока. (ссылка на спецификацию)
  2. Поручите сетке создать два столбца равной ширины. 1fr представляет часть свободного пространства. Это похоже на flex-grow: 1. (ссылка на спецификацию)
  3. Поручите первому элементу охватить две строки (то есть от линии 1 строки сетки до линии 3 строки сетки, которая охватывает две дорожки сетки). (ссылка на спецификацию)

Поддержка браузером CSS Grid

  • Chrome - полная поддержка по состоянию на 8 марта 2017 г. (версия 57)
  • Firefox - полная поддержка с 6 марта 2017 г. (версия 52)
  • Safari - полная поддержка по состоянию на 26 марта 2017 г. (версия 10.1)
  • Edge - полная поддержка по состоянию на 16 октября 2017 г. (версия 16)
  • IE11 - нет поддержки текущей спецификации; поддерживает устаревшую версию

Вот полная картина: http://caniuse.com/#search=grid

1
Michael Benjamin 4 Ноя 2017 в 16:25

Да. Если я не использую фиксированную высоту на контейнере.

0
StefanBob 24 Апр 2017 в 20:04