flexbox 彈性盒子詳解

2021-08-10 10:30:29 字數 1534 閱讀 4179

在傳統布局中，我們依賴的是diplay+position+float，使特殊的布局非常不方便。那麼今天我們說css3中的彈性盒子，使我們在進行布局時，更加的便捷。

1.display:flex表示的是把盒子設定為彈性盒子。

12


3
2.flex-direction表示的是盒子的排列方向，有三個屬性值，分別為row、column、row-reverse、column-reverse。row表示的是水平從左到右排列，row-reverse表示的是水平從右往左排列，column表示的是垂直從上往下排列，column-reverse表示的是垂直從下往上排列。下面以column-reverse為例，**如下：

12


3
3.flex-wrap表示的是否換行，有三個屬性，分別為：nowrap,wrap,wrap-reverse。nowrap表示的是 不換行，wrap表示的是換行，wrap-reverse表示的是換行並反轉。下面以wrap-reverse為例，**如下：

12


3456


789
4.justify-content表示的是垂直方向上內容對齊屬性，有五個屬性值，分別是：flex-start、flex-end、center、space-between、space-around。其中，flex-start表示的彈性盒子向行頭緊密填充、flex-end表示的是彈性盒子向行尾緊密填充，center表示的是居中緊密填充，space-between表示的是

彈性專案平均分布在該行上。如果剩餘空間為負或者只有乙個彈性項，則該值等同於flex-start，space-around表示的是彈性專案平均分布在該行上，兩邊留有一半的間隔空間。如果剩餘空間為負或者只有乙個彈性項，則該值等同於center。

12


3456


789
5.align-items表示的是垂直方向上的內容對齊屬性，有五個屬性值，分別是：flex-start、flex-end、center、baseline、stretch。其中flex-start、flex-end、center和上面justify-content的意義是一樣的，baseline是以基線為準，stretch表示的是預設情況下的狀態，被拉伸。下面以center為例，**如下：

12


3456


789
6.align-content屬性用於修改flex-wrap屬性的行為。類似於align-items, 但它不是設定彈性子元素的對齊，而是設定各個行的對齊。屬性值有：flex-start、flex-end、center、space-between、space-around、stretch。下面以space-around為例，**如下：

12


3456


789
7.order是用來設定元素的順序。屬性值可以設定為number值，設定為幾就位於第幾位。

以上為基本常用的彈性盒子的屬性。

彈性盒子flexbox

彈性盒子，為父容器指定為彈性盒子，設定display flex，注意如果是webkit核心的，要加上字首 webkit，即是display webkit flex 如果是行內元素，設定為display inline flex 父容器擁有的屬性 1.flex direction 決定盒子的主軸方向，預...

Flexbox彈性盒子

定義乙個flex box 伸縮盒布局 需要在乙個父級元素上使用display屬性的值 flex或inline flex。這個父級元素將成為flex container 伸縮容器 而它的所有子元素將變成flex item 伸縮項 使用flex值能將元素渲染成為乙個塊級容器，而使用inline flex...

彈性盒子（flex box）

flexbox在div下使用 1.display flex none block inline flex 設定為彈性盒子 2.flex wrap wrap nowrap 可折疊 3.flex direction 彈性盒子排列方向 row橫向排列 row reverse由右向左 column縱向向下，...