Flex布局

1.Flex布局使用范围。

任何一个容器都可以添加

指定为Flex布局。

当然行内元素是这样使用  display :inline-flex;

Web内核浏览器则更不同 display: -webkit-flex;  /* Safari */

注意当设置Flex布局后，子元素的float，clear和vertical-align属性将失效。

2.基本名词

flex container 一 Flex容器

flex item   一 Flex项目

main axis  一默认情况下水平主轴

cross axis  一默认情况下垂直交叉轴

main start 一主轴开始的位置（与边框的交叉点）

main end 一主轴结束的位置

cross start 一 交叉轴开始的位置

cross end 一 交叉轴结束的位置

3.容器属性

 

3.1 flex-direction(主轴方向）

.box{

flex-direction: row 丨 row-reverse 丨 column 丨 column-reverse;

}

 

3.2 flex-wrap （布局换行方式）

.box{

flex-wrap: nowrap丨 wrap 丨wrap-reverse；

}

 

3.3

 

3.4 justify-content 属性（项目在主轴上的对齐方式）

 

 3.5 align-items属性

 align-items属性定义项目在交叉轴上如何对齐

3.6   align-content属性

  align-content 属性定义了多根轴线的对齐方式，如果只有一根轴线，不起作用

  

 

 4.项目属性

   

 

  4.1 order属性定义项目的排列属性

 .item

{

order：<integer>;

}

 

 4.2 flex-grow属性

  flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

 

4.3 flex-shrink属性

  .item

{

flex-shrink: <number>; /default 1*/

}

 

 4.4 flex-basis属性

  flex-basis属性定义了在分配多余剩余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。 默认值为auto，即项目的本来大小。

  

4.5 flex属性

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

 

 4.6 align-self属性