彈性盒模型

彈性盒模型的使用方法

為父級元素添加`display: flex;` 或者 `display: inline-flex;

采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。

flex-direction flex-wrap flex-flow justify-content align-items align-content

flex-direction

flex-direction屬性決定主軸的方向，默認(rèn)為row，即水平方向，起點在左。
子項目按照主軸的方向從起點開始排列。

• row ，默認(rèn)值，水平主軸，起點在左；
• row-reverse，水平主軸，起點在右；
• column，垂直主軸，起點在上；
• column-reverse，垂直主軸，起點在下。

flex-wrap

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

• none ，默認(rèn)值，不換行；（擺放不下按比例縮放）
• wrap，換行，第一排在最前；
• wrap-reverse，換行，最后一排在最前。

flex-flow

flex-flow屬性是flex-direction和flex-wrap的縮寫。
默認(rèn)值為flex-flow: row none;。

justify-content

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

• flex-start，默認(rèn)值，起點對齊；
• flex-end，終點對齊；
• center，居中
• space-between，兩端對齊，中間間隔分均分配；
• space-around，所有間隔分均分配，即所有子元素?fù)碛邢嗤淖笥?上下)間隔。

align-items

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

• flex-start，副軸起點對齊；
• flex-end，副軸終點對齊；
• center，副軸居中對齊；
• baseline，文本基線對齊
• stretch，默認(rèn)值，子元素如果沒有設(shè)置高度(寬度)，占滿整個容器。（如果全部子元素都有設(shè)置高度值，則表現(xiàn)和flex-start一致。）

align-content

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

• flex-start，副軸起點對齊；
• flex-end，副軸終點對齊；
• center，副軸居中對齊；
• space-between，副軸兩端對齊，中間平均分配；
• space-around，每行之間間距平均分配；
• strecth，默認(rèn)值，如果子元素沒有設(shè)置高度，則占滿對應(yīng)主軸。（其余5個值中，沒有設(shè)置高度的子元素和該行最高的高度一樣）

子元素屬性

• order

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

• flex-grow

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

• flex-shrink

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

• flex-basis

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

• flex

  flex屬性是flex-grow flex-shrink flex-basis的簡寫，默認(rèn)值就是這三者的默認(rèn)值flex: 0 1 auto;。最少需要寫一個值，后兩個值省略。

  flex有兩個特殊值，auto相當(dāng)于1 1 auto，none相當(dāng)于0 0 auto。

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

• align-self

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。