设置侧轴上子元素排列方式_初识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设置谁为主轴，剩下的就是侧轴，而我们的子元素(项目)就是跟着主轴来排列的

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 属性。