布局是指HTML的整体结构,好的布局直接影响到用户的体验,同样,在前端面试的过程中,布局也是一个必问点,所以,今天我们来整体回顾一下flex布局。
什么是flex布局?
flex是flexibleBox的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性,主要用来为移动端布局,PC端支持较差。
布局原理
通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。
开始flex布局的方式
/* 块级元素 */
display:flex
/* 行内元素 */
display:inline-flex
任何一个元素都可以指定为flex布局。当我们为父盒子设为flex布局之后,子元素的float、clear、vertical-align
属性将失效。
采用flex布局的元素,称为flex容器(flex container),所有的子元素自动成为容器成员,称为flex项目(flex item),默认存在两根轴,水平的主轴(main axis)和垂直的交叉轴(cross axis),项目默认沿主轴排列。如下图所示:
flex容器的属性
属性 | 含义 |
---|---|
flex-direction | 设置主轴的方向 |
justify-content | 设置主轴上的子元素排列方式 |
flex-wrap | 设置子元素是否换行 |
align-items | 设置侧轴上的子元素的排列方式 |
flex-flow | flex-direction和flex-wrap的复合属性 |
align-content | 决定了多行子元素在侧轴的对齐方式 |
1.flex-direction:设置主轴的方向
①flex-direction: row
默认,x轴,从左到右
②flex-direction: row-reverse;
x轴翻转,从右到左
③flex-direction: column;
y轴,从上到下
④flex-direction: column-reverse;
y轴翻转,从下到上
2.justify-content:设置主轴上的子元素排列方式
①justify-content: flex-start;
如果主轴是x轴,则从左到右
②justify-content: flex-end;
从尾部开始排列
③justify-content: center;
主轴上居中对齐
④justify-content: space-around;
到两端的距离等于中间距离的一半
⑤justify-content: space-between;
两端对齐,中间距离相等
⑥justify-content: space-evenly;
所有的距离都相等
3.flex-wrap:设置子元素是否换行
①flex-wrap: nowrap;
默认不换行,压缩显示
②flex-wrap: wrap;
换行显示
③flex-wrap: wrap-reverse;
多行显示,对比wrap,在侧轴上反过来
4.align-items:设置侧轴上的子元素的排列方式
①align-items: flex-start;
顶部对齐
②align-items: flex-end;
底部对齐
③align-items: center;
垂直居中
5.align-content:决定了多行子元素在侧轴的对齐方式
①align-content: flex-start;
从上到下
②align-content: flex-end;
最后一行挨着下边
③align-content: center;
居中对齐
④align-content: space-around;
到两端的距离等于中间距离的一半
⑤align-content: space-between;
两端对齐,中间距离相等
⑥align-content: space-evenly;
所有距离都相等
6.flex-flow:flex-direction和flex-wrap的复合属性
flex项目的属性
属性 | 含义 |
---|---|
order | 定义项目的排列顺序,默认是0,越小越靠前 |
flex-grow | 设置子元素如何扩展,默认为0,即使存在剩余空间,也不放大 |
flex-shrink | 设置子元素如何收缩,默认为0,即空间不足时,会缩小 |
flex-basis | 设置子元素在主轴上的字体大小 |
align-self | 控制子元素自己在侧轴上的排列方式,覆盖父元素的align-items属性 |
flex | 定义子元素分配剩余空间 |
1.order:定义项目的排列顺序,默认是0,越小越靠前
给child1元素添加属性order: 1;
,展示效果如图:
2.flex-grow:设置子元素如何扩展,默认为0,即使存在剩余空间,也不放大
给child1元素添加属性flex-grow: 2;
,展示效果如图:
flex-grow
可以设置任意非负数字(正小数、正整数、0),默认是0。当flex container
在主轴方向上有剩余size时,flex-grow
才会有效。如果所有flex-item
的flex-grow
总和超过1,每个flex-item
扩展的size为:剩余size * flex-grow / sum
。不超过1,每个扩展的size为:剩余size * flex-grow
。
3.flex-shrink:设置子元素如何收缩,默认为0,即空间不足时,会缩小
给child1元素添加属性flex-shrink: 2;
,展示效果如图:
flex-shrink
可以设置任意非负数字(正小数、正整数、0),默认值是1。当flex-items
的宽度超过了主轴的宽度时,flex-shrink
才会有效。如果所有flex-item
的flex-shrink
总和超过1,每个flex-items
收缩的size为:超出的size * 收缩比例 / 收缩比例之和
。不超过1,每个flex-item
的size为:超出size * 收缩比例
。最终会溢出父盒子。
4.flex-basis:计算主轴是否有多余空间
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小,有优先级,从高到低如下:
max-width/max-height/min-width/min-height
flex-basis
width/height
内容本身的size
5.align-self:控制子元素自己在侧轴上的排列方式,覆盖父元素的align-items属性
父元素设置了align-items: center;
,child1元素设置了align-self: flex-end;
,展示效果如图:
6.flex:定义子元素分配剩余空间
是flex-grow、flex-shrink、flex-basis
的简写
小结
到此,flex布局的相关知识整理就先到这里了,flex布局让我们的布局方式更加灵活和简单,还可以达到页面布局自适应的效果。