将柔性物品与柔性端对齐

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>