1. flexbox-CSS3彈性盒模型flexbox布局通俗講解术吝。
為何叫彈性盒子学歧，可以有效的分配一個容器的空間 罩引，即使我們的容器元素尺寸改變 它內部的元素也可以調整它的尺寸來適應空間 。
彈性盒（Flebox）模型旨在提供一種更有效的方式枝笨，為文檔中的元素之間進行布局蜒程、對齊和分配空間 - 即便視口和元素的大小是動態(tài)變化的或者未知的，也能很好適應伺帘。
1）彈性容器昭躺，首先父元素如何設置？
- 首先開始使用彈性盒模型伪嫁，只需先定義一個彈性容器（Flex Container）领炫。即父元素設置display：flex或者display:inline-flex。
補充下display：flex和display:inline-flex的區(qū)別：如果父元素沒有設置width张咳，display：flex情況下父元素寬度會定為父元素的父元素寬度帝洪。display:inline-flex情況下父元素會自適應子元素寬度。
- 好了脚猾，將父元素設置成彈性容器后葱峡，我們就可以在彈性容器上用幾個對齊屬性了。(彈性項目flex-items,即彈性容器里的子元素）
- flex-direction:row（默認） || column || row-reverse || column-reverse;（row是英文“行”龙助，column是英文“列”意思砰奕，reverse是“反轉，顛倒”的意思）控制彈性項目沿著主軸排列的方向提鸟。（direction是方向的意思）
這個屬性決定你的子元素在彈性容器里是水平排放還是垂直排放（左到右军援，上到下），或者這兩個方向顛倒称勋！補充：從技術上講胸哥，水平和垂直都不是彈性盒的世界中方向的叫法。它們被描述為主軸（main axis）和側軸（cross axis）赡鲜。
image.png
- flex-wrap:wrap（默認值空厌，表示一行flex-items數量再多庐船，都不換行，只會縮小自己的寬度來適應３案） || no-wrap || wrap-reverse;（可以這樣理解醉鳖，wrap為“包裹的”意思，即wrap包裹了為不換行哮内；no-wrap不包裹了盗棵，裝不下了就換行了； wrap-reverse是多出的行往上面排列北发，no-wrap是多出行往下繼續(xù)排列纹因。）
- flex-flow:是 flex-direction 和 Flex-wrap的簡寫屬性，同時帶有這兩個屬性的值琳拨，類似于border瞭恰。（flow英語“流動”的意思，這樣理解狱庇，物體的 “流動 ”是有方向(direction)和是否溢出惊畏，即flow=direction+wrap.）
- align-items:flex-start || flex-end || center || stretch || baseline 定義彈性項目如何在側軸方向對齊,和 flex-direction的區(qū)別之處。
- justify-content:flex-start (默認值)|| flex-end || center || space-between || space-around密任；定義彈性項目如何在主軸上對齊
我自己的通俗理解：
- justify:英語意思“使齊行颜启；使每行排齊”，然后加上“content”內容浪讳，即是內容如何在行上（主軸）排列的缰盏。
flex-start:"開始的"意思，flex-start,即可以猜到是從行的起始處開始排列淹遵，即主軸的起點排列口猜，接下來，行都換成主軸來說透揣。如圖：
image.pngflex-end：不加贅述济炎，和flex-start 相反，在主軸的終點開始排列辐真。如圖：
image.pngcenter:英語意思“中間”须尚，就可以理解為主軸的中間處開始排列,如圖：
image.pngspace-between:讓每個彈性項目之間保持相同的間距。如圖：
image.pngspace-around:讓彈性項目兩側的間距保持相同拆祈。如圖：
image.png
好了恨闪，這是父元素要設置的屬性倘感，看似有點難記住放坏。直接看圖：
image.png
