css3 FlexBox 弹性布局

    Flex 弹性布局

这个是css3中新添加的内容，现在已经支持所有的浏览器，利用Flex布局，可以简便、完整、响应式地实现各种页面布局。

注意：在设置 flex 后，子元素的flaot ，clear,  vertical－align 都失效。

        Webkit 内核的浏览器，必须加上 －webkit前缀

　　　flex 里面的元素我们把它们称为 项目 

目前支持：

1.Chrome 21+

2.Opera 12.1+

3.Firefox 22+

4.Safari 6.1+

5.IE 10+

 

在弹性布局中 有两个重要的 术语叫 main axis  和 cross axis

main axis 是指项目中的 水平主轴   水平主轴开始位置叫 （main start ） 结束点叫 （main end） 

cross axis 是指项目中的 垂直交叉轴  垂直交叉轴的起点叫（ cross start） 结束点叫（cross end ）

默认的排列是：沿水平主轴的左侧为起点

Flex 的6个属性

1.flex-disrection

2.flex-wrap

3.flex-flow

4.justify-content

5.align-items

6.align-content

1.Flex -disrection 属性 决定主轴的方向（项目的排列方向）一共四个属性

语法：flex-direction: column || column-reverse || row ||  row-reverse 

column－reverse ：主轴在垂直轴，起点为下。

column : 主轴为垂直轴，起点在上。

row ：主轴在水平轴，起点在左。（默认）

row－reverse ：主轴为水平轴，起点在右。

 

 

2.justify － content 属性  项目在主轴的对齐方式 一共有5个属性 

语法：justify-content: center|| flex-end || flex-start  || space-around || space-between ;

1.justify-content:flex-start;   左对齐  系统默认的对齐方式

2.justify-content: center;      内容居中  （如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）

3.justify-content: flex-end;   右对齐 

4.justify-content: space-around; 

弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是10px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*10px=5px）。

5.justify-content: space-between; ( 通俗点就是子元素之间的间隙是一样的）

弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

下面的图片解释5个属性之间的区别

 

 

3.Flex-wrap  如何换行 3个属性

 语法：flex－wrap：nowrap || wrap || wrap-reverse .

 flex-wrap : nowrap ; 不换行 （默认）

 

 

 flex-wrap :wrap ;   换行  第一行在上面

 

 

 flex-wrap :wrap -reverse ; 换行，第一行在下面

 

 

 4.Flex-flow 属性 是指 flex-direction 属性和 flex-wrap 属性的简写形式  默认属性  flex－flow ：row  nowrap ；

 5.align-items 属性 项目在垂直轴的对齐方式  一共5个属性

语法 ：align-items:flex-start || flex-end || centen || stretch || baseline ;

1.  align-items:flex-stert;   垂直轴的起点对齐 

2.  align-items:flex-end;    垂直轴的终点对齐

3.  align-items: center ;     垂直轴的中点对齐

4.  align-items: stretch ; (默认值）   项目未设置高度或者高度为 auto时, 项目将沾满 整个容器的高度 

5.  align-items: baseline;   在项目中，以第一行文字的基线对齐

 

 

6.   align-content 属性 多根轴线的对齐方式，如果只有一条轴线，则不起作用

 语法：align－content：flex-start || flex-end || center || stretch || space-between || space-around ;

 1.   align-content: flex-stert;  与垂直轴的起点对齐 

 2.   align-content: flex-end ;  与垂直轴的终点对齐

 3.   align-content : center ;    与垂直轴的中点对齐

 4.   align-content : stretch ; (默认值） 轴线占满整个垂直轴

 5.   align-content : space-between;  与垂直轴两端对齐，轴线之间的间隔平均分布

 6.   align-content: space-around;  每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

 

 

二. Flex 中项目的属性

1. order 属性 （默认值 ：0）定义项目的排列顺序。数值越小，排列越靠前。

 

 

2. flex-grow 属性 （默认值：0）定义项目的放大比列 ，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

 

 

3. flex－shrink 属性 （默认值：1）负值无效   定义项目的缩小比列 即如果空间不足，该项目将缩小。

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

 

 

4.flex－basis 属性   定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。可以设置 width 或 height 属性一样的值，项目将占固定空间。

5. flex 属性     flex-grow, flex-shrink 和 flex-basis的简写，默认值为（0  1 auto），后两个属性可选。

6. align－self 属性   允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

语法 ：  align-self: auto || flex-start || flex-end || center || baseline || stretch;

 

 

转载于:https://www.cnblogs.com/Sabo-dudu/p/5835793.html