好好學習，天天向上
主要內容為：原理理解，抽風式更新

flex 布局
1、了解 felx 布局原理傳統布局

• 兼容性好
• 布局繁瑣
• 局限性，不能在移動端更好的布局

flex 布局

• 操作方便，布局極為簡單，移動端應用很廣泛
• PC 端瀏覽器支持情況較差
• IE 11 或更低版本，不支持或僅支持部分支持

flex 布局原理

• flex 是 flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 flex 布局
• 當我們為父盒子設為 flex 布局以后，子元素的 float、clear和 vertical-align屬性將失效
• 伸縮布局 = 彈性布局 = 伸縮盒布局 = 彈性盒布局 = flex 布局
• 采用 felx 布局的元素，稱為 flex 容器，簡稱容器，它的所有子元素自動稱為容器成員，稱為 flex 項目，簡稱項目

2、flex 布局父項常見屬性
以下由6個屬性是對父元素設置的

• flex-direction：設置主軸的方向
• justify-content：設置主軸上的子元素排列方式
• flex-wrap：設置子元素是否換行
• align-content：設置側軸上的子元素的排列方式 (多行)
• align-items：設置側軸上的子元素的排列方式 (單行)
• flex-flow：復合屬性，相當于同時設置了 flex-direction 和 flex-wrap

align-content 和 align-items

• align-items 適用于單行情況下，只有上對齊、下對齊、居中和拉伸
• align-content 使用于換行(多行)的情況下(單行情況下無效)，可以設置上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬性值
• 總結就是單行找 align-itens 多行找 align-content

①、flex-direction：設置主軸的方向
主軸與側軸

• 在 flex 布局中，是分為主軸和側軸兩個方向，同樣的叫法有：行和列、x軸和y軸
• 默認主軸方向就是 x 軸方向，水平向右
• 默認側軸方向就是 y 軸方向，垂直向下

• flex-direction 屬性決定主軸的方向（即項目的排列方向）
• 注意：主軸和側軸是會變化的，就看 flex-direction 設置為主軸，剩下的就是側軸，而我們的子元素是跟著主軸來排列的

屬性值解釋說明

row	默認值從左到右
row-reverse	從右到左
column	從上到下
column-revese	從上到下

div {display: flex;width: 400px;height: 400px;background-color: blanchedalmond;/* 默認主軸是水平從左往右 *//* flex-direction: row; *//* 主軸 水平從右往左 *//* flex-direction: row-reverse; *//* 主軸為垂直從上往下 *//* flex-direction: column; */flex-direction: column-reverse;}span {width: 100px;height: 100px;margin-right: 10px;background-color: skyblue;}

②、 justify-content：主軸上的子元素排列方式

• justify-content 屬性定義了項目在主軸上的對齊方式
• 注意：使用這個屬性之前一定要確定好主軸是哪個

屬性值解釋說明

flex-start	默認值從頭部開始，如果主軸是 X 軸，則從左到右
flex-end	從尾部開始排列
center	在主軸居中對齊，如果主軸是 X 軸，水平居中
space-around	平分剩余空間
space-between	先兩邊貼邊 在平分剩余空間(重要)

③、flex-wrap：子元素是否換行

• 默認情況下，項目都排在一條線(又稱"軸線")上
• flex-wrap屬性定義，flex布局中默認是不換行的

屬性值解釋說明

nowrap	默認值，不換行
wrap	換行

④、align-content：側軸上的子元素的排列方式 (多行)

• 設置子項在側軸上的排列方式并且只能用于子項出現換行的情況(多行)，在單行下沒有效果

屬性值解釋說明

flex-start	在側軸的頭部開始排列
flex-end	在側軸的尾部開始排列
center	在側軸中間顯示
space-around	子項在側軸平分剩余空間
space-between	子項在側軸先分布在兩頭，在平分剩余空間
stretch	設置子項元素高度平分父元素高度

⑤、align-items：側軸上的子元素的排列方式 (單行)

• 該屬性是控制子項在側軸(默認是 y 軸) 上的排列方式
• 在子項為單項(單行)的時候使用

屬性解釋說明

flex-start	默認值從上到下
flex-end	從下到上
center	擠在一起居中(垂直居中)
stretch	拉伸

⑥、flex-flow

• flex-flow 屬性是復合屬性， flex-direction 和 flex-wrap 屬性的復合屬性
• flex-flow: row nowrap;

3、flex布局子項常見屬性

• flex 子項目占的分數
• align-self 控制子項自己在側軸的排列方式
• order 屬性定義子項的排列順序 (前后順序)

①、flex 屬性

• flex 屬性定義項目分配父盒子的剩余空間，用 flex 來表示占多少分數
• 屬性值為數字，數字為1，表示占總份數中的1 份，默認值為0

* {margin: 0;padding: 0; } section {display: flex;width: 60%;height: 80px;margin: 50px auto;background-color: skyblue; } section div:nth-child(1), section div:nth-child(3) {width: 80px;height: 80px;background-color: slateblue; } section div:nth-child(2) {flex: 1;height: 80px;background-color: tomato; }<section><div>1</div><div>2</div><div>3</div> </section>

②、align-self 控制子項自己在側軸的排列方式

• align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性
• 默認值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch

div { display: flex;width: 400px;height: 400px;background-color: blanchedalmond;justify-content: center;align-content: flex-start; } span {width: 100px;height: 100px;margin-right: 10px;margin-bottom: 10px;background-color: skyblue; }span:nth-child(2) {align-self: flex-end; }

③、order 屬性定義子項的排列順序

• 數值越小，排列越靠前，默認值為 0
• 注意：和 z-index 不一樣

span:nth-child(2) {/* 調整子項加載的順序，默認值是 0，如果想往前提，屬性值可以為負數 */order: -1;/* 如果前面的元素想往后移,屬性值要比前面都大 */}

總結

以上是生活随笔為你收集整理的flex vue 垂直居中居上_移动开发-flex 布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。