垂直对齐方式 · 我的工作笔记

# 垂直对齐方式 > align-items 属性 ## 结构 ``` <div id="result"> <div style="background: darkgreen"></div> <div style="background: red"></div> <div style="background:darkorange"></div> <div style="background: hotpink"></div> </div> ``` ## CSS ~~~ #result { display: flex; align-items:?????; } ~~~ - flex-start (默认值。项目位于容器的开头) ![](https://img.kancloud.cn/c5/86/c586319a923f2970689d5ffb0fdbbf0c_401x113.png) - flex-end ![](https://img.kancloud.cn/3b/3d/3b3dd7c5c62c4bf4ed334c3e40025296_407x114.png) - stretch ![](https://img.kancloud.cn/f8/ac/f8ac199d749646ab215a8ac54097ef33_403x108.png) - baseline ![](https://img.kancloud.cn/9f/b9/9fb992686ab9658220aec24d7bfe7322_402x108.png) - center ![](https://img.kancloud.cn/a7/bc/a7bc4e140cd9978b7d3cb8b8232ffdca_404x111.png) - initial ![](https://img.kancloud.cn/01/a9/01a9ef12afa2c8ec7b95a78256fcb9d2_401x110.png)