Выравнивание гибких элементов к гибкому концу

Question

Hei,

Я создаю схему сетки и, пытаясь выровнять элементы на гибком конце или начале, высота/ширина становится равной нулю. Что мне интересно, возможно ли выровнять элементы в контейнере гибких дисков с вершиной/дном/центром БЕЗ указания высоты/ширины? В моем случае я не указал высоту, и она не работает. Если я укажу его, он будет работать. Строка, которая не работает, комментируется в первом примере.

Вот код:

.flex-container { 
 
    display: flex; 
 
    background: silver; 
 
    width: 400px; 
 
    height: 200px; 
 
    //align-items: flex-start; 
 
} 
 

 
.flex-item { 
 
    background: blue; 
 
    flex: 1 0 10px; 
 
    margin: 5px; 
 
} 
 

 
.flex-container2 { 
 
    display: flex; 
 
    background: silver; 
 
    width: 400px; 
 
    height: 200px; 
 
    align-items: flex-end; 
 
} 
 

 
.flex-item2 { 
 
    background: blue; 
 
    height: 50px; 
 
    flex: 1 0 10px; 
 
    margin: 5px; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
</div> 
 

 
<br> 
 

 
<div class="flex-container2"> 
 
    <div class="flex-item2"></div> 
 
    <div class="flex-item2"></div> 
 
    <div class="flex-item2"></div> 
 
    <div class="flex-item2"></div> 
 
</div>

Answer 1

в качестве значения по умолчанию для ALIGN-элементов является stretch, следовательно, они заполняют их родителей высоту, и вы измените его flex-start/flex-end, строка Элементы flex становятся 0 в высоту и нуждаются в содержимом (или высоте/минимальной высоте), чтобы вы могли их видеть.

.flex-container { 
 
    display: flex; 
 
    background: silver; 
 
    width: 400px; 
 
    height: 200px; 
 
    align-items: flex-start; 
 
} 
 

 
.flex-item { 
 
    background: blue; 
 
    min-height: 20px; 
 
    flex: 1 0 10px; 
 
    margin: 5px; 
 
} 
 
.flex-item:nth-child(even) { 
 
    align-self: flex-end; 
 
} 
 

 
.flex-container2 { 
 
    display: flex; 
 
    background: silver; 
 
    width: 400px; 
 
    height: 200px; 
 
    align-items: flex-end; 
 
} 
 

 
.flex-item2 { 
 
    background: blue; 
 
    height: 50px; 
 
    flex: 1 0 10px; 
 
    margin: 5px; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item">They need content or a height/min-height</div> 
 
    <div class="flex-item">They need content or a height/min-height</div> 
 
    <div class="flex-item"></div> 
 
    <div class="flex-item"></div> 
 
</div> 
 

 
<br> 
 

 
<div class="flex-container2"> 
 
    <div class="flex-item2"></div> 
 
    <div class="flex-item2"></div> 
 
    <div class="flex-item2"></div> 
 
    <div class="flex-item2"></div> 
 
</div>