CSS Flexbox（灵活盒子）

• 

  CSS Flexbox布局模块

  在Flexbox布局模块之前，有四种布局模式：

  • 块（block），用于网页中的部分
  • 内联（inline），用于文本
  • 表（table），用于二维表数据
  • 定位（position），用于元素的显式位置

  Flexbox布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。
• 

  浏览器支持

  属性	Internet Explorer	Chrome	FireFox	Safari	Opera
  属性格式
  flexbox	11.0	29.0	22.0	10.0	48.0

• 

  Flexbox元素

  要开始使用Flexbox模型，您需要先定义一个Flex容器。

  1

  2

  3

  上面的元素表示一个包含三个flex项目的flex容器(蓝色区域)。

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

  尝试一下
• 

  父元素（容器）

  通过将display属性设置为flex，Flex容器变得灵活：

  .flex-container {
     display: flex;
   }
  

  Flex容器属性有：

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

  flex-direction属性

  flex-direction属性定义容器要在哪个方向上堆叠弹性项目。

  1

  2

  3

  上面的元素表示一个包含三个flex项目的flex容器(蓝色区域)。 column值堆叠（但从顶部到底部）：

  .flex-container {
     display: flex;
     flex-direction: column;
   }
  

  尝试一下

  column-reverse值堆叠（但从底部到顶部）：

  .flex-container {
     display: flex;
     flex-direction: column-reverse;
   }
  

  尝试一下

  row值水平堆放（左到右）：

  .flex-container {
     display: flex;
     flex-direction: row;
   }
  

  尝试一下

  row-reverse值水平堆放（但从右到左）：

  .flex-container {
     display: flex;
     flex-direction: row-reverse;
   }
  

  尝试一下
• 

  flex-wrap属性

  flex-wrap属性指定flex项是否应该换行。下面的示例有12个fiex项目，以更好地展示flex-wrap属性。

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  上面的元素表示一个包含三个flex项目的flex容器(蓝色区域)。 如果有必要使用wrap值：

  .flex-container {
     display: flex;
     flex-wrap: wrap;
   }
  

  尝试一下

  nowrap值指定Flex项目将不会换行（这是默认值）：

  .flex-container {
     display: flex;
     flex-wrap: nowrap;
   }
  

  尝试一下

  wrap-reverse值将flex项目倒置：

  .flex-container {
     display: flex;
     flex-wrap: wrap-reverse;
   }
  

  尝试一下
• 

  flex-flow属性

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

  .flex-container {
     display: flex;
     flex-flow: row wrap;
   }
  

  尝试一下
• 

  justify-content属性

  justify-content属性用于对齐flex项：

  1

  2

  3

  center值中心对齐：

  .flex-container {
     display: flex;
     justify-content: center;
   }
  

  尝试一下

  flex-start值从开始对齐：

  .flex-container {
     display: flex;
     justify-content: flex-start;
   }
  

  尝试一下

  flex-end值在末端对齐：

  .flex-container {
     display: flex;
     justify-content: flex-end;
   }
  

  尝试一下

  space-around值对齐：

  .flex-container {
     display: flex;
     justify-content: space-around;
   }
  

  尝试一下

  space-between值对齐：

  .flex-container {
     display: flex;
     justify-content: space-between;
   }
  

  尝试一下
• 

  align-items属性

  align-items属性用于垂直对齐Flex项。

  .flex-container {
     display: flex;
     height: 200px;
     align-items: center;
   }
  

  尝试一下

  align-items: flex-start值从顶部对齐：

  .flex-container {
     display: flex;
     height: 200px;
     align-items: flex-start;
   }
  

  尝试一下

  align-items: flex-end;值在尾部对齐：

  .flex-container {
     display: flex;
     height: 200px;
     align-items: flex-end;
   }
  

  尝试一下

  align-items: stretch;值对齐：

  .flex-container {
     display: flex;
     height: 200px;
     align-items: stretch;
   }
  

  尝试一下

  align-items: baseline;值对齐： 注意：该示例使用不同的font-size来演示项目是否通过文本基线对齐：

  .flex-container {
     display: flex;
     height: 200px;
     align-items: baseline;
   }
  

  尝试一下
• 

  align-content属性

  align-content属性用于对齐柔性线。 align-content: space-between;值：

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

  尝试一下

  align-content: space-around;值：

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

  尝试一下

  align-content: stretch;值：

  .flex-container {
     display: flex;
     height: 600px;
     flex-wrap: wrap;
     align-content: stretch;
   }
  

  尝试一下

  align-content: center;值对齐：

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

  尝试一下

  align-content: flex-start;值对齐：

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

  尝试一下

  align-content: flex-end;值对齐：

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

  尝试一下
• 

  完美居中

  在下面的例子中，我们将解决一个非常常见的样式问题：完美居中。 解决方案：将justify-content和align-items属性设置为居中，flex项目将完美居中：

  .flex-container {
     display: flex;
     height: 300px;
     justify-content: center;
     align-items: center;
   }
  

  尝试一下
• 

  子元素（item）

  Flex容器的直接子元素自动变为（flex）项。

  <div class="flex-container">
     <div>1</div>
     <div>2</div>
     <div>3</div> 
     <div>4</div>
   </div>
  

  尝试一下

  flex项属性有：

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

  order属性

  order属性指定flex item的顺序。 代码中的第一个flex项不必显示为布局中的第一个项。order值必须是数字，默认值为0。

  <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属性指定弹性项目相对于其他弹性项目的增长量。 该值必须是数字，默认值为0。

  <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项目收缩的程度。

  <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属性指定弹性项的初始长度。

  <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属性的速记属性。

  <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属性设置的默认对齐方式。

  <div class="flex-container">
     <div>1</div>
     <div>2</div>
     <div style="align-self: center">3</div>
     <div>4</div>
   </div>
  

  尝试一下

  <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>
  

  尝试一下
• 

  flex应用场景

  使用Flex Box制作响应式网站和图库非常方便
• 

  CSS Flexbox属性

  下表列出了flexbox使用的CSS属性：

  属性	描述
  display	指定用于HTML元素的框的类型
  flex-direction	指定flex容器中可伸缩项目的方向
  justify-content	当项目不使用主轴上的所有可用空间时，水平对齐flex项目
  align-items	当项目不使用横轴上的所有可用空间时，垂直对齐flex项目
  flex-wrap	指定是否应该包装flex项(如果在一行上没有足够的空间容纳它们)
  align-content	修改flex-wrap属性的行为。它类似于对齐项，但是它不是对齐flex项，而是对齐flex行
  flex-flow	flex-direction和flex-wrap的简写属性
  order	指定一个flex项相对于同一容器内其他flex项的顺序
  align-self	用于flex项目。覆盖容器的align-items属性
  flex	flex-growth、flex-shrink和flex-base属性的简写属性