文章目录
flex
容器存在两根轴:水平主轴,垂直交叉轴。
容器属性
flex-direction
决定主轴的方向,即项目的排列顺序。flex-direction:row|row-reverse|column|column-reverse
flex-wrap
一条轴线放不下时,如何换行。flex-wrap:nowrap|wrap|wrap-reverse
nowrap
默认不换行。一条轴线放不下时,自动压缩成一行显示。
wrap
换行。第一行在上方
wrap-reverse
换行。第一行在下方
flex-flow
flex-flow
为 flex-direction
flex-wrap
的简写形式,默认值为flex-flow:row nowrap
justify-content
定义项目在主轴上的对齐方式
- flex-start 左对齐
- flex-end 右对齐
-
center 居中
-
space-between 两端对齐
-
space-around 每个项目两侧的间隔相等
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BcvTNZkR-1651840775622)(Z:\FrontEndStudy\front-end-study\README\CSS\IMG\space-around.png)]
-
space-evenly 每个项目两侧的间隔相等
align-items
定义项目在交叉轴上的对齐方式
- flex-start
- flex-end
-
center
-
baseline:项目的第一行文字的基线对齐
-
stretch:若项目未设置高度或设为auto,会占满整个容器
align-content
定义多根轴线的对齐方式,若项目只有一根轴线,该属性不起作用
-
flex-start
-
flex-end
-
center
- space-between
-
space-around
-
stretch
项目属性
order
定义项目的排列顺序,数值越小,排列越靠前,默认为0
(下图设置为7的order为1,4的order为2,9的order为3,5的order为4,其他为5)
flex-grow
定义项目的放大比例,默认为0。根据设置的值,按比例瓜分剩余空间
flex-shrink
定义项目的缩小比例,默认为1,即若空间不足,项目将缩小。若某个项目设置为0,其余为1,当空间不足时,前者不缩小。负值无效
flex-basis
定义项目在分配多余空间之前占据的主轴空间,即项目的本来大小
flex
是flex-grow flex-shrink flex-basis
的简写,默认为0 1 auto
,后两个属性可选
flex:auto
即flex-grow:1 flex-shrink:1 flex-basis:auto
flex:none
即flex-grow:0 flex-shrink:0 flex-basis:auto
align-self
定义单个项目与其他项目不一样的对齐方式,可覆盖align-items
属性。默认为auto
,表示继承align-items
属性,若没有父元素,等同于stretch
- flex-start
- flex-end
- center
- baseline
- stretch
双栏布局
左边固定,右边自适应
<style>
.container {
display: flex;
}
.item:nth-child(1) {
background-color: aqua;
width: 200px;
}
.item:nth-child(2) {
background-color: tomato;
flex: 1;
}
三栏布局
左右两端固定,中间自适应
<style>
.container {
display: flex;
}
.item:nth-child(1) {
flex-basis: 100px;
background-color: yellow;
}
.item:nth-child(2) {
flex: 1;
background-color: turquoise
}
.item:nth-child(3) {
flex-basis: 200px;
background-color: tomato
}
</style>
水平垂直居中
<style>
.container {
width: 200px;
height: 200px;
margin: 0 auto;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.item {
background-color: green;
margin: 2px;
padding: 20px;
}
</style>