CSS flex布局_默认情况,如果弹性盒子中的子元素宽度之和超出父元素主轴空间,此时会自动换行-优快云博客

本文深入讲解Flex布局，包括主轴方向、对齐方式、换行等核心属性，以及子元素的排序和空间分配技巧，帮助读者掌握弹性盒子的布局精髓。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex布局(弹性布局、伸缩布局)

主要介绍下弹性布局的常用的一些属性

当一个盒子设置为display:flex的时候,盒子会变为一个弹性盒子,盒子内部的子元素会默认沿着主轴方向排布,此时会引出主轴和侧轴的概念。

主轴:默认水平向右(类似于X轴)
侧轴:与主轴垂直的就是侧轴,默认垂直向下(类似于Y轴)

主轴方向（flex-direction)

弹性盒子的主轴方向默认水平向右,但是可以通过flex-direction这个属性改变主轴的方向,如下图:
在这里插入图片描述

主轴对齐方式（justify-content）

取值:
flex-start：向主轴的开始位置对齐
在这里插入图片描述
flex-end：向主轴的结束位置对齐

center：居中对齐

space-around：让空白环绕盒子显示

space-between：让空白只在盒子之间显示

单行侧轴对齐方式（align-items）

取值

flex-start：向侧轴的开始位置对齐
在这里插入图片描述
flex-end：向侧轴的结束位置对齐

center：居中对齐

stretch：让子盒子的高度拉伸显示（默认值）
当盒子内的子元素没有高度时,会默认拉伸

是否换行（flex-wrap）

flex布局中，默认是单行显示的，如果子元素的宽度之和超出了父元素的宽度，此时子盒子会默认压缩显示。
此时，如果需要设置子元素换行显示(需加在父元素身上)，可以使用属性 flex-wrap
在这里插入图片描述

多行侧轴对齐方式（align-content）

之前align-items 只是针对于单行元素的侧轴对齐方式。
如果需要设置多行元素的侧轴对齐方式，此时需要使用 align-content 才行

取值（和align-items差不多）：
在这里插入图片描述

分配子元素空间（flex属性）

作用： 按照份数分配父元素主轴（宽度）的剩余空间

优先分配具体的宽度，剩余的空间再按照份数分配。

代码： flex:份数;

子元素排序（order属性）

作用： 设置弹性盒子中子元素的排列顺序，数值越小，排列靠前，默认是0

代码： order：数字;

单个子元素侧轴对齐方式（align-self）

取值（和align-items取值一样）：
在这里插入图片描述

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-095d4a0b23.css" rel="stylesheet">
                </div>
</article>
<div class="postTime">
            <div class="article-bar-bottom">
        <div class="reward-user-box">
            <span class="reward-word">有 <span class="num">0</span> 个人打赏</span>
                        </div>
    </div>
            <span class="time">
        文章最后发布于: 2019-10-09 17:29:36        </span>
</div>