一. display

这个属性把一个元素定义成为 flex container。可以设置为 flex 或 inline-flex。设置为flex容器就是块级容器，设置为 inline-flex 就是行内元素。

这个容器就会成为他的直接子元素的 flex container.

这样的容器就成了弹性容器.

.container {
    display: flex; /* or inline-flex */
}

二. flex-direction

这个属性定义主轴，定义了 flex items 在弹性容器中布局的方向。

主轴要么水平方向，要么垂直方向。

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

• row : 主轴水平，方向从左向右。（默认值）
• row-reverse：主轴水平，方向从右向左
• column : 主轴垂直，方向从上向下
• column-reverse：主轴垂直，方向从下向上

三. flex-wrap

默认情况下，所有的flex items 都会试图在一行。通过修改这个属性的值，可以让 flex items按照要求多行排列。

其实这个属性就是定义 flex items 在侧轴方向的排序方式。

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap：所有的 flex items 在一行。(默认值)
• wrap ：允许 flex items 自动换行在多行，方向是从上向下。
• wrap-reverse : 允许 flex items 自动换行在多行，方向是从下向上。

html:

<div class='container'>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

css:

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 700px;
  height: 500px;
  background-color: gray;
  flex-direction: row;
  flex-wrap: nowrap;
}
p{
  width : 200px;
  height : 200px;
  background-color : pink;
}
p:nth-child(2n){
  background-color: cornflowerblue;
}

效果1：

效果2：

效果3：

效果4：

效果5：

效果6：

四. flex-flow

flex-flow是flex-direction 和 flex-wrap两个属性的合并简写方式。一次性的定义了主轴和侧轴，他的默认值是：row nowrap

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

五. justify-content

​该属性定义了主轴方向flex items的对齐方式。也能把多余的自由空间，分配给flex-items。

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start：flex-items从主轴起点开始排列。

  

• flex-end：flex-items从主轴终点开始排列。

  

• center：flex-items在主轴方向居中排列。

  

• space-between：把 free space 平局分布在 flex-items之间。第一个 item紧挨着主轴起点，最后一个item紧挨着主轴终点。

  

• space-around：把 free space平均分布在每个item的周围。所以中间空白会比边上的空白大一倍。

  

六. align-items

​ 该属性定义了flex-items在侧轴上的对齐方式。可以看成是justify-content在侧轴上的版本。

如果是单行flex-items的情况使用比较好

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start：从侧轴起点开始排列

• flex-end：从侧轴的终点开始排列

• center：沿着侧轴方向居中

• baseline：沿着内容的基线对齐

• stretch：在侧轴方向拉伸flex-items。(默认值)。但是他的优先级比设定了具体的heigth和max-height低，但是比auto高。

七. align-content

该属性定义了当有多行flex items时，free-space如何分布，类似于主轴的justify-content

单行无效

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start：从侧轴起点开始排列

• flex-end：从侧轴的终点开始排列

• center：沿着侧轴方向居中

• stretch：在侧轴方向拉伸flex-items。(默认值)。但是他的优先级比设定了具体的heigth和max-height低，但是比auto高。

• space-between：把 free space 平局分布在 flex-items之间。第一个 item紧挨着侧轴起点，最后一个item紧挨着侧轴终点。

• space-around：把 free space平均分布在每个item的周围。所以中间空白会比边上的空白大一倍。