將柔性物品與柔性端對齊

Question

Hei，

我正在創建網格佈局，並且當試圖在flex-end或start上對齊項目時，高度/寬度變爲零。 我想知道的是，是否有可能將flex容器中的項目與頂部/底部/中心對齊，而無需指定高度/寬度？在我的情況下，我沒有指定任何高度，它不起作用。如果我指定它，它會起作用。第一個例子中評論不起作用的行。

這裏是代碼：

.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

至於對齊項的默認值是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>