Flexbox

1. 父元素（flex container）中添加 display: flex; 使得子元素（flex items）以同样宽高的 column 排列
2. flex-direction 可以指定排列的方向，有 row 和 column 可选
3. 如果 row 排列撑不下可以叫 flex-wrap: wrap ，shorthand为 flex-flow: row wrap；
4. 还可以指定各个栏的宽度，在子元素中加 flex：1 200px; 第一个数字要跟其他子元素对比才有意义，200px是设定了栏的最小尺寸

---

1. align-items 是定义 flex item 垂直排列的，有 flex-start，flex-end，center也可以对子元素单独定义，align-self：flex-end/flex-start/center
2. justify-content 是水平排列，有flex-start，flex-end，center，space-around，space-between

---

1. 也可以在子元素中指定顺序，order：1；这里的1并不一定代表第一为，所有的子元素默认为0，1就要排到0后面，－1就排到0前面

---

flex是可以嵌套的

section - article
          article
          article - div - button   
                    div   button
                    div   button
                          button
                          button

section {
  dispaly: flex;
}

三个article以flex的形式横向排列

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}

第三个 article 中的 三个 div 以 flex 的形式纵向排列

article:nth-of-type(3) div:first-child {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

第三个 article 中的第一个 div 中的元素以横向可折叠且space-around，纵向居中的方式进行排列
！first-child 指的是父元素的第一个子元素，这里指的是 article 的第一个 div
与之对比的是 first-of-type 父元素第一个次类型的子元素