三、作用在子容器的樣式
flex特性
當多個div子元素寫在父容器，他們會併排在一行，父容器會自動調節子容器大小，使他們併排在一起，但不會容下無限個，會根據子容器中的內容決定，當內容多過父容器的大小時，其他的子容器會溢位在父容器外。
這時，可以通過flex-wrap對子容器進行換行。
當父容器display:flex時，子容器可以用margin居中，且子容器什麼寬高都可以很好的自適應居中。flex給父容器加就可以，子容器不用加
作用在父容器的樣式加給父容器，作用在子容器的專案加給子容器
flex: 彈性direction : 方向
reverse ：相反、顛倒
flex-direction新增給父容器，同時父容器有display:flex。根據取值控制子容器的排列方向。
#box
#box div
乙個父容器放置三個子容器
wrap : 纏繞、包圍
flow : 流
就是flex-direction和flex-wrap的復合寫法
用於排放子元素的位置。
justify-content:space-around當子容器過多時會擠在一起，這是flex特性，這是配合換行flex-wrap：wrap，多餘的子容器會折下去，還是會均勻分布。
每一行中子元素的排列位置。沒有給盒子設定寬高，預設拉伸高度，有對齊會根據內容顯示高度。設定高度會按照設定的高度顯示。
align-content 調節多行子元素的位置。
根據order的值，決定子元素盒子的位置。order越大越靠後。可以給單個盒子換位置。
grow：生長，擴充套件
作用是子元素 使用空白區域的權利，值越大，占用的空間越大。1代表全部占用，預設是0。
0.5代表佔一半。當多個盒子搶占時，可以設定1、2、3。按比例分配剩餘空白空間。
當有預設寬時，flex-grow不等於0，flex-grow優先順序高。flex-grow等於0，預設寬優先順序高。
shrink：使收縮，使縮小
flex-shrink預設值使1，值的範圍使0-1，也可以大於1。0是不收縮。可以對單個子元素進行設定。按比例進行本體收縮
basis：基礎、底部
在還有剩餘空間的時候，對子元素進行固定寬度，當width和flex-basis同時對子元素設定時，flex-basis優先順序高。
flex作用在子元素上，表示對flex-grow、flex-shrink、flex-basisi的複寫順序是從grow到basis，預設值是0，1，auto。flex優先順序高於預設寬。
當有預設寬時，加上flex:0，flex優先順序高。flex裡的grow，等不等於0，優先順序都高於預設寬。
對單個子元素進行位置排列，align-items 針對一行。
CSS Flex彈性盒模型
flex彈性盒模型 flex布局，可以簡便 完整 響應式地實現各種頁面布局。採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 子項 專案 flex item 劃分 作用在flex容器上 flex directi...
彈性盒模型布局（FLEX布局）
display flex 新增在伸縮容器 父元素的 flex direction 伸縮布局方向 row 左向右 row reverse 水平返向 column 上向下 column reverse flex wrap 換行 nowrap不換行 預設值 wrap 換行 超出才換行，不超出不換行 wra...
CSS Flex彈性布局 筆記
flexbox 是 flexible box 的簡稱 注 意思是 靈活的盒子容器 是 css3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的螢幕尺寸和裝置下可 地展現出來。它之所以被稱為 flexbox 是因為它能夠擴充套件和收縮 flex 容器內的元素，以最大限度地填充可用空...