弹性布局详细讲解

# 弹性布局

> 弹性盒模型 伸缩盒模型 flex box

···

wrap{

width: 1200px;

height: 200px;

display: flex;

border: 1px solid #000;

}

或者把容器变为行内元素

wrap{

width: 1200px;

height: 200px;

display: inline-flex;

border: 1px solid #000;

}

···

* 弹性布局是给父元素设置display:flex

* 父元素高度不会塌陷

* 父元素称之为容器 子元素称之为项目

* 父元素高度不会塌陷 默认子元素 横向（水平）排列

* 弹性布局是一维布局 主轴：默认水平 交叉轴：默认垂直方向 轴的方向可以改变

* 容器有高度和项目没有高度时，项目会继承容器高度

* 容器和项目有高度时，听项目的高度

* 列表项目宽度之和不超过容器时 就是项目的宽度，超过则进行平分容器的压缩

 

### 容器的属性

 # flex-direction 改变轴方向 默认为row

 * row            轴开始位置

 * row-reverse    颠倒顺序 并且在轴的结束位置

 * column         垂直方向对齐

 * column-reverse 颠倒垂直方向 并且在轴的结束位置

 # justify-content 主轴对齐

 * flex-start    开始轴开始

 * flex-end      结束轴开始

 * center        居中对齐   //实现的是垂直对齐！

 * space-between 两端对齐

 * space-around   分布环绕

  # flex-wrap  是否换行

 * wrap          换行

 * wrap-reverse  颠倒换行

 * nowrap        不换行

### flex-flow 是flex-direction 和flex-wrap的简写  flex-flow:row wrap

 

# align-items 交叉轴

* flex-start 

* flex-end

* center //水平居中

* baseline 文字基线对齐

 

# align-content 多轴对齐

* stretch 

* flex-start 开头

* flex-end   结尾

* center     中心

* space-between  环绕

* space-around   间隙一样

 

# order 排序默认值都是0值  越小越在前面

* .item:nth-child(1){

   order: 0 ;

}

 

# 放大比例flex-grow  默认值是0 意思是有剩余空间也不放大

* 设置1 占剩余空间 

* 几个设置1 一起平方剩余空间

* .item:nth-child(2){

    flex-grow: 1;

}

# flex-shrink  默认值是 0 设置0不缩小

* (缩小比列 剩余空间不足时默认缩小)

* .item:nth-child(1){

    flex-shrink: 0;

}

 

# 基准值 flex-basis

```

.item:nth-child(2){

            align-self: flex-end;

            align-self: flex-start;

            align-self: center;

        }

        ```

 

###  align-self 单个项目在交叉轴上的对齐方式