今天主要學(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屬性的簡(jiǎn)寫形式： flex-flow: || ;

? ? ? ? ? ?justify-content屬性（對(duì)齊方式）：flex-start（默認(rèn) 左對(duì)齊）/flex-end（右對(duì)齊）/center（居中）/

space-between（兩端對(duì)齊）/space-around（每個(gè)項(xiàng)目?jī)蓚?cè)間隔相等）；

? ? ? ? ? ?align-items（定義y軸對(duì)齊）：flex-start（天花板對(duì)齊）/flex-end（地板對(duì)齊）/center（中線對(duì)齊）/

baseline（第一行文字基線對(duì)齊）/stretch（默認(rèn) 高度占滿整個(gè)容器）；

? ? ? ? ? ?align-content（多行項(xiàng)目對(duì)齊）：flex-start（靠上排列）/flex-end（靠下排列）/center（中心開始排列）/

space-between（上下兩端對(duì)齊）/space-around（每行間隔兩側(cè)相等）/stretch（默認(rèn) 高度填滿）；

4.項(xiàng)目屬性及使用：

? ? ? ? ? ?order(項(xiàng)目排列數(shù)值從小到大)：number /flex-grow（放大比例）：num /flex-shrink（縮小比例）：num /

flex-basis：|number;(設(shè)置主軸長(zhǎng)度) / flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto /?

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch，eg：align-self: auto | flex-start | flex-end | center | baseline | stretch;

今天還模仿了百度的界面，只是模仿了界面就覺得人家很厲害，激勵(lì)了我學(xué)習(xí)的想法。