这篇文章运用简单易懂的例子给大家介绍怎么用css align-items属性，代码非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
css align-items属性是用于指定float容器内项目在横轴方向的对齐方式：拉伸以填充容器、以横轴为中心、在顶部垂直对齐、在底部垂直对齐、横轴的基线处对齐。
CSS align-items属性
align-items属性是Flexible Box 布局模块的子属性。
作用：定义了如何沿当前行的横轴布置弹性项目的默认（对齐）行为。
注：可以在float容器内的每个子项目中使用align-self属性来覆盖align-items属性的样式。
语法：
align-items: stretch|center|flex-start|flex-end|baseline;
stretch（默认）：拉伸以填充容器（仍然尊重最小宽度/最大宽度）。
center：项目以横轴为中心；默认情况下，横轴是垂直的，这意味着flexbox项目将垂直居中 。
flex-start：项目在横轴的开始处对齐，即项目将在顶部垂直对齐。
flex-end：项目在横轴末端对齐，即项目将在底部垂直对齐
baseline：项目在横轴的基线处对齐，即flexbox项目将自身对齐，以使其文本的基线沿水平线对齐。
CSS align-items属性的使用示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .flex-container { padding: 0; margin: 0; list-style: none; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; float: left; } .flex-start { -webkit-align-items: flex-start; align-items: flex-start; } .flex-end { -webkit-align-items: flex-end; align-items: flex-end; } .flex-end li { background: gold; } .center { -webkit-align-items: center; align-items: center; } .center li { background: deepskyblue; } .baseline { -webkit-align-items: baseline; align-items: baseline; } .baseline li { background: lightgreen; } .stretch { -webkit-align-items: stretch; align-items: stretch; } .stretch li { background: hotpink; } .flex-item { background: tomato; padding: 5px; width: 50px; margin: 5px; line-height: 50px; color: white; font-weight: bold; font-size: 2em; text-align: center; } </style> </head> <body> <div class="box"> <ul class="flex-container flex-start"> <li class="flex-item">1<br>2</li> <li class="flex-item">3</li> <li class="flex-item">4<br>5</li> <li class="flex-item">6</li> </ul> <ul class="flex-container flex-end"> <li class="flex-item">1<br>2</li> <li class="flex-item">3</li> <li class="flex-item">4<br>5</li> <li class="flex-item">6</li> </ul> <ul class="flex-container center"> <li class="flex-item">1<br>2</li> <li class="flex-item">3</li> <li class="flex-item">4<br>5</li> <li class="flex-item">6</li> </ul> <ul class="flex-container baseline"> <li class="flex-item">1<br>2</li> <li class="flex-item">3</li> <li class="flex-item">4<br>5</li> <li class="flex-item">6</li> </ul> <ul class="flex-container stretch"> <li class="flex-item">1<br>2</li> <li class="flex-item">3</li> <li class="flex-item">4<br>5</li> <li class="flex-item">6</li> </ul> </div> </body> </html>效果图：
关于怎么用css align-items属性就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
