当前位置：首页 > news >正文

CSS布局——Flexbox基础使用

news 2025/8/4 7:24:19

基础概念

Flexbox布局的概念

Flexbox布局是一种布局的模式，用来在一个维度上为项目设置布局

容器

在HTML中大多数元素例如div、ul、main块元素，span、em、i行内元素都可以作为Flex容器，它的作用是开启一个Flex布局模式，你只需要在元素上面设置display: flex即可开启一个Flex布局容器。

项目

当开启一个Flex布局的时候，容器中的一个个元素::before、::after、文本、dom元素就是项目，这些项目是容器的子元素，他们之间是父子关系，子元素也可以开启自己独立的Flex布局，他不会继承父元素的flex属性。

<div class="container"><div>1</div><div>1</div><div>1</div><div>1</div>
</div>
<!-- 开启Flex布局 -->
.container {display: flex; width: 300px;height: 200px;background-color: #8a8282;
}

主轴、侧轴

在Flex中容器有两个轴分别是主轴和侧轴，默认情况下主轴沿着行的方向分布，侧轴沿着列的方向分布。有一点需要注意，主轴和侧轴的方向并不是固定不变的而是要受到flex-direction和writing-mode或者direction 阅读模式的影响

容器大小：主轴尺寸、侧轴尺寸

Flex容器的大小是由主轴尺寸或者侧轴尺寸决定的，主轴的尺寸：主轴开始位置到主轴结束位置的距离，侧抽尺寸：侧轴的开始位置到侧轴的结束位置的距离。

flex-direction控制项目的方向

flex-direction属性用来控制主轴上项目的排布方向，默认是row即按照行内的方式在一行排列，如果想让元素按照块的方式在一列显示则可以设置flex-direction: column``row-reverse和column-reverse可以使主轴（或者侧轴）的起点和终点位置互换

flex-wrap控制项目换行

flex-wrap用来控制项目的换行，默认情况下是不换行的flex-wrap: nowrap，即使项目已经溢出容器了它也保持一行排列，如果想让容器中的项目在一行容纳不下后进行强制换行显示可以设置flex-wrap: wrap,wrap-reverse也会让项目换行只不过他的方向是相反的，例如wrap会让换行元素排列到下一行，而wrap-reverse会让换行元素排列到当前行的上一行去，如下👇

<style>
.container {width: 400px;background-color: #ddb6d8;display: flex;gap: 10px;border: 1px solid #0a57e7;flex-wrap: wrap-reverse;
}
.container div{width: 100px;height: 100px;background-color: #c9df0b;text-align: center;line-height: 100px;
}
</style>
<div class="container"><div>itm1</div><div>itm2</div><div>itm3</div><div>itm4</div>
</div>