#### 1.什么是flex布局 工作中比較常用，display屬性的一種，添加了這個屬性，可以比較容易的實現垂直水平居中等一些樣式 #### 2.添加了display:flex，父元素有哪些屬性 ~~~ flex-direction flex-wrap justify-content align-items flex-flow ~~~ * flex-direction: 決定主軸的方向，默認是橫向, row-reverse是反方向排序 ~~~ flex-direction: row | column | row-reverse | column-reverse ~~~ * flex-wrap: 超出時換行，默認不換行，會導致擠壓 ~~~ flex-wrap: wrap | no-wrap ~~~ * flex-flow: flex-direction flex-wrap 的簡寫 * justify-content：主軸的排列方式 ~~~ justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly; space-between: 兩端對齊，子元素之間間隔相對(0 1 1 1 0) space-around: 子元素之間間隔相等，比子元素到父元素的間隔大一倍(0.5 1 1 1 0.5) space-evenly: 父元素與子元素之間和子元素之間間隔相等 (1 1 1 1 1) ~~~ * align-items: 相對主軸的排列方式，默認是縱向，當主軸在縱向時，則變為橫向 ~~~ align-items: flex-start | flex-end | center | stretch | baseline stretch--高度拉伸為100% baseline--沿基線對齊（子元素第一行文字底部對齊） ~~~ #### 3.子元素的屬性 ~~~ order flex-grow flex-shrink flex-basis flex align-self ~~~ * order: 定義子元素的排列順序，數值越小排列越靠前，默認為0 ~~~ .child1 { ? ?order: 1; } ~~~ * flex-grow: * 定義子元素的放大比例，默認為0不放大，放大的方向根據主軸的方向來定， * 如果所有項目數值都為1，就是所有項目等分剩余空間，如果有一個項目為2，其余為1時，前者占據的是后者的兩倍 * 如果只有一個為1，就是該元素占據剩余所有的空間 ~~~ .child1 { ? ?flex-grow: 1; } ~~~ * flex-shrink: * 相對于flex-grow，當父元素空間不足時，定義子元素之前的相對縮小比例 * flex-shrink需要每個元素都定義 * flex: flex-flow flex-shrink flex-basis 的縮寫 ~~~ .child { flex: 1; // 當flex為1的時候，默認占據剩余空間, 有可能是放大，也有可能是縮小 } ~~~ * flex-basis: 用于設置子元素伸縮的基準值，或者比例 ~~~ flex-basis: 80% ~~~ * align-self: 允許單個項目與其他的項目不一樣的對齊方式