13、 flex布局

• 给父容器display:flex, 子元素就会并排显示

  13-1 容器属性

  justify-content属性定义了元素x方向的对齐。

  justify-content: space-around;/*每个项目两侧的间 隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
  justify-content: space-between; /* 两端对齐,项目之间的间隔都相等 */
  justify-content: space-evenly;  /* 每个项目之间的间隔都相等 */

  13-1-1 justify-content属性定义了元素x方向的对齐。

• 实例 ```css

.parent{ width: 1000px; height: 300px; background: red; display: flex; / justify-content 设置元素x方向的对齐 / justify-content: space-evenly; / align-items 设置元素y方向的对齐/ align-items: center; } .parent div{ width: 100px; height: 100px; border: 1px solid #333; }

<a name="f1qO6"></a>
### 13-1-2 `flex-direction `属性决定主轴的方向（即项目的排列方向）
```css
flex-direction:row | column | row-reverse | column-reverse

row(默认值):   主轴为水平方向,起点在左端
row-reverse： 主轴为水平方向，起点在右端
column:       主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿

• 实例

  .parent{
  width: 1000px;
  height: 500px;
  background: red;
  display: flex;
  /* flex-direction: row/column */
  flex-direction: column;
  /* 
  flex-direction:column 为例
  justify-content 设置垂直方向
  align-items 设置水平方向
  */
  justify-content:center;
  align-items: center;
  }
  .parent div{
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  }
  

  13-1-3 align-items属性定义元素y方向的对齐。

  ```css align-items: flex-start | flex-end | center | baseline | stretch;

flex-start：起点对齐。 flex-end：终点对齐。 center：中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

<a name="vZl4U"></a>
### 13-1-4 ` flex-wrap `属性设置flex布局子元素的换行。
```css
flex-wrap: nowrap | wrap;

nowrap（默认）：不换行。
wrap：换行。

• 实例

  <div class="parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  </div>
  

  /* flex-wrap:nowrap | wrap  设置flex布局子元素的换行*/
  .parent{
    width: 500px;
    height: 300px;
    background: red;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .parent div{
    width: 100px;
    height: 100px;
    border: 1px solid #333;
  }
  

  13-2 flex 给子元素设置，设置在父元素中的权重

  <div class="parent">
  <div class="one"></div>
  <div class="two"></div>
  </div>
  

  .parent{
  width: 400px;
  height: 200px;
  background-color: red;
  display: flex;
  }
  .one{
  height: 100px;
  background-color: royalblue;
  flex:1;
  }
  .two{
  height: 100px;
  background-color: springgreen;
  flex:1;
  }