flex布局開發
-
布局原理
- flex時flexible Box的縮寫，意為“彈性布局”，用來為盒子模型提供最大的靈活性，任何一個容器都可以定位flex布局
- 【注意】
- 當我們為父盒子設為flex布局以后，子元素的float、clear和vertical-align屬性將失效
- 伸縮布局=彈性布局=伸縮盒布局=彈性盒布局=flex布局
-
常見父項屬性
-
flex-direction：設定主軸的方向
-
flex-direction屬性值決定主軸的方向（及專案的排列方向）
-
【注意】
-
主軸和側軸是會變化的，就看flex-diretion設定誰為主軸，剩下的就是側軸，子元素是跟著主軸來排列的
屬性值 說明 row 默認值從左到右 row-reverse 從右到左 column 從上到下 column-reverse 從上到下
-
-
-
justify-content：設定主軸上的子元素排列方式
-
【注意】
-
使用這個屬性之前要確定好主軸是哪個
屬性值 說明 flex-start 默認值 從頭部開始 如果主軸是x軸，則從左到右 flex-end 從尾部開始排列 center 在主軸居中對齊 space-around 平分剩余空間 space-between 先兩邊貼邊 在平分剩余空間
-
-
-
flex-wrap：設定子元素是否換行
-
屬性值 說明 nowrap 默認值，不換行 wrap 換行
-
-
align-content：設定側軸上的子元素的排列方式（多行）
屬性值 說明 flex-start 從上到下 flex-end 從下到上 center 垂直居中 strech 拉伸（默認值）【專案不要給高度】 space-around 子項在側軸平分剩余空間 stretch 設定子項元素高度平分元素高度 -
align-items：設定側軸上的子元素排列方式（單行）
屬性值 說明 flex-start 從上到下 flex-end 從下到上 center 垂直居中 strech 拉伸（默認值）【專案不要給高度】 -
flex-flow：復合屬性，相當于同時設定了flex-direction和flex-wrap
-
-
子項常見屬性
-
flex子項占的分數
.item{ flex:<number>; } -
align-self控制子項子級在側軸的排列方式
- align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆寫align-items屬性
默認值是auto，表示繼承父元素align-items屬性，如果沒有父元素，則等同于stretch
-
order屬性定義子項的排列順序（前后順序）
- 數值越小排列越靠前
-
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/96591.html
標籤：Html/Css
上一篇：CSS邊框使用-基礎