CSS Flexbox: 3 элемента Flex, 2 столбца (ширина равна содержанию) и 1 элемент, который увеличивается до ширины - PullRequest
Новая
       12

CSS Flexbox: 3 элемента Flex, 2 столбца (ширина равна содержанию) и 1 элемент, который увеличивается до ширины

1 голос
/ 06 ноября 2019

У меня есть 3 флексов. 2 должны соответствовать их содержанию и отображаться рядом. Другой гибкий элемент должен расти, чтобы соответствовать этой ширине (но не больше.)

Что я хочу:

What I Want

Как это выглядит в настоящее время:

What it currently looks like

Мне удалось приблизиться, но все еще есть некоторые изотображение серого фона (похоже, текст не учитывается). https://codepen.io/albrechtnate/pen/abbYeYL

.container {
  display: flex;
  width: fit-content;
  flex-flow: row wrap;
}

.container div:first-child {
  width: 100%;
}


/* Un-related Styles */

.setup {
  background-color: #ccc;
}
.setup div {
  height: 100px;
  background-color: blue;
}
.setup div:first-child {
  background-color: red;
}
.setup div:last-child {
  background-color: green;
}
<div class="container setup">
  <div>Item</div>
  <div>Item Two</div>
  <div>Item Three</div>
</div>

Я заставил его работать с помощью CSS Grid (https://codepen.io/albrechtnate/pen/zYYWgEZ), но Grid кажется излишним для чего-то подобного. Если я добавляю 4-й элементЯ не хочу менять сетку-шаблон-столбцы.

Ответы [ 4 ]

1 голос
/ 06 ноября 2019

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

Является ли этовариант это положить пункты 2 и 3 в отдельный контейнер? 

.container {
  display: flex;
  width: fit-content;
  flex-flow: column wrap;
}

.container > div:first-child {
  background-color: red;
  /*width: 100%;*/
}
.container > div:nth-child(2) {
  display: flex;
  flex-flow: row wrap;
}
.container > div:nth-child(2) > div:first-child {
  background-color: blue;
}
.container > div:nth-child(2) > div:last-child {
  background-color: green;
}

/* Un-related Styles */

.setup {
  background-color: #ccc;
}
.setup div {
  height: 100px;
}
<div class="container setup">
  <div>Item</div>
  <div>
    <div>Item Two</div>
    <div>Item Three</div>
   </div>
</div>
0 голосов
/ 07 ноября 2019

В итоге я просто добавил контейнер вокруг всех предметов, кроме первого, и использовал flex, чтобы заставить их расти по мере необходимости.

Преимущества:

  1. Первый предмет можетсколько бы он ни хотел, и другие элементы будут расти в соответствии с его шириной.
  2. Может быть бесконечное количество гибких элементов, и первый элемент будет расти в соответствии с их общей шириной.

Если кто-нибудь найдет метод, который сохраняет эти преимущества без добавления дополнительной разметки, сообщите нам об этом!

https://codepen.io/albrechtnate/pen/YzzLzLV

.container {
  background-color: #ccc;
  width: fit-content;
}

.container > div:first-child {
  background-color: blue;
}

.container .group {
  background-color: teal;
  display: flex;
}

.container .group div {
  background-color: red;
  flex: 1 0 auto;
}
<div class="container">
  <div>Item</div>
  <div class="group">
    <div>Item Two</div>
    <div>Item Three</div>
  </div>
</div>

<br>

<div class="container">
  <div>Item</div>
  <div class="group">
    <div>Item Two</div>
    <div>Item Three</div>
    <div>Item Four</div>
    <div>Item Five</div>
  </div>
</div>

<br>

<div class="container">
  <div>Item - This one is super duper extra looper long.</div>
  <div class="group">
    <div>Item Two</div>
    <div>Item Three</div>
  </div>
</div>
0 голосов
/ 06 ноября 2019

Не нужно flexbox, простая конфигурация inline-block сделает работу. 

.container {
  display: inline-block;
  font-size:0;
}
.container div {
  display:inline-block;
  font-size:initial;
}
.container div:first-child {
  display:block;
  width:0;
  min-width:100%;
}

/* Un-related Styles */

.setup {
  background-color: #ccc;
}
.setup div {
  height: 100px;
  background-color: blue;
}
.setup div:first-child {
  background-color: red;
}
.setup div:last-child {
  background-color: green;
}
<div class="container setup">
  <div>Item</div>
  <div>Item Two</div>
  <div>Item Three</div>
</div>

<div class="container setup">
  <div>a very long long text in this Item</div>
  <div>Item Two</div>
  <div>Item Three</div>
</div>
0 голосов
/ 06 ноября 2019

Чтобы немедленно решить вашу проблему, вы можете добавить это правило в свой CSS 

.container div {
  width: 50%
}

Но я не думаю, что использование сетки - это "перебор". Сетка действительно сияет при создании такого макета (комбинация строк и столбцов), в то время как flexbox борется, как вы уже сами испытали. Grid не является «развитой» версией flexbox, они служат разным целям.

Основное различие между CSS Grid Layout и CSS Flexbox Layout заключается в том, что flexbox был спроектирован для макета в одном измерении - в виде строки или столбца. Сетка была разработана для двумерного размещения - строк и столбцов одновременно.

Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout

...