flex布局

一:flex是弹性布局，为盒子模型提供灵活性

任何一个容器都可以指定为flex布局

设为flex布局后，子元素的，float.clear.vertical-align的属性会失效

二:基本概念

采用flex布局的元素:容器

flex里的项目:子元素

两条轴:main axis:水平的主轴

            cross axis:垂直的交叉轴

主轴开始的位置:main start

主轴结束的位置:main end

交叉轴开始的位置:main start

交叉轴开始的位置:main end

三:容器属性

1.flex-direction

.box{

  flex-direction:属性

}

属性:

row默认主轴为水平方向，起点在左端

row reverse默认主轴为水平方向，起点在左右端

column默认主轴为交叉轴方向，起点在左右端

column-reverse默认交叉轴为水平方向，起点在左右端

2.flex-wrap

默认情况下，项目排在一条轴线，若排不下，如何换行

.box{

      flexwrap:属性

}

属性:nowrap不换行

wrap第一行在上方

wrap reverse第一行在下方

3.flex-flow

.box{

    flex-flow:

}

4.justify-content

.box{

  justity-content:属性

}

属性:flex-start

flex-end

center

space-between

space-around

5.align-items

.box{

  align-items:属性

}

属性:flex start

flex  end

center

baseline

strentch

上传中，请稍候...

6.align cotent

.box{

    align content:属性

}

四:项目属性

1.order定义项目排列顺序，数值越小排列越靠前

2.flex grow

定义项目放大比例，默认为0，

3.flex shrink

定义项目缩小比例

.item{

  flex shrink;

}

4.flex basis

定义分配多余空间之前，项目所占的主轴空间

5.flex

.item{

    flex:none/flex grow/flex shrink/flex basis

}

6.align self