flex布局

两条轴线:

                主轴:由flex-direction定义,取值:

                          row,row-reverse           主轴沿着inline方向延伸(横向延伸)

                          column,column-reverse              主轴沿着上下方向延伸(block排列的方向)

                交叉轴:垂直于主轴,如果主轴是x轴( row,row-reverse),那么y就是交叉轴,反之也是如此.

                        例子:如果flex-direction是row,且内容是英文,则主轴的起始线是左边,终止线是右边.

                但如果是阿拉伯文,则主轴的起始线是右边,终止线是左边.

                *交叉轴的起始线一般都是flex容器的顶部,终止线是底部,因为上述例子用的语言都是水平书写模式.

flex容器:

        文档中采用flexbox的区域叫做flex容器,创建flex容器只需把display属性值改为flex或者inline-flex.完成该操作后,容器中的直系子元素就会变成flex元素,所有css属性都会有一个初始值,所以flex容器中的元素都会有如下的操作:

• 元素按行排列(flex-direction属性的初始值是row).
• 元素从主轴的起始线开始
• 元素不会再主维度方向拉伸,但是可以缩小
• 元素被拉伸来填充交叉轴大小
• flex-basis属性为auto
• flex-wrap属性为nowrap

这样的话,元素会呈线性排列,并且把自己的大小,作为主轴的大小,如果有太多元素在主轴上,不会发生换行,只会溢出.如果一些元素比其他元素高(内容多),元素会在交叉轴方向被拉伸来填满内容.

flex方向的更改:

        flex-direction:row-reverse可以让元素沿着行的方向显示,但是起始线和终止线位置会交换.

        把flex-direction改为column,主轴和交叉轴交换,元素沿着列的方向排列显示,改为column-reverse,起始线和终止线交换.

flex-wrap实现多行flex容器

        flex-box是一维模型,但是可以使我们的flex项目应用到多行中,所以在这样做的时候,应该把每一行看作一个新的flex容器,任何空间分布都将在该行上发生,而不影响空间分布的其他行.

        为实现多行效果,应当为属性flex-wrap添加一个属性值wrap,如果项目太大二无法全部显示在一行中,则会换行显示.对于flex容器,项目的子元素总宽度大于容器最大宽度,由于flex-wrap设置的属性值为wrap.所以项目的子元素换行显示,若设置为nowrap,这也是初始值,容器中的元素会缩小以适应容器,因为它们使用的是允许缩小的初始flexbox值.如果项目的子元素无法缩小,使用nowrap会导致溢出,或者缩小程度还不够小.

 flex元素上的属性

• flex-grow
• flex-shrink
• flex-basis

1. flex-basis:定义了该元素的空间大小,flex容器里除了元素所占的空间以外的空间就是可用空间,该属性的默认值是auto.此时,浏览器会检测这个元素是否具有确定的尺寸.如果没有给元素设定尺寸,flex-basis会使用元素内容的尺寸,这就证明:只要给flex元素的父元素进行声明display:flex,所有子元素就会排成一行,且自动分配大小以充分显示元素内容.
2. flex-grow:若被赋值为一个正整数,flex元素会以flex-basis为基础,