今天和大家分享一些彈性盒模型的知識點

一、什么是彈性盒模型

傳統布局基本依靠display float position來完成，有些特殊的布局寫起來不太方便。

CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

二、如何使用

為父級元素添加 display: flex; 或者 display: inline-flex; 。其子元素則可按照彈性盒模型的規則進行布局。

三、flex子元素默認的展示方式?

父級為彈性盒模型時，子元素默認有一些特殊的展示方式。當然我們可以通過后面的學習知道如何改變這些展示方式。

橫向排列

默認盒模型中，各子元素上下排列，彈性盒模型中，子元素默認按主軸從左到右橫向排列。（可以通過屬性改變主軸及主軸起點）

<style>*{ margin: 0; padding: 0;}#wrap{display: flex;width: 500px;height: 500px;border: 1px solid red;margin: 50px auto;}#wrap .d1{width: 100px;height: 200px;background-color: #99cc99;}#wrap .d2{width: 150px;height: 150px;background-color: #f60;}#wrap .d3{width: 200px;height: 200px;background-color: #1da6ba} </style> <div id="wrap"><div class="d1">1</div><div class="d2">2</div><div class="d3">3</div> </div>

?

?子元素總寬大于父級寬度，**默認不換行**，按比例縮放各個子元素的寬

<style>*{ margin: 0; padding: 0;}#wrap{display: flex;width: 500px;height: 300px;border: 1px solid red;margin: 50px auto;}#wrap .d1{width: 100px;background-color: #99cc99;}#wrap .d2{width: 200px;background-color: #f60;}#wrap .d3{width: 300px;background-color: #1da6ba} </style> <div id="wrap"><div class="d1">1</div><div class="d2">2</div><div class="d3">3</div> </div>

四、父容器的屬性? ??

1、flex-direction

flex-direction屬性決定主軸的方向，默認為row，即水平方向，起點在左。

子項目按照主軸的方向從起點開始排列。

row ，默認值，水平主軸，起點在左；row-reverse，水平主軸，起點在右；

column，垂直主軸，起點在上；

column-reverse，垂直主軸，起點在下。

2、flex-wrap

flex-wrap屬性決定子元素主軸擺放不下的時候，項目換不換行，默認不換行。

none ，默認值，不換行；

（擺放不下按比例縮放）wrap，換行，第一排在最前；

wrap-reverse，換行，最后一排在最前。

3、flex-flow

flex-flow屬性是flex-direction和flex-wrap的縮寫。

默認值為flex-flow: row none;。

4、justify-content

justify-content屬性定義子元素在主軸的對齊方式。

flex-start，默認值，起點對齊；

flex-end，終點對齊；

center，居中space-between，兩端對齊，中間間隔分均分配；

space-around，所有間隔分均分配，即所有子元素擁有相同的左右(上下)間隔。

space-evenly,?所有間隔平均分均。

5、align-items

align-items定義子元素在副軸的對齊方式。

flex-start，副軸起點對齊；

flex-end，副軸終點對齊；

center，副軸居中對齊；

baseline，文本基線對齊stretch，默認值，子元素如果沒有設置高度(寬度)，占滿整個容器。（如果全部子元素都有設置高度值，則表現和flex-start一致。）

6、align-content

align-content屬性定義多主軸之間（也就是換行后行與行之間）的對齊方式。所以，如果子元素沒有換行，這個屬性就不起作用。

flex-start，副軸起點對齊；

flex-end，副軸終點對齊；

center，副軸居中對齊；

space-between，副軸兩端對齊，中間平均分配；

space-around，每行之間間距平均分配；

?strecth，默認值，如果子元素沒有設置高度，則占滿對應主軸。（其余5個值中，沒有設置高度的子元素和該行最高的高度一樣）

space-evenly 所有間隔平均分均。

五、子元素的屬性

1、order

order屬性定義子元素（視覺上）的展示順序，值為一個數字，越小越優先擺放。

2、flex-grow

flex-grow屬性用于規定 主軸有剩余空間時 子元素增大的分配比例，默認為0，即不增大。

3、flex-shrink

flex-shrink屬性用于規定 主軸空間不足時 子元素縮小的分配比例，默認為1，即分均分配來縮小。

4、flex-basis

flex-basis屬性定義在分配空間之前，子元素占據的主軸空間大小。默認值auto即元素本來的大小。

5、flex

flex屬性是flex-grow flex-shrink flex-basis的簡寫

推薦使用優先使用這個屬性，而不是單獨寫三個分解屬性，因為瀏覽器會自動推算相關值。

6、align-self

align-self屬性允許子元素自己規定自己的對齊方式。該屬性默認繼承父級的align-items，可以通過修改各自的align-self實現各個子元素不同的對齊方式。

總結

以上是生活随笔為你收集整理的7.27弹性盒模型的全部內容，希望文章能夠幫你解決所遇到的問題。

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