设置侧轴上⼦元素排列⽅式_初识flex布局### 弹性布局
弹性布局是⼀种当页⾯需要适应不同的屏幕⼤⼩以及设备类型时确保元素拥有恰当的⾏为的布局⽅式。
**使⽤⽅法**：⽗元素设置`display:flex`
> 注意：⽗元素属性设置了flex布局其⼦元素的float,clear,vertical-align将⽆效
#### 常⽤属性(⽗元素/容器))
* flex-direction：设置主轴⽅向
* justify-content：设置主轴上的⼦元素排列⽅式
* flex-wrap：设置⼦元素是否换⾏
* align-content：设置侧轴上的⼦元素的排列⽅式(多⾏)
* align-items：设置侧轴上的⼦元素排列⽅式(单⾏)
* flex-flow：复合属性，相当于同时设置了flex-direction,flex-wrap
#### 主轴与侧轴
在flex布局中，分为主轴和侧轴两个⽅向，也叫做⾏和列，x轴和y轴
* 默认主轴⽅向是x轴⽔平向右
* 默认侧轴⽅向是y轴垂直向下
**flex-direction设置主轴⽅向**
通过flex-direction设置谁为主轴，剩下的就是侧轴，⽽我们的⼦元素(项⽬)就是跟着主轴来排列的
flex布局详细讲解1. row：默认值(x轴)
2. row-reverse ：x轴元素从右到左排列(与row相反)
3. column：从上到下
4. column-reverse：从下到上(与column相反)
**flex-direction 调整⼦元素的排列⽅向(默认⽔平⽅向row)column(垂直)**
```php
.main{
width:400px;
height:300px;
border:1px solid red;
margin: 0 auto;
display: flex;
flex-direction:column;//
}
```
**justify-conten设置主轴上的⼦元素排列⽅式**
1. flex-start 默认值 从头部开始，如果主轴是x轴侧从做到右
2. flex-end 与flex-start相反
3. center 在主轴居中对齐(如果主轴是x轴侧⽔平居中)
4. space-around 平分剩余空间
5. space-between |左右的盒⼦贴近⽗盒⼦，中间的平均分布空⽩间距
**space-between左右的盒⼦贴近⽗盒⼦，中间的平均分布空⽩间距**
**space-around每个盒⼦平均分配⽗元素留下的左右间距**
**align-items：设置侧轴上的⼦元素排列⽅式(单⾏)***
1. stretch默认，使⼦元素的⾼度拉伸填充⽗容器(在⼦元素不指定⾼度的情况) 1. flex-start顶部对齐
1. flex-end底部对齐
1. center垂直居中
**flex-warp控制是否换⾏**
1. nowwap不换⾏(压缩形式显⽰)
1. wrap⾃动换⾏
1. wrap-reverse⾃动换⾏(以相反的顺序)
**align-content设置侧轴上的⼦元素排列⽅式(多⾏)**
前提：必须设置⽗元素display:flex flex-direction:row
1. stretch使⼦元素的⾼度拉伸填充⽗容器(在⼦元素不指定⾼度的情况)
1. center垂直居中
1. flex-start顶部对齐
1. flex-end底部对齐
1. space-between左右的盒⼦贴近⽗盒⼦，中间的平均分布空⽩间距
1. space-around每个盒⼦平均分配⽗元素留下的左右间距
**center**
**space-around**
**flex-flow**
该属性是flex-direction和flex-wrap属性的复合属性
```
/*主轴⽅向x，超过换⾏*/
flex-flow:row wrap
```
#### ⼦元素属性
* order：设置元素排列顺序，值越⼩排在最前，默认0
* flex-grow num：定义⼦元素的放⼤⽐例；如果⽗元素还有剩余空间，可指定相应⼦元素占满⽗元素空间* flex-shrink：定义⼦元素的缩⼩⽐例; 如果⽗元素空间不够，可指定相应⼦元素缩⼩相应⽐例。默认⾃动* flex flex-grow和flex-shrink的复合属性，简单理解为占多少份
* anign-self：设置单个⼦元素的对齐⽅式
| 值|描述 |
|--|--|
| center | 垂直居中 |
|flex-start|顶部对齐|
|flex-end|底部对齐
> 注意： Internet Explorer 和 Safari 浏览器不⽀持 align-self 属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。