flex 布局

179 阅读4分钟

FlexiableBox即是弹性盒子,用来进行弹性布局,可以配合rem处理尺寸的适配问题

为什么用flex?

①Flex为盒子模型提供最大的灵活性,任何一个容器都可以指定为Flex布局。 ②更加符合响应式设计的特点。

虽然平时可以采取float+定位的方式进行布局,但是有时候在某些场景下使用flex会更加的快捷和方便。接下来,我们看一个flex比较经典的结构图:

image.png

flex分主轴(main axis)和交叉轴(cross axis),可以简单理解为x轴和y轴,主轴是和盒子内部子元素排列方向一致的。

比如盒子内部子元素是水平方向排列的,那么主轴就是x轴,y轴就是交叉轴了。反之,如果盒子内部子元素是垂直方向排列的,那么主轴就是y轴,x轴就是交叉轴了。

另外还有4个顶点概念:main start、 main end、 cross start、 cross end;以水平方向排列为例,main start就是主轴的开始顶点,main end是主轴的结束顶点,cross start就是交叉轴的开始,cross end是交叉轴的结束。

最后还有一个比较重要的概念:flex item的main size是子元素占主轴的空间,并非宽度;cross size是子元素占交叉轴的空间,并非高度。

所以要深入了解使用flex布局,首先搞清楚主轴和交叉轴。

flex-direction

作用:子元素在父元素盒子中的排列方式,决定主轴方向

row 默认值,主轴为水平方向,起点在左端

row-reverse 主轴为水平方向,起点在右端

column 主轴为垂直方向,起点在上端

column-reverse 主轴为垂直方向,起点在下端

flex-wrap

作用:子元素在父元素盒子中是否换行(列)

nowrap 默认值,不换行或不换列

wrap 换行或换列,第一行在上方或者第一列在左侧

wrap-reverse 换行或换列,但以相反的顺序,第一行在下方或者第一列在右侧

flex-flow,flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

justify-content

作用:项目在主轴上的对齐方式,也可以理解为存在剩余空间时,设置间距的方式

flex-start 默认值,左对齐,从左到右,挨着行的开头。

flex-end 右对齐,起点在右端,从右到左,挨着行的结尾

center 居中,起点在上端。

space-between 与交叉轴两端对齐,轴线之间的间隔平均分布

space-around 每根轴线两侧的间隔都相等,轴线之间的间隔比轴线与边框的间隔大一倍

stretch 默认值,轴线占满整个交叉轴。

align-items和align-content属性值center的区别

align-items属性可以应用于所有的flex容器,它的作用是设置flex子项在每个flex行的交叉轴上的默认对齐方式。有说法align-items处理的是单行,不能处理多行,其实是理解错误了,它处理单行是把所有子元素的每一行都当成独立都一个个体去处理,所以有单行处理的说法。

align-content只适用多行的flex容器(也就是flex容器中的子项不止一行时该属性才有效果),它的作用是当flex容器在交叉轴上有多余的空间时,将子项作为一个整体(属性值为:flex-start、flex-end、center时)进行对齐。

align-items:center;和align-content:center 总结

截图33.png

结论:从上表可知,对于align-items和align-content的区别,总结为以下两点: align-items属性是针对单独的每一个flex子项起作用,它的基本单位是每一个子项,在实例的几种情况下都有效果(当然要看具体的属性值)。 align-content属性是将flex子项作为一个整体起作用,它的基本单位是子项构成的行,两种情况下有效果:①子项多行且flex容器高度固定 ②子项单行,flex容器高度固定且设置了flex-wrap:wrap;