CSS: Flexbox в Flexbox

Я немного играл с flexboxes и хотел объединить контейнер столбцов и строк. У меня есть вопрос:CSS: Flexbox в Flexbox

Почему элементы строки, расположенные внутри столбца, не охватывают всю ширину гибкого контейнера?

пример кода показан здесь: js-fiddle

HTML:

/* CSS: */ 
 

 
.flex-container { 
 
    color: blue; 
 
    background-color:yellow; 
 
    text-decoration: bold; 
 
    text-size: 1em; 
 
    display: flex; 
 
    justify-content:space-between; 
 
    align-items:center; 
 
} 
 
.horizontal { 
 
    flex-direction:row; 
 
    background-color: red; 
 
} 
 

 
.vertical { 
 
    flex-direction:column; 
 
}

<body> 
 
    <div class="flex-container vertical"> 
 
    <div class=flex-item>1 </div> 
 
    <div class=flex-item>2 </div> 
 
    <div class="flex-container horizontal" > 
 
    <div class=flex-item>3a </div> 
 
    <div class=flex-item>3b </div> 
 
    <div class=flex-item>3c </div> 
 
    </div> 
 
    <div class=flex-item>4 </div> 
 
    <div class=flex-item>5 </div> 
 
    </div> 
 
</body>

Спасибо за любую помощь!

источник

2016-11-29 Raphael Kleindienst

Потому что ваш '.horizontal' контейнер не достаточно широк. Добавьте 'width: 100%;' к нему. – Roberrrt

Ну, это было довольно просто;) Я думал, что попробовал это. –

Хе-хе, извините. Кофе еще не пнул. Я также не знаю, почему ширина не ограничивается автоматически, поэтому размещаю это как комментарий, пока не найду решение. – Roberrrt

Это связано с тем, как работает Flexbox.

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

Ручного применение ширины приведет к создаваемому для элементов пространства, а justify-content: space-between пнет в

Решения измените следующее правило:.

.horizontal { 
    flex-direction: row; 
    background-color: red; 
    width: 100%; 
}

источник

2016-11-29 10:35:17 Roberrrt

Спасибо, это дает желаемый результат. Решение от Danield также создает широкий ряд, но элементы больше не выровнены по центру. –

Поскольку вы установили align-items:center; на гибкий контейнер, в дополнение к центрированию - предметы также занимают только минимальное пространство, в котором они нуждаются.

Если вы не установили это свойство, то значение по умолчанию stretch было бы введено, и элементы занимали бы всю ширину.

Затем, как и @Michael_B, вы указали, что вы можете применить align-self:center к элементам сгиба, чтобы центрировать предметы на поперечной оси.

.flex-container { 
 
    color: blue; 
 
    background-color: yellow; 
 
    text-decoration: bold; 
 
    text-size: 1em; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.horizontal { 
 
    flex-direction: row; 
 
    background-color: red; 
 
} 
 

 
.vertical { 
 
    flex-direction: column; 
 
} 
 

 
.flex-item { 
 
    align-self: center; 
 
    /* center each flex item along the cross axis */ 
 
    text-align: center; 
 
    /* horizontally center content within flex item */ 
 
}

<body> 
 
    <div class="flex-container vertical"> 
 
    <div class=flex-item>1 </div> 
 
    <div class=flex-item>2 </div> 
 
    <div class="flex-container horizontal"> 
 
     <div class=flex-item>3a </div> 
 
     <div class=flex-item>3b </div> 
 
     <div class=flex-item>3c </div> 
 
    </div> 
 
    <div class=flex-item>4 </div> 
 
    <div class=flex-item>5 </div> 
 
    </div> 
 
</body>

источник

2016-11-29 11:27:32 Danield

Не могли бы вы объяснить, почему применение 'align-items: stretch' на'. Horizontal' не работает? – Roberrrt

@Roberrrt Это работает, за исключением того, что вам нужно заметить, что растягивание происходит на ** поперечной оси **, поэтому, когда направление гибкости является растяжением столбца, происходит горизонтально, а когда направление гибкости является строковым - растяжение происходит вертикально – Danield

Этот ответ называет рассуждения. Для чистого решения flex удалите 'align-items: center' из контейнера. Добавьте 'align-self: center' к элементам flex, которые вы хотите центрировать. Средний пункт (3a/b/c) будет растягиваться по умолчанию: https://jsfiddle.net/cq0ecd5u/2/ –

CSS: Flexbox в Flexbox

ответ

Смежные вопросы