将弹性项目与弹性端对齐

Question

Hei,

I'm creating grid layout and when trying to align items on flex-end or start, height/width becomes zero. What I'm wondering is, is it possible to align items in flex container to the top/bottom/center WITHOUT specifying height/width? In my case I didn't specify any height and it doesn't work. If I specify it, it works. Line that doesn't work is commented in first example.

Here is code:

 .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

As the default value for align-items is stretch , hence they fill their parents height, and you change it to flex-start / flex-end , the row flex items becomes 0 in height, and will need content (or a height/min-height) for you to actually see them.

 .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>