flex布局：align-items

最新推荐文章于 2023-09-13 16:21:52 发布

浪豪

最新推荐文章于 2023-09-13 16:21:52 发布

阅读量441

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/Chinachenh/article/details/126426471

版权

本文详细探讨了CSS Flex布局中的align-items属性，它用于设置弹性容器中子元素的交叉轴对齐方式。通过不同的取值，如'flex-start'、'flex-end'、'center'、'stretch'和'baseline'，可以实现顶部对齐、底部对齐、居中对齐、拉伸填充和基线对齐等效果。理解这一属性对于创建响应式和动态布局至关重要。

摘要由CSDN通过智能技术生成

        /*默认*/
        align-items: normal;
        /*当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container*/
        align-items: stretch;
        /*顶部对齐*/
        align-items: flex-start;
        /*底部对齐*/
        align-items: flex-end;
        /*居中对齐*/
        align-items: center;
        /*基线对齐*/
        align-items: baseline;
示例			
		<style>
         .container {
            width: 700px;
            height: 500px;
            background-color: orange;
            display: flex;
            /*默认*/
            align-items: normal;
            /*当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container*/
            align-items: stretch;
            /*顶部对齐*/
            align-items: flex-start;
            /*底部对齐*/
            align-items: flex-end;
            /*居中对齐*/
            align-items: center;
            /*基线对齐*/
            align-items: baseline;
            
         }
        .item1 {
            background-color: re