什么是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 | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self

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

上述內容就是什么是css中Flex布局要素，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。