主要提供簡便、完整、響應式布局解決方法，設定flex布局後元素的 float、clear、vertical-align屬性將失效
flex-direaction 決定主軸的方向
- 引數：- row(預設值): 主軸為水平方向，起點在左端- row-reverse： 同上，起點在右端- column： 主軸為垂直方向，起點在上方
- column-reverse： 同上，起點在下方
flex-wrap 如果預設軸線排序不下，則換行
- 引數：- nowrap(預設): 不換行- wrap： 換行，第一行在上方- wrap-reverse： 換行，第一行在下方
flex-flow 是flex-direaction 和 flex-wrap的簡寫justify-content 在主軸(水平)上的對齊方式
- 引數：- flex-start(預設值): 左對齊- flex-end： 右對齊- center： 居中
- space-between： 兩端對齊，專案之間間隔相等
- space-around： 專案兩側有間隔，類似margin後的效果
align-items 定義專案交叉(垂直)軸上如何對齊
- 引數：- flex-start: 起點對齊- flex-end: 重點對齊- center: 重點對齊
- baseline: 第一行文字的基線對齊
- stretch: 如果專案未設定高度或者auto，將佔滿整個容器
align-content 多根軸線的對齊方式，單一不起作用
- 引數：- flex-start: 交叉軸 起點對齊- flex-end: 交叉軸 終點對齊- center: 交叉軸 中點對齊
- space-between: 交叉軸兩端對齊，軸線之間平均分布
- sapce-around: 同margin
- stretch: 佔滿整個交叉軸
order
定義上專案的排列順序，數值越小，排列越靠前，預設為0flex-grow
定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大flex-shrink
定義專案的縮小比例，預設為1，空間不足，該專案將縮小flex-basis
在分配多餘空間之前，先計算是否有多餘空間flex
上面三個的簡寫align-self
允許單個專案和其他專案有不一樣的對齊方式，可覆蓋align-items屬性，預設auto，表示繼承父元素的align-items屬性，如果沒有父元素則等同於stretchcss常用函式
預設布局換行 Flex布局教程
本篇為學習筆記。內容來自網路。布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position 屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。flexbox 是一種一維的布局，是因為乙個 flexbox 一次只能處理乙個維度上的元素布局，一行或者一列...
預設布局換行 css 之Flex布局
一 flex 布局是什麼？flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。box 行內元素也可以使用 flex 布局 box 其中webpick伺服器前邊必須加上 webpick 注意，設為 flex 布局以後...
預設布局換行 移動WEB開發 Flex布局
1 如果是pc端頁面布局，我們還是使用傳統布局 2 如果時移動端或者不考慮相容性問題的pc端頁面布局，我們使用flex彈性布局 flex布局原理 就是通過給父盒子新增flex屬性，來控制子盒子的位置和排列順序。預設主軸為水平從左往右 flex direction row 主軸為水平從右往左 flex...