CSS3 flex佈局總結

CSS3 flex佈局總結

2009年，W3C 提出了新的方案----Flex 佈局，可以簡單、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支援。

Flex 是 Fl​​exible Box 的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的彈性。任何一個容器都可以指定為 Flex 佈局。

( 推薦學習：CSS教學 )

行內元素也可以使用 Flex 佈局。

.box{
  display: flex;
}
.box{
  display: inline-flex;
}

要注意的是Webkit 核心的瀏覽器，必須加上-webkit前綴。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

此外，設為 Flex 版面配置以後，子元素的float、clear和vertical-align屬性將會失效。

flex版面常用到的6個屬性

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

##1、flex-direction

屬性決定主軸的方向（即項目的排列方向）。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">.box { flex-direction: row | row-reverse | column | column-reverse; }</pre><div class="contentsignin">登入後複製</div></div><strong></strong>row（預設值）：主軸為水平方向，起點在左端。

row-reverse：主軸為水平方向，起點在右端。

• column：主軸為垂直方向，起點在上沿。 column-reverse：主軸為垂直方向，起點在下緣。
• 2、
flex-wrap
• 屬性定義，如果一條軸線排不下，如何換行。

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

nowrap（預設）：不換行。 <strong></strong>wrap：換行，第一行上方。 wrap-reverse：換行，第一行在下方。

3、<strong>flex-flow</strong>屬性是

flex-direction

屬性和
• flex-wrap
屬性的簡寫形式，預設值為
• row nowrap
。

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

• 4、
justify-content
屬性定義了專案在主軸上的對齊方式。

-content: flex-start | flex-end | center | space-between | space-

flex-start（預設值）：左對齊<strong></strong>flex-end：右對齊

center： 居中

##space-between ：兩端對齊，項目之間的間隔都相等。
• space-around：每個項目兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
• 5、align-items
• 屬性定義項目在交叉軸上如何對齊。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">.box { align-items: flex-start | flex-end | center | baseline | stretch; }</pre><div class="contentsignin">登入後複製</div></div>
• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。

center

：交叉軸的中點對齊。 <strong></strong>baseline: 專案的第一行文字的基線對齊。

stretch

（預設值）：如果項目未設定高度或設為auto，將佔滿整個容器的高度。
6、
• align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，則該屬性不起作用。

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

• 該屬性可能取6個值。
• flex-start：與交叉軸的起點對齊。
• flex-end：與交叉軸的終點對齊。
• center：與交叉軸的中點對齊。

space-between

：與交叉軸兩端對齊，軸線之間的間隔平均分佈。

• space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
• stretch（預設值）：軸線佔滿整個交叉軸。
•  還有以下6個屬性設定在項目上。
• order
• flex-grow
• flex-shrink

flex-basis

flex#align-self

## order屬性定義項目的排列順序。數值越小，排列越前，預設為0。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">.item { order: &lt;integer&gt;; }</pre><div class="contentsignin">登入後複製</div></div>

flex-grow

屬性定義項目的放大比例，預設為0，即如果存在剩餘空間，也不會放大。

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

如果所有項目的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者佔據的剩餘空間將比其他項多一倍。

######flex-shrink###屬性定義了項目的縮小比例，預設為1，即如果空間不足，該項目將縮小。 ###

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

###如果所有項目的###flex-shrink###屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的###flex-shrink###屬性為0，其他項目都為1，則空間不足時，前者不縮小。 ###

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

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

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

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

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

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

以上是CSS3 flex佈局總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！