- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
Flex布局是CSS3引入的一个新概念,主要是让容器有能力自适应地布局,让它的子元素能自动改变其宽度、高度,以适配所有终端设备的屏幕大小。也就是此前所说的响应式布局。Flex布局在屏幕和浏览器窗口大小改变时可以灵活调整布局,调整项目大小,控制元素在页面上的布局方向等。一起来看看这个神奇的Flex弹性伸缩布局吧。
1:设置弹性伸缩盒:
display:flex; 将容器盒模型作为块弹性伸缩盒显示
display:inline-flex; 将容器盒模型作为内联级弹性伸缩盒显示
2:设置伸缩项目的子元素排列方式:
flex-direction:column; 从上到下排列;
flex-direction:column-reverse; 从下到上排列;
flex-direction:row; 从左到右排列;
flex-direction:row-reverse; 从右到左排列;
3:设置无法换行时自动换行 多个子元素宽度超过盒子宽时,子元素换行
flex-wrap:wrap; 无法容纳时自动换行;
flex-wrap:wrap-reverse; 无法容纳时自动换行,方向与wrap相反;
4:集合排列方向和控制换行的简写形式:
flex-flow:row-reverse wrap; 从右到左排列;超出宽度就换行。
5:设置伸缩项目的水平对齐方式:
justify-content:flex-start; 以起始点靠齐;
justify-content:flex-end; 以结束点靠齐;
justify-content:center; 以中心点靠齐;
justify-content:space-between; 两边对齐,平局分布
justify-content:space-around; 两边对齐,平局分布,但两端保留一半的空间
6:处理伸缩项目容器的额外空间(垂直对齐方式)
align-items:flex-start; 顶部对齐,并清理下部额外空间
align-items:flex-end; 底部对齐,并清理上部额外空间
align-items:center; 以中心点对齐,并清理上下额外空间
align-items:baseline; 以基线为基准,清现额外空间
align-items:stretch; 默认。拉伸。不清理额外空间
7:单独清理某一个伸缩项目的额外(即:单独清理某一个子元素)
align-self的值与align-items的一样。如:
align-self:center; 以中心点对齐,并清理上下额外空间
8:控制伸缩窗口的比例分配(对单个子元素操作)
例:盒子内有3个p子元素;
p:nth-child(1){ flex:2; } 宽度占比2 (各占比数可随便设置)
p:nth-child(2){ flex:3; } 宽度占比3
p:nth-child(3){ flex:2; } 宽度占比2
3个子元素总占比数为 2+3+2 = 7 ;第一个元素宽度占比2/7;第二个占比3/7;第三个2/7
9:控制各伸缩项目出现的顺序:(对单个子元素操作)
例:盒子内有3个p子元素;
p:nth-child(1){ order:2; } 让第1个子元素显示在第2个位置上;
p:nth-child(2){ order:3; } 让第2个子元素显示在第3个位置上;
p:nth-child(3){ order:1; } 让第3个子元素显示在第1个位置上;