首先要有個容器，並設定display:flex;display:-webkit-flex;該容器有以下六個屬性：
flex-direction (元素排列方向)
row, row-reverse, column, column-reverse
flex-wrap (換行)
nowrap, wrap, wrap-reverse
flex-flow (以上兩者的簡寫)
flex-direction || flex-wrap
justify-content (水平對齊方式)
flex-start, flex-end, center, space-between, space-around
align-items (垂直對齊方式)
stretch, flex-start, flex-end, center, baseline
align-content (多行垂直對齊方式)
stretch, flex-start, flex-end, center, space-between, space-around
專案的屬性：?
order 排列順序，數值，預設0
"integer"
flex-grow 如圖示7，定義放大比例，預設0，即如果存在剩餘空間，也不放大。
"number"
flex-shrink 如圖示8，定義縮小比例，預設1，如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。
"number"
flex-basis 定義專案佔據的主軸空間，預設auto。會根據flex-direction定義的主軸（水平或者垂直），定義專案本來的大小，跟width或者height一樣。
flex 推薦，以上三個的縮寫，預設 0 1 auto
"flex-grow""flex-shrink""flex-basis"
align-self 如圖示9，單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items
"auto","flex-start","flex-end","center","baseline","stretch"
1.flex-direction?
row (從左往右)預設
row-reverse (從右往左)
column (從上往下)
column-reverse (從下往上)
2.flex-wrap?
nowrap (不換行)預設
wrap (換行，且往下一行換)
wrap-reverse (換行，且往上一行換)
3.flex-flow，是flex-direction和flex-wrap的簡寫形式。?
stretch 預設
flex-start
flex-end
center
baseline 專案第一行文字的基準線對齊
stretch 預設
定義了放大比例，預設為0，即如果存在剩餘空間，也不會放大。但是，如果所有專案的flex-grow屬性為1，則他們將等分剩餘空間（如果有的話），如果其中乙個為2，則他是其他專案的2倍寬度。
定義了專案的縮小比例，預設為1，即如果空間不足，專案將縮小。如果有乙個專案的flex-shrink為0，其他都為1，空間不足時，前者不縮小。
9.align-self，定義專案自己的對齊方式
18-12-13 div內一元素寬度自適應父元素
10分鐘學會flex布局
彈性盒子由容器和子元素組成。容器 flex container 通過設定 display 屬性的值為 flex 或 inline flex將其定義為彈性容器。子元素 flex item 容器中的每個單元稱為子元素 容器中存在兩條多軸 主軸 預設水平方向 和側軸 預設垂直方向 row 預設值 橫向布局...
一分鐘看懂mysql 一分鐘，看懂易貨
從20世紀80年代開始，易貨公司在美國加拿大 澳大利亞等國興起，成為這些國家減少現金用量 增加銷售 減少庫存 開發新客戶 開闢新市場 促進經濟發展的重要產業。也成為了企業消化庫存商品 剩餘生產能力 無形資產的有效方式和在遭遇資金瓶頸時的新選擇。2015年以來，中國線下易貨店開始了矇眼狂奔，在河南南陽...
2分鐘看懂DMZ區
最近看到乙個名詞 dmz區 一直充滿疑問，今天對其進行了查詢，理解如下 1 dmz是什麼？英文全名 demilitarized zone 中文含義是 隔離區 在安全領域的具體含義是 內外網防火牆之間的區域 2 dmz做什麼？dmz區是乙個緩衝區，在dmz區存放著一些公共伺服器，比如論壇等。使用者要從...