Css 中 flex 弹性布局详解
共计 2344 个字符,预计需要花费 6 分钟才能阅读完成。
1. 概念
flex 是 CSS 的一种布局模式,它通过定义父容器 (flex container)
和子元素 (flex items)
之间的关系来创建灵活的布局。
1.1 容器-Flex Container
- 设置了
display: flex
或display: inline-flex
称为容器。 - 它的所有直接子元素都会成为
flex items
(弹性项目)。
1.2 弹性项目-Flex Items
- 所有弹性容器内的子元素。
- 这些子元素可以通过各种 flex 相关的 css 属性来控制对齐、排序和空间分配。
此案例外层 div 为容器,内层全为弹性项目。
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<style>
.box {
display: flex;
}
</style>
1.3 主轴与交叉轴
- 主轴:弹性项目的主要排列方向,默认是水平的(从左到右)。
- 交叉轴:与主轴垂直的方向,默认是垂直方向(从上到下)。
可以通过 flex-direction
改变主轴方向。
2. 容器属性
2.1 display
display 属性定义弹性容器。
-
flex
:块级弹性容器,元素占据整个宽度。 -
inline-flex
:行内弹性容器,容器只占据内容的宽度。
2.2 flex-direction
弹性项目在弹性容器中的排列方向(主轴方向)。
-
flex-direction
:从左到右 -
row-reverse
: 从右到左。 -
column
: 从上到下。 -
column-reverse
: 从下到上。
2.3 flex-wrap
弹性项目是否换行。
-
nowrap
: 不换行,所有项目都在同一行(默认)。 -
wrap
: 换行,项目会在行满后另起一行。 -
wrap-reverse
: 换行,但顺序与wrap
相反。
2.4 justify-content
弹性项目在主轴上的对齐方式。
-
flex-start
: 从主轴起始处对齐(默认)。 -
flex-end
: 从主轴末端对齐。 -
center
: 居中对齐。 -
space-between
: 两端对齐,项目之间的间距相等。 -
space-around
: 每个项目两侧的间距相等,项目之间的间距是两边间距的两倍。 -
space-evenly
: 项目之间的间距和两端的间距都相等。
2.5 align-items
弹性项目在交叉轴上的对齐方式(针对单行)。
-
stretch
: 项目拉伸以填满容器(默认)。 -
flex-start
: 项目在交叉轴的起始处对齐。 -
flex-end
: 项目在交叉轴的末端对齐。 -
center
: 项目在交叉轴上居中。 -
baseline
: 项目基线对齐。
2.6 align-content
定义多行内容在交叉轴上的对齐方式(针对多行)。
-
stretch
: 行会拉伸以填满容器(默认)。 -
flex-start
: 行在交叉轴的起始处对齐。 -
flex-end
: 行在交叉轴的末端对齐。 -
center
: 行在交叉轴上居中。 -
space-between
: 行之间的间距相等。 -
space-around
: 每行两侧的间距相等,行之间的间距是两侧的两倍。
3. 弹性项目属性
3.1 order
- 控制项目的显示顺序,默认值为
0
。 - 数字越小,项目越靠前,负数同样有效。
3.2 flex-grow
项目在容器中剩余空间的分配比例,默认值为 0
。(即默认不占满容器)
- 比例越大,项目占据的剩余空间越多。
- 如果所有项目的
flex-grow
值相同,剩余空间将会均匀分配。
3.3 flex-shrink
项目在容器空间不足时的收缩比例,默认值为 1
。(即空间不足时默认自动收缩容器,原来设置宽度为800,但实际会达不到)
- 比例越大,项目缩小得越多。
- 如果设置为
0
,项目不会缩小。
3.4 flex-basis
项目的初始大小(主轴方向上的),默认值为 auto。
- 可以用具体的值如
px
、%
或auto
。 -
flex-basis
的值会覆盖width
或height
的值。
3.5 flex
flex-grow
, flex-shrink
和 flex-basis
的简写形式。
-
flex: none
等价于flex: 0 0 auto
。即元素不会放大,也不会缩小,元素的初始尺寸根据其内容、宽度/高度等自动决定。 -
flex: auto
等价于flex: 1 1 auto
。容器空间有剩余时占满,不足时收缩。元素的初始大小由其内容、宽度/高度等因素自动决定(类似于常规布局时的大小),而不是固定为 0。 -
flex: 1
等价于flex: 1 1 0
。即:容器空间有剩余时占满,不足时收缩。布局时先忽略元素内容的大小,然后再按 flex-grow 和 flex-shrink 规则调整。
3.6 align-self
允许单个项目对齐方式覆盖容器的 align-items
属性。
-
auto
: 使用容器的align-items
设置(默认)。 -
stretch
: 拉伸以填充容器。 -
flex-start
: 在交叉轴起始处对齐。 -
flex-end
: 在交叉轴末端对齐。 -
center
: 在交叉轴居中对齐。 -
baseline
: 项目基线对齐。
测试代码:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
height: 300px;
border: 2px solid #333;
}
.item {
width: 600px;
height: 100px;
background-color: lightcoral;
margin: 10px;
}
</style>
Tips:清朝云网络工作室
阅读剩余
THE END