CSS:flex布局

1.flex布局原理

  • 为父盒子设置display:flex后,子元素的float、clear和vertical-align属性失效

  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

  • flex布局下,父项(flex container)为flex“容器”,子项(flex item)为flex“项目”,通过给父盒子添加flex属性来控制子项的位置和排列方式
    row和column的方向

2.flex布局 父项 常见属性

2.1 flex-direction:设置主轴方向

flex-direction

2.2 justify-content:设置主轴上子元素排列方式

ajustify-content

2.3 align-items:设置侧轴上子元素的排列方式(单行)

注:设置stretch属性,不能设置侧轴方向的长宽

align-items仅限flex-wrap: no wrap的单行子项

align-items

2.4 align-content:设置侧轴上子元素的排列方式(多行)

flex-wrap: wrap多行子项

align-content

2.5 flex-wrap:设置子元素是否换行

flex-wrap

2.6 flex-flow:复合属性,可同时设置flex-direction和flex-wrap

1
flex-flow: row wrap

3.flex布局 子项 常见属性

3.1 flex:子项分配剩余空间

用flex表示占多少份数

1
flex: <number>;   #默认是0

如果子项前后都是定宽块元素,设置flex: 1则独占剩余空间

例:用flex表示1比2比1(1:2:1)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#CSS
div {
display: flex;
width: 600px;
height: 200px;
}
div span:nth-child(1),
div span:nth-child(3) {
background-color: cadetblue;
flex: 1;
}
div span:nth-child(2) {
background-color: brown;
flex: 2;
}
#HTML
<div>
<span>1</span>
<span>2</span>
<span>1</span>
</div>

1:2:1

3.2 align-self:控制单个子项自己在侧轴的排列方式

align-self属性允许单个子项和其他子项有不一样的对齐方式,可覆盖align-items属性

1
2
3
4
span:nth-child(2){
/*设置自己在侧轴的排列方式*/
align-self:flex-end
}

3.3 order:定义子项排序顺序

数值越小,排列越靠前(是水平或者垂直方向,不是层叠),默认为0
注:和z-index(层叠)不一样

资料参考:PINK老师


CSS:flex布局
https://wwwhisperr.github.io/2022/07/23/demo06/
作者
Whisper
发布于
2022年7月23日
许可协议