flex布局的常用属性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      width: 800px;
      height: 800px;
      background-color: skyblue;
    }

    .item {
      width: 200px;
      height: 200px;
      margin: 10px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
  </div>

</body>

</html>

2.flex-direction设置主轴的方向

1.主轴与侧轴

1.默认主轴方向就是x轴方向，水平向右
2.默认侧轴方向就是y轴方向，水平向下

2.属性值

flex-direction属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

1.row

 flex-direction: row;

2.row-reverse

 flex-direction: row-reverse;

3.column

 flex-direction: column;

4.column-reverse

 flex-direction:column-reverse;

3.justify-content设置主轴的子元素排列方式

默认情况下，项目都排在一条线（又称“轴线上）。flex-wrap属性定义，flex布局中默认是不换行的。

属性值：

1.flex-start

 justify-content: flex-start;

2.flex-end

 justify-content: flex-end;

3.center

 justify-content: center;

4.space-around

 justify-content: space-around;

5.space-between

 justify-content: space-between;

6.space-evenly

 justify-content: space-evenly;

4.align-items设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单排的时候使用

1.flex-start

 align-items: flex-start;

2.flex-end

 align-items:flex-end;

3.center

 align-items: center;

4.stretch

 align-items: stretch;

5.flex-wrap设置子元素是否换行

默认情况下，项目都排在一条线（又称“轴线上）。flex-wrap属性定义，flex布局中默认是不换行的。

1.nowrap

flex-wrap: nowrap;

2.wrap

flex-wrap: wrap;

6.align-contnet设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的

1.flex-star

2.flex-end

3.center

4.space-around

5.space-between

6.stretch

7.space-evenly

7.align-content 和 alignitems区别

        1.align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
        2.align-content适应于换行（多行）的情况下（单行情况无效），可以设置上对齐、下对齐、居中、拉伸、以及平均分配剩余空间等属性值。
        3.总结就是单行找align-items多行找align-content

8.flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合属性

以上属性都是给容器设置的