弹性盒子模型
- [flex-direction 排列方式主轴方向](#flex-direction 排列方式主轴方向)
- 换行
- 排序
- 控制子元素缩放比例
- - 缩放是如何实现的？
- 控制子元素的对其方式
- - [justify-content 横向对齐方式](#justify-content 横向对齐方式)
  - [align-items 纵向对齐方式](#align-items 纵向对齐方式)
- [align-content 多行对齐方式](#align-content 多行对齐方式)

弹性盒子模型

flex-direction 排列方式主轴方向

flex-direction: row; 横向布局，默认从左向右。

flex-direction: row-reverse; 横向布局，从右向左。

flex-direction: column; 纵向布局，从上到下。

flex-direction: column-reverse; 纵向布局，从下到上。

css 复制代码

.top{
    width:800px;
    background: yellow;
    display:flex;
    flex-direction: row-reverse;  
}

换行

flex-wrap: wrap; 换行

flex-wrap: nowrap; 不换行

排序

给子级加上 order: 编号

值越小越考前，值越大越向后排。

css 复制代码

.top{
    width:800px;
    background: yellow;
    display:flex;
    flex-direction: row;  
}

.bottom{
    width:800px;
    height:200px;
    background:pink;
}

.left{
    width:200px;
    height:100px;
    background:orange;
    float:left;
    order:1;
}
.middle{
    width:200px;
    height:100px;
    background:blue;
    float:left;
    order:3;
}
.right{
    width:200px;
    height:100px;
    background: purple;
    float:left;
    order:2;
}

控制子元素缩放比例

作用于子级元素。

flex-shrink: 压缩因子。

flex-grow: 拉伸因子。

flex-grow: 基准因子，一般用宽度代替。

css 复制代码

.top{
    width:800px;
    background: yellow;
    display:flex;
    flex-direction: row;  
}

.bottom{
    width:800px;
    height:200px;
    background:pink;
}

.left{
    width:200px;
    height:100px;
    background:orange;
    flex-grow: 8;
}
.middle{
    width:200px;
    height:100px;
    background:blue;
    flex-grow:5;
}
.right{
    width:200px;
    height:100px;
    background: purple;
    flex-grow:1;
}