今天主要學(xué)習(xí)了flex布局俊鱼，學(xué)習(xí)筆記如下：
1.指定flex布局：
? ? ? ? ? display：flex(任意容器) / inline-flex(行內(nèi)元素)家破；
? ? ? ? ? 設(shè)為flex布局后子元素的float盖溺，clear和vertical-align屬性會(huì)失效遇革；
2.基本概念：
? ? ? ? ? ?flex容器有兩根軸沉噩，水平叫主軸吏祸，垂直叫交叉軸对蒲；
? ? ? ? ? ?項(xiàng)目默認(rèn)沿軸排列，在平面上沿xy軸構(gòu)出項(xiàng)目贡翘；
3.容器屬性及使用方法：
? ? ? ? ? ?flex-direction（項(xiàng)目排列方向）：row（默認(rèn) 從左到右）/row-reverse(從右到左) / column（從上到下）/column-reverse(從下到上)蹈矮；
? ? ? ? ? ?flex-wrap（定義換行）：nowrap（默認(rèn) 不換行）/wrap（從上到下?lián)Q行）/wrap-reverse（從下到上換行）；
? ? ? ? ? ?flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡寫形式： flex-flow: || ;
? ? ? ? ? ?justify-content屬性（對齊方式）：flex-start（默認(rèn) 左對齊）/flex-end（右對齊）/center（居中）/
space-between（兩端對齊）/space-around（每個(gè)項(xiàng)目兩側(cè)間隔相等）鸣驱；
? ? ? ? ? ?align-items（定義y軸對齊）：flex-start（天花板對齊）/flex-end（地板對齊）/center（中線對齊）/
baseline（第一行文字基線對齊）/stretch（默認(rèn) 高度占滿整個(gè)容器）泛鸟；
? ? ? ? ? ?align-content（多行項(xiàng)目對齊）：flex-start（靠上排列）/flex-end（靠下排列）/center（中心開始排列）/
space-between（上下兩端對齊）/space-around（每行間隔兩側(cè)相等）/stretch（默認(rèn) 高度填滿）；
4.項(xiàng)目屬性及使用：
? ? ? ? ? ?order(項(xiàng)目排列數(shù)值從小到大)：number /flex-grow（放大比例）：num /flex-shrink（縮小比例）：num /
flex-basis：|number;(設(shè)置主軸長度) / flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫踊东，默認(rèn)值為0 1 auto /?
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式北滥，可覆蓋align-items屬性。默認(rèn)值為auto闸翅，表示繼承父元素的align-items屬性再芋，如果沒有父元素，則等同于stretch坚冀，eg：align-self: auto | flex-start | flex-end | center | baseline | stretch;
今天還模仿了百度的界面济赎，只是模仿了界面就覺得人家很厲害，激勵(lì)了我學(xué)習(xí)的想法记某。
