CSS Flex布局

flex布局只要掌握了容器和项目的属性，就能很轻松地完成页面的布局。

flex布局是新增加的一部分内容，介绍了flex布局的基本用法。这里强烈推荐一下阮一峰大大的flex布局教程，分为语法篇和实例篇，非常简明扼要。

flex布局只要掌握了容器和项目的属性，就能很轻松地完成页面的布局。容器属性包括

1. 项目以什么形式排列 flex-direction（纵向还是横向，从头到尾还是从尾到头）
2. 排列的项目是否换行 flex-wrap （换行且第一行在上方，换行且第一行在下方，不换行）
3. 一行/列项目在主轴上怎么排列 justify-content （开头/结尾对齐、中间对齐、两头对齐、两头留空对齐）
4. 一行/列项目在交叉轴上怎么排列 align-items （开头/结尾对齐、中间对齐、两头对齐、两头留空对齐）
5. 行与行/列与列项目之间怎么排列 align-content

项目属性包括

1. order：排列的顺序，值越低越靠前
2. flex-grow：项目放大的比例，初始默认为0
3. flex-shrink：项目缩小的比例，初始默认为1
4. flex-basis：项目在放大之前占据的空间
5. align-self：单个项目的对齐方法

以上属性都可参考如下思维导图：

以下是这部分习题的解答：

---

Introduction to the CSS Flexbox Challenges

• Use display: flex to Position Two Boxes

  <style>
    #box-container {
      height: 500px;
      display: flex;
    }
    ... ...
  </style>

• Add Flex Superpowers to the Tweet Embed

  <style>
    body {
      font-family: Arial, sans-serif;
    }
    header {
      display: flex;
    }
    header .profile-thumbnail {
      width: 50px;
      height: 50px;
      border-radius: 4px;
    }
    header .profile-name {
      display: flex;
      margin-left: 10px;
    }
    header .follow-btn {
      display: flex;
      margin: 0 0 0 auto;
    }
    header .follow-btn button {
      border: 0;
      border-radius: 3px;
      padding: 5px;
    }
    header h3, header h4 {
      display: flex;
      margin: 0;
    }
    #inner p {
      margin-bottom: 10px;
      font-size: 20px;
    }
    #inner hr {
      margin: 20px 0;
      border-style: solid;
      opacity: 0.1;
    }
    footer {
      display: flex;
    }
    footer .stats {
      display: flex;
      font-size: 15px;
    }
    footer .stats strong {
      font-size: 18px;
    }
    footer .stats .likes {
      margin-left: 10px;
    }
    footer .cta {
      margin-left: auto;
    }
    footer .cta button {
      border: 0;
      background: transparent;
    }
  </style>

• Use the flex-direction Property to Make a Row

  <style>
    #box-container {
      display: flex;
      height: 500px;
      flex-direction: row-reverse;
    }
    ... ...
  </style>

• Apply the flex-direction Property to Create Rows in the Tweet Embed

  <style> 
    header {
      display: flex;
      flex-direction: row;
    }
    ... ...
    footer {
      display: flex;
      flex-direction: row;
    }
  </style>

• Use the flex-direction Property to Make a Column

  <style>
    #box-container {
      display: flex;
      height: 500px;
      flex-direction: column;
    }
    ... ...
  </style>

• Apply the flex-direction Property to Create a Column in the Tweet Embed

  header .profile-name {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
  }

• Align Elements Using the justify-content Property

  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    justify-content:center;
  }

• Use the justify-content Property in the Tweet Embed

  header .profile-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
  }

• Align Elements Using the align-items Property

  <style>
    #box-container {
      background: gray;
      display: flex;
      height: 500px;
      align-items:center;
    }
    ... ...
  </style>

• Use the align-items Property in the Tweet Embed

  header .follow-btn {
    display: flex;
    align-items: center;
    margin: 0 0 0 auto;
  }
  ... ...
  header h3, header h4 {
    display: flex;
    align-items: center;
    margin: 0;
  }

• Use the flex-wrap Property to Wrap a Row or Column

  #box-container {
    background: gray;
    display: flex;
    height: 100%;
    flex-wrap: wrap;
  }

• Use the flex-shrink Property to Shrink Items

  #box-1 {
    background-color: dodgerblue;
    width: 100%;
    height: 200px;
    flex-shrink:1;
  }
    
  #box-2 {
    background-color: orangered;
    width: 100%;
    height: 200px;
    flex-shrink:2;
  }

• Use the flex-grow Property to Expand Items

  #box-1 {
    background-color: dodgerblue;
    height: 200px;
    flex-grow: 1;
  }
  
  #box-2 {
    background-color: orangered;
    height: 200px;
    flex-grow: 2;
  }

• Use the flex-basis Property to Set the Initial Size of an Item

  #box-1 {
    background-color: dodgerblue;
    height: 200px;
    flex-basis:10em;
  }
  
  #box-2 {
    background-color: orangered;
    height: 200px;
    flex-basis:20em;
  }

• Use the flex Shorthand Property

  #box-1 {
    background-color: dodgerblue;
    flex: 2 2 150px;
    height: 200px;
  }
    
  #box-2 {
    background-color: orangered;
    flex: 1 1 150px;
    height: 200px;
  }

• Use the order Property to Rearrange Items

  <style>
    #box-container {
      display: flex;
      height: 500px;
    }
    #box-1 {
      background-color: dodgerblue;
      order:2
      height: 200px;
      width: 200px;
    }
  
    #box-2 {
      background-color: orangered;
      order: 1;
      height: 200px;
      width: 200px;
    }
  </style>

• Use the align-self Property

  <style>
    #box-container {
      display: flex;
      height: 500px;
    }
    #box-1 {
      background-color: dodgerblue;
      align-self:center;
      height: 200px;
      width: 200px;
    }
  
    #box-2 {
      background-color: orangered;
      align-self: flex-end;
      height: 200px;
      width: 200px;
    }
  </style>