Элементы упаковки Flexbox снаружи div

Question

Я пытаюсь обернуть элементы в направлении столбца. Мой первый элемент имеет ширину 100%, а все остальные элементы имеют ширину 50%. Когда приходит время переноса, последние несколько элементов переносятся, начиная с первого элемента шириной 100%, а не переходя ко второй строке.

JSFiddle link: https://jsfiddle.net/e4j16apg/

Thisвот чего я пытаюсь достичь:

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  box-sizing: border-box;
  height: 200px;
  width: 50%;
  border: 1px solid blue;
}

.ca {
  width: 50%;
  border: 1px solid red;
}

.ca-1 {
  height: 50px;
  width: 100%;
  border: 1px solid green;
}

<div class="container">
  <div class="ca ca-1">ca-1</div>
  <div class="ca ca-2">ca-2</div>
  <div class="ca ca-3">ca-3</div>
  <div class="ca ca-3">ca-3</div>
  <div class="ca ca-4">ca-4</div>
  <div class="ca ca-5">ca-5</div>
  <div class="ca ca-6">ca-6</div>
  <div class="ca ca-7">ca-7</div>
  <div class="ca ca-8">ca-8</div>
  <div class="ca ca-9">ca-9</div>
  <div class="ca ca-10">ca-10</div>
</div>

Большое спасибо!

Answer 1

Вы не можете достичь желаемого с помощью flexbox, но вы можете использовать columns (и сделать первый элемент охватом всех столбцов):

.container {
  columns: 2;
  width: 50%;
  border: 1px solid blue;
  column-gap: 0;
  /* height: 200px; */
}

.ca {
  border: 1px solid red;
  break-inside: avoid;
  /* height: calc(100% / 6); */
}

.ca-1 {
  column-span: all;
}

* {
  box-sizing: border-box;
}

<div class="container">
  <div class="ca ca-1">ca-1</div>
  <div class="ca ca-2">ca-2</div>
  <div class="ca ca-3">ca-3</div>
  <div class="ca ca-3">ca-3</div>
  <div class="ca ca-4">ca-4</div>
  <div class="ca ca-5">ca-5</div>
  <div class="ca ca-6">ca-6</div>
  <div class="ca ca-7">ca-7</div>
  <div class="ca ca-8">ca-8</div>
  <div class="ca ca-9">ca-9</div>
  <div class="ca ca-10">ca-10</div>
</div>

Также обратите внимание, что по умолчанию columns вычисляет общую высоту всех дочерних элементов, которые переносят и переносят как можно ближе к половине (когда естьдва). Так что вам на самом деле не нужна фиксированная высота для этого. И вам не нужен набор height для детей, особенно если у них неровная высота.

CSS columns предназначены для размещения в виде газетных колонок из коробки, что, кажется, является тем, что вам нужно.

Чтобы предотвратить разрывы внутри детей, используйте break-inside: avoid;.

Answer 2

Вы писали:

Когда приходит время переноса, последние несколько элементов переносятся, начиная с первого элемента шириной 100%, а не переходя ко второму. линия.

Вот в чем проблема. Вы верите, что есть «вторая линия». Нет.

Как только вы сделаете так, чтобы ваш первый элемент занял 100% ширины, вы определили ширину столбца.

Сделав последующие элементы шириной 50%, выГоворя им, использовать 50% этого столбца.

Элементы, которые обертывают, создают второй столбец.

Они не могут переноситься под элементом 100% и рядом с первым набором 50%. элементы, потому что вы не можете сделать перенос элементов на одну строку .

Так что вам не нужно менять HTML, используйте CSS Grid для макета:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(9, 1fr);
  grid-auto-flow: column;
  box-sizing: border-box;
  height: 200px;
  width: 50%;
  border: 1px solid blue;
}

.ca {
  border: 1px solid red;
}

.ca-1 {
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  border: 1px solid green;
}

<div class="container">
  <div class="ca ca-1">ca-1</div>
  <div class="ca ca-2">ca-2</div>
  <div class="ca ca-3">ca-3</div>
  <div class="ca ca-3">ca-3</div>
  <div class="ca ca-4">ca-4</div>
  <div class="ca ca-5">ca-5</div>
  <div class="ca ca-6">ca-6</div>
  <div class="ca ca-7">ca-7</div>
  <div class="ca ca-8">ca-8</div>
  <div class="ca ca-9">ca-9</div>
  <div class="ca ca-10">ca-10</div>
</div>

Подробнее здесь:

• Возможно ли сгибание элементов плотно прилегать к элементам над ними?