flex布局-伸缩盒模型

一、什么是flex布局？

CSS3中引入了一种新的布局方式flex-box布局(伸缩盒模型布局)。

 1）设置了flex布局的元素被称为flex容器，它的子元素自动称为容器项目，被称为flex项目。

　　

 

 

 2）它的主要特点是伸缩容器有能力让它的伸缩项目改变它的宽度顺序等来最合适地填充可用空间。伸缩项目可以扩展来填满空间，或者缩写以防止溢出伸缩容器。

 二、相关属性

1、容器上的属性

1）flow-direction:设置伸缩容器主轴的方向

　　row(默认值)：从左向右排版

　　row-reverse：从右向左排版

　　column：从上向下排版

　　column-reverse：从下向上排版

2)flex-wrap:设置伸缩容器中的伸缩 项是单行显示还是多行显示

　　nowrap：单行显示

　　wrap：多行，在第一行下面显示

　　wrap-reverse：多行，在第一行上面显示

3)flex-flow属性：flex-direction与flex-wrap的缩写

　　默认值：row nowrap

4)justify-content:伸缩项目在主轴上的对齐方式

　　flex-start：伸缩项目在主轴起始位置对齐

　　flex-end：伸缩项目在主轴起始结束对齐

　　

 

 

 　　center:

　　

 

 

 　　space-around：给所有伸缩项的两遍都添加相同的间隙，所以最左和最右侧的两个间隙为中间的间隙的一半

　　　

 

 

 　　space-between：两端对齐，中间的项目均等占有间隙

　　

5）alien-item：侧轴（主轴的交叉轴）的单行对齐方式，对于单行作用

　　默认值：strech,伸缩项目没有设置高度或者高度为auto时，默认会拉伸充满整个容器

　　

　　

alien-items：flex-start

　　

 

 

 alien-items：center

　　

 

 alien-items：flex-end

　　

　alien-items：base-line

　　

 

 

 

 

5）alien-content：侧轴（主轴的交叉轴）的多行对齐方式，对于多行起作用

　　stretch:默认值，伸缩项目拉伸填充整个容器(项目不能高度或设为auto，将占满整个容器的高度)

　　

 

 　start：

　　

  end：

　　

 　　center：

　　　

 

 　　space-around：

　　　　

 

 　　space-between：

　　　　

 

2、伸缩项目的属性

　　1）order：设置伸缩项目的排列顺序，默认为0，数值越小越靠前。可以为负数

　　2）flex-grow：按照一定的比例分配伸缩容器的宽度，默认为0，表示即使存在多余宽度也不做改变

　　　　多余宽度：伸缩容器宽度-所有项目的宽度

　　　　每个项目分配=（多余宽度/flex-grow和）*每个项目自己的flex-grow

　　　  flex-grow:1  表示项目占用一份宽度

　　　  flex-grow：2  表示将当前的伸缩项目所占有的额外空间是其他项目的两倍　

　　　　

 

 

 

　　3）定义伸缩项目的收缩能力

　　　　flex-shrink：默认值为1 当伸缩容器的宽度小于所有伸缩项目的宽度时，会根据设置的flex-shrink进行缩放

　　　　如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

　　　　　　

 

 

　　　4）flex-basis：设置伸缩项目的基准值，浏览器会根据这个值俩计算主轴上的剩余空间。默认值为auto，即项目本来的大小

　　　　　　注意：同时通过width和flex-basis给伸缩项设置宽度，优先采用flex-basis值。如果flex-basis为auto采用width的值 

　　　5）flex：flex-grow flex-shrink flex-basis的缩写 默认值 0,1，auto

　　　6）alien-self:设置单个与其他项目的不同的对齐方式，默认值auto，表示继承父元素的alien-item的对齐方式，会覆盖alien-item

row-reverse