CSS3 flex 伸缩布局盒模型

CSS3引入一种新的布局模式-flexbox布局

1. 优点：flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，可以调节伸缩项目的相对大小和位置。非常适用于排列方向改变，缩放与收缩用的比较多的项目。

2. 基本概念

由于flexbox并不只是个属性，而是一个模块，会有好多属性，以及重要的名词和概念，这里简要列举下。

a 主轴和侧轴：默认就是就是水平轴和垂直轴。但可以用justify-content属性进行修改。测轴就是与主轴垂直的方向。

b 主轴 主轴方向：伸缩项目都沿着主轴方向进行排列。

c 主轴长度：就是伸缩项目在主轴上的长度或高度（看你的轴是row 还是column）

侧轴就不赘述了，以此类推。

3. 功能：

• 对屏幕和浏览器大小的自适应性非常好
• 可以让内部项目沿着主轴获测轴按比例分配额外空间，进而调整伸缩项目的大小。
• 也可以将伸缩器的额外空间分配到伸缩项目的之前，之后，之间
• 控制元素在页面上的布局方向
• 可以将垂直于布局轴的方向上的额外空间分布到该元素周围
• 可以使项目不按照文档流的先后顺序排列。

4. 伸缩容器属性

1）伸缩流方向。是指伸缩容器的主轴方向，决定了伸缩项目放置在伸缩容器中的排列方向。主要通过flex-direction设置

2）伸缩行换行。控制当伸缩项目溢出时的换行方法.flex-wrap设置

3）伸缩方向与换行，上面两个的综合：flex-flow

4）主轴对齐，项目如何在伸缩容器中对齐方式。

5）侧轴对齐。与主轴类似，就是方向上是垂直的。

6）堆栈伸缩行。是控制伸缩项目行在布局轴的对方方式，有点像测轴对齐。

5.flex弹性布局

1. 只要一个元素被声明为flex布局，它内部的所有元素的display都是flex的，flex中的模块宽高都是与内容大小适应的。

   水平的主轴，垂直的交叉轴。flex容器内的元素默认按主轴排列
   容器的属性：

   属性解释flex-direction

   项目的排列方向

   可选值含义row（默认值）排列方式为水平排列，元素从左到右排row-reverse排列方式为水平排列，元素从右到左排column排列方式为垂直排列，元素从上到下排column-reverse排列方式为垂直排列，元素从下到上排

   
   

   flex-wrap

   默认情况下，项目都排在一条线上，该属性定义了如果一条轴线排不开时，内部元素如何换行

   可选值含义nowrap（默认值）不换行,让所有内部元素都挤在一行wrap换行，第一行在上wrap-reverse换行，第一行在下

   
   

   flex-flow是flex-direction与flex-wrap的简写形式 默认值：row nowrapjustify-content

   定义项目在水平方向上的对齐方式。

   可选值含义flex-start(默认)左对齐flex-end右对齐center居中space-between两端对其，项目中间的间隔都相等space-around每个项目两侧的间隔相等。项目之间的间隔为二倍

   
   

   align-items

   定义项目在垂直方向上如何对齐，让人郁闷的垂直居中，可以用这个很easy实现

   可选值含义flex-start上对齐flex-end下对齐center中点对齐，是内部每个模块在垂直方向上居中baseline第一行文字的基线对其，包含文字的框不一定对齐。stretch未设置高度的项目，将拉伸沾满整个容器,设了高度则无效

   
   

   align-content也是对齐方式的一种，当垂直方向上有额外的空间时，来设置内部div位置。一般配合flex-wrap:wrap使用。 演示https://jsbin.com/jayuqufile/edit?html,css,output 可选值与justify-content一样，并多了stretch。含义的话，可以想象把原来的水平轴向右旋转90度然后进行排列。 默认值是stretch，占满整个交叉轴。

   
   

   测试地址：https://jsbin.com/zugudukahe/edit?html,css,output

2. flex中每个项目的属性。

   属性含义order值为整数，越小，该项目应该排在轴上的最前面。默认为0。可以为负值flex-grow项目的放大比例。如果有剩余空间，则按比例放大。默认为0flex-shrink定义项目缩小的比例，默认为1，也就是如果空间不足，项目将缩小。如果不想让他缩，则设为0。负值无效。flex-basis定义项目分配空余空间前，该项目所占的主轴空间。默认为auto，本来的大小。flex是上面三个grow，shrink,basis的简写。默认 0 1 auto。auto（1 1 auto）；none（0 0 auto）建议写这个，而不是写三个分开的属性。align-self允许他有自己的对齐方式。可覆盖align-iterms属性。如果没有父元素定义，则为stretch