学习内容来源：CSS Flexbox

父元素（flex 容器）

flex 布局中必须有一个 display 属性设置为 flex 的父元素。即上图中蓝色区域为父元素，也称作 flex 容器，数字1、2、3所在的 div 被称作 flex 项目。

// html代码
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

// css代码
<style>
  .flex-container {
    display: flex;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    margin: 10px;
    padding: 20px;
    font-size: 30px;
  }
</style>

flex 容器属性如下：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction 属性

定义容器要在哪个方向上堆叠 flex 项目（默认设置为 row）

1、column 值设置垂直堆叠 flex 项目（从上到下）：

// css代码
.flex-container {
  display: flex;
  flex-direction: column;
}

2、column-reverse 值垂直堆叠 flex 项目（但从下到上）：

// css代码
.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

3、row 值水平堆叠 flex 项目（从左到右）：

// css代码
.flex-container {
  display: flex;
  flex-direction: row;
}

4、row-reverse 值水平堆叠 flex 项目（但从右到左）：

// css代码
.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

flex-wrap 属性

flex-wrap 属性规定是否应该对 flex 项目换行（默认设置为 nowrap）

1、wrap 值规定 flex 项目将在必要时进行换行：

// css代码
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

2、nowrap 值规定将不对 flex 项目换行：

// css代码
.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

3、wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行：

// css代码
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

flex-flow 属性

flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性

例子：

// css代码
.flex-container {
  display: flex;
  flex-flow: row wrap;
}

justify-content 属性

justify-content 属性用于对齐 flex 项目（默认设置为 flex-start）

1、center 值将 flex 项目在容器的中心对齐：

// css代码
.flex-container {
  display: flex;
  justify-content: center;
}

2、flex-start 值将 flex 项目在容器的开头对齐：

// css代码
.flex-container {
  display: flex;
  justify-content: flex-start;
}

3、flex-end 值将 flex 项目在容器的末端对齐：

// css代码
.flex-container {
  display: flex;
  justify-content: flex-end;
}

4、space-around 值显示 flex 项目两侧的留白间距相等：

// css代码
.flex-container {
  display: flex;
  justify-content: space-around;
}

5、space-between 值显示两端对齐， flex 项目之间间隔相等：

// css代码
.flex-container {
  display: flex;
  justify-content: space-between;
}

6、space-evenly 值显示 flex 项目两侧的留白间距与两端的留白间距相等：

// css代码
.flex-container {
  display: flex;
  justify-content: space-evenly;
}

align-items 属性

align-items 属性用于垂直对齐 flex 项目（默认设置为 stretch）

1、center 值将 flex 项目在容器中间对齐：

// css代码
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>

2、flex-start 值将 flex 项目在容器顶部对齐：

// css代码
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

3、flex-end 值将弹性项目在容器底部对齐：

// css代码
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

4、stretch 值拉伸 flex 项目以填充容器：

// css代码
.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

5、baseline 值使 flex 项目基线对齐：

// css代码
.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
  background-color: DodgerBlue;
}
.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

// html代码
<div class="flex-container">
  <div><h1>1</h1></div>
  <div><h6>2</h6></div>
  <div><h3>3</h3></div>  
  <div><small>4</small></div>  
</div>

align-content 属性

align-content 属性用于对齐弹性线（默认设置为 stretch）

1、space-between 值显示的弹性线之间有相等的间距：

// css代码
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

2、space-around 值显示弹性线在其之前、之间和之后带有空格：

// css代码
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

3、stretch 值拉伸弹性线以占据剩余空间：

// css代码
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

4、center 值在容器中间显示弹性线：

// css代码
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

5、flex-start 值在容器开头显示弹性线：

// css代码
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

6、flex-end 值在容器的末尾显示弹性线：

// css代码
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

用 flex 实现居中

justify-content的 center 值将 flex 项目在容器的中心对齐，align-items的 center 值将 flex 项目在容器中间对齐，一个水平居中对齐，一个垂直居中对齐，然后 flex 项目就可以完美居中了

// css代码
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

子元素（flex 项目）

flex 容器的直接子元素会自动成为弹性（flex）项目

弹性项目属性如下：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

// 整体的css代码
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>

order 属性

order 属性可以改变 flex 项目的顺序（order 值必须是数字，默认值是 0）

// html代码
<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

flex-grow 属性

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少（该值必须是数字，默认值是 0）

// html代码
<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

flex-shrink 属性

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少（该值必须是数字，默认值是 0）

// html代码
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

flex-basis 属性

flex-basis 属性规定 flex 项目的初始长度（）

// html代码
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

flex 属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

// html代码
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

align-self 属性

align-self 属性规定弹性容器内所选项目的对齐方式。align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

// html代码
<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>