FlexiableBox即是弹性盒子,用来进行弹性布局,可以配合rem处理尺寸的适配问题
为什么用flex?
①Flex为盒子模型提供最大的灵活性,任何一个容器都可以指定为Flex布局。 ②更加符合响应式设计的特点。
虽然平时可以采取float+定位的方式进行布局,但是有时候在某些场景下使用flex会更加的快捷和方便。接下来,我们看一个flex比较经典的结构图:
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 总结
结论:从上表可知,对于align-items和align-content的区别,总结为以下两点: align-items属性是针对单独的每一个flex子项起作用,它的基本单位是每一个子项,在实例的几种情况下都有效果(当然要看具体的属性值)。 align-content属性是将flex子项作为一个整体起作用,它的基本单位是子项构成的行,两种情况下有效果:①子项多行且flex容器高度固定 ②子项单行,flex容器高度固定且设置了flex-wrap:wrap;