css中Flex佈局要素的介紹（附程式碼）

這篇文章帶給大家的內容是關於css中Flex佈局要素的介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

flex佈局為"彈性佈局"，任何一個元素都可以透過設定css屬性display:flex;webkit核心瀏覽器為display: -webkit-flex;
指定元素為Flex佈局。
採用Flex佈局的元素，稱之為"容器"(flex container), 它其中的所有的子元素稱之為Flex項目(flex item);

容器的屬性

flex-direction

專案的排列方向選擇值：row(預設值：左到右) |  row-reverse(右到左) | column(上往下) | column-reverse(下到上)

.box {
     flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

  定義項目是否要換行 選擇值： nowrap(預設值：不換行) | wrap(換行，第一行在上方) | reverse -wrap(換行,第一行在下方)

 .box{
     flex-wrap: nowrap | wrap | wrap-reverse;
   }

flex-flow

#是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap

.box {
     flex-flow: <flex-direction> || <flex-wrap>;
   }

justify-content

定義專案在主軸上的對齊方式。選擇值flex-start(預設值左對齊) | flex-end(右對齊) | center(居中) | space-between(兩端對齊) | space-around(每個項目間隔相等)

#

.box {
     justify-content: flex-start | flex-end | center | space-between | space-around;
   }

align-items
  定義項目在交叉軸上如何對齊。選擇值flex-start(交叉軸的起點對齊) | flex-end(交差軸的終點對齊) | center(交叉軸的中點對齊) | baseline(項目的第一行文字的基線對齊) | stretch(項目未設定高度或設為auto，將佔滿整個容器的高度)

 .box {
 align-items: flex-start | flex-end | center | baseline | stretch;
 }

align-content
  定義了多根軸線的對齊方式。如果項目只有一根軸線，則該屬性不起作用。

.box {
 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
 }

專案的屬性

order

.item {
  order: <integer>;
}

flex-grow

.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink

.item {
  flex-shrink: <number>; /* default 1 */
}

#flex-basis

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex

.item {
  flex: none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ]
}

align-self

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

以上是css中Flex佈局要素的介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！