教程（来自CSS Tricks):

先了解：
容器：container ; items:项目

语法

写法：如何让一个元素变成flex容器：

.container{
   display: flex;
}

flex container有哪些属性、以下都是样式

改变流动方向：flex-direction

改变折行：flex-wrap

主轴对其方式：justify-content

以上代码效果如下：

次轴对齐:align-items

align-items: stretch; 即使内容高度不一样，也让item的高度一样见图：

多行内容:align-content

flex item有哪些属性，以下都是样式

order:控制顺序

order: 默认是0
按照order从小到大的顺序排
负数、0、正数

flex-grow:控制如何变胖

flex-shrink:控制如何变瘦

一般写lex-shrink：0防止变瘦，默认是1

align-self 定制 align-items

align-self特例独行：

重点（总结）

记住这些代码：

display: flex 让一个元素变成flex容器
flex-direction: row/column 控制流动方向：左到右，上到下
flex-wrap: wrap 改变折行
justify-content: center/space-between 主轴（横轴）对齐方式:居中/分开
align-items: center 次轴（纵轴）居中

做个Flex布局

效果如下： js.jirengu.com/suroqemaya/…
GitHub : jiangwenxu.github.io/Flex.css/Fl…

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Flex布局</title>
</head>

<body>
  <header class="header">
    <div class="logo">
      <img src="https://xiedaimala.com/packs/_/assets/images/logos/red-logo-3f8db9041e6c15d4ae7ed7e4087c4b98.png" alt="">
    </div>
    <ul>
      <li>首页</li>
      <li>课程</li>
      <li>优惠</li>
      <li>关于</li>
    </ul>
  </header>
  <div class="content">
    <aside>一行有六个字</aside>
    <main>主要内容</main>
    <div class="ad">广告</div>
  </div>

  <div class="imagelist ">
    <div class="x">

      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
    </div>

  </div>
</body>

</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
ol {
  list-style: none
}
img {
  max-width: 100%;
}
header {
  display: flex;
  justify-content: space-between;           **把logo和ul分开**
  align-items: center;                      **让logo和ul纵轴居中**
  background: grey;
}
.logo {
  display: flex;
  align-items: center;
}
.logo>img {
  height: 20px;
  vertical-align: top;                     **去除图片多余背景色**
}
ul {
  display: flex;
}
ul>li {
  padding: 4px;
}
.content {
  display: flex;
  width: 700px;
  margin-left: auto;                    **块级元素居中**
  margin-right: auto;
}
.content>aside {
  border: 1px solid red;
  width: 200px;
}
.content>main {
  border: 1px solid red;
  flex-grow: 1;                        **剩余空间给main，尽量让其变胖**
  height: 400px;
}
.content>.ad {
  border: 1px solid red;
  width: 100px;
}
.imagelist {
  outline: 1px solid blue;
  width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.imagelist>.x {
  display: flex;
  margin-top: 10px;
  flex-wrap: wrap;                               **让平均布局变行**
  margin-right: -12px;       **负margin用来减掉最后一个平均布局的12px**
}                            **不然移动不上去**
.image {
  border: 1px solid green;
  width: 166px;
  height: 166px;
  margin-right: 12px;
  margin-bottom: 10px;                     **底部间隔10px**
}

注意：

想让导航栏去到右边有两种写法：

在父元素上设置justify-content:space-between;
或者在导航栏上写margin-left: auto 在写平均布局时，即使用Justify-content：space-between也无法满足要求：

第一行是对的，但是第二行就错了，所以我们还是需要用到负margin 首先在Image上加上一个x div

<div class="imagelist ">
    <div class="x">

      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
      <div class="image">平均布局</div>
    </div>

  </div>

然后再加上负Margin，负Margin的值就是每个Image的Margin-right的值

.imagelist>.x {
  display: flex;
  margin-top: 10px;
  flex-wrap: wrap;
  margin-right: -12px;
}

【CSS全解】CSS布局 - Flex布局