彈性盒模型

彈性盒模型的使用方法

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

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

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

flex-direction

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

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

flex-wrap

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

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

flex-flow

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

justify-content

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

• flex-start，默認值，起點對齊；
• flex-end，終點對齊；
• center，居中
• space-between，兩端對齊，中間間隔分均分配；
• space-around，所有間隔分均分配，即所有子元素擁有相同的左右(上下)間隔。

align-items

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

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

align-content

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

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

子元素屬性

• order

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

• flex-grow

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

• flex-shrink

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

• flex-basis

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

• flex

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

  flex有兩個特殊值，auto相當于1 1 auto，none相當于0 0 auto。

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

• align-self

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

總結

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

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