今天主要學習了flex布局，學習筆記如下：
1.指定flex布局：
? ? ? ? ? display：flex(任意容器) / inline-flex(行內元素)；
? ? ? ? ? 設為flex布局后子元素的float，clear和vertical-align屬性會失效；
2.基本概念：
? ? ? ? ? ?flex容器有兩根軸，水平叫主軸，垂直叫交叉軸；
? ? ? ? ? ?項目默認沿軸排列，在平面上沿xy軸構出項目；
3.容器屬性及使用方法：
? ? ? ? ? ?flex-direction（項目排列方向）：row（默認 從左到右）/row-reverse(從右到左) / column（從上到下）/column-reverse(從下到上)；
? ? ? ? ? ?flex-wrap（定義換行）：nowrap（默認 不換行）/wrap（從上到下換行）/wrap-reverse（從下到上換行）；
? ? ? ? ? ?flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡寫形式： flex-flow: || ;
? ? ? ? ? ?justify-content屬性（對齊方式）：flex-start（默認 左對齊）/flex-end（右對齊）/center（居中）/
space-between（兩端對齊）/space-around（每個項目兩側間隔相等）；
? ? ? ? ? ?align-items（定義y軸對齊）：flex-start（天花板對齊）/flex-end（地板對齊）/center（中線對齊）/
baseline（第一行文字基線對齊）/stretch（默認 高度占滿整個容器）；
? ? ? ? ? ?align-content（多行項目對齊）：flex-start（靠上排列）/flex-end（靠下排列）/center（中心開始排列）/
space-between（上下兩端對齊）/space-around（每行間隔兩側相等）/stretch（默認 高度填滿）；
4.項目屬性及使用：
? ? ? ? ? ?order(項目排列數值從小到大)：number /flex-grow（放大比例）：num /flex-shrink（縮小比例）：num /
flex-basis：|number;(設置主軸長度) / flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto /?
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch，eg：align-self: auto | flex-start | flex-end | center | baseline | stretch;
今天還模仿了百度的界面，只是模仿了界面就覺得人家很厲害，激勵了我學習的想法。
