flexbox的两条轴线(axis 或 axes)
当元素被设计为一个弹性盒子,也就是元素display属性被设定为flex的时候,flexbox会根据两条轴线来进行布局
下面先对图中所出现的几个概念进行解释:
①main axis
main axis 是flexbox中的子项(flex items)进行布局方向的轴线,main axis的起点被称作main start,终点被称作 main end
main axis由元素的flex-direction属性(默认值为row)决定,flex-direction属性有以下四个可用属性值:
- row 排成一行
- row-reverse 排成一行并且顺序颠倒
- column 排成一列
- colum-reverse 排成一列并且顺序颠倒
Case1:当你选择了 row或者row-reverse属性值的时候,你的main axis会在行上,在行内方向(inline direction)。
- 属性值为row时,main start 在左侧,main end 在右侧,子元素依次从左向右排列
- 属性值为row-reverse 的时候,mian start在右侧,main end在左侧,子元素依次从右向左排列
Case2:当你选择了column或者column-reverse属性值的时候,你的main axis会从页面顶部指向页面底部,在块方向(block direction)
- 属性值为column时,main start 在上端,main end 在底端,子元素依次从上向下排列
- 属性值为row-reverse 的时候,mian start在底端,main end在上端,子元素依次从下向上排列
②cross axis
cross axis是垂直于布局方向的的轴线,也就是垂直于 main axis 的轴线,cross axis的长度默认由子项中最高的元素决定,同样地,cross axis的起点和终点被称为 cross start与cross end
cross axis垂直于main axis,所以情况与main axis相反
Case1:当你选择了 row或者row-reverse属性值的时候,你的Cross axis会在列上,在块方向(inline direction)
Case2:当你选择了 row或者row-reverse属性值的时候,你的Cross axis会在行上,在行内方向(inline direction)
③flex container与flex items
使用flexbox弹性盒子的一块区域就是flex container,将元素的display属性的属性值设置为flex 或者 inline-flex,就有了flex container,在上一节中的<section>就是一个例子,当我们把一个元素设置为 flex container的时候,它的所有直接子元素就成了flex items上一节的<article>标签就是一个例子,当我们创建了一个flex container的时候,会有一些默认值被设置给了这个flex container,这些默认值如下:
1.子项会按行显示,相当于(flex-direction的默认属性值为 row)
2.子项会从main start开始排列
3.子项不会在main方向伸展,但会收缩
4.子项会在cross axis方向伸展填充,填充尺寸由cross axis的尺寸决定(即由子项中最"高"的元素决定),这点可以从上一节两个
小例子看出,默认情况下,同一行子项会有相同的高度,因为cross方向会进行填充
5.flex-basis属性值被设置为auto
flex-basis 设置 main axis方向的初始尺寸,auto表示子项尺寸相等
6.flex-wrap 属性值被设置为 nowrap,当子元素的宽度大于父元素时,会溢出而不会换行
理解这些概念对后面flexbox属性的学习具有具有十分重要的作用,flexbox是根据两条轴线来进行居中和调整对齐的