使用flexbox進(jìn)行布局

css-flexbox

Flex box布局模型的主要目的是提供更有效率的布局方式，尤其是當(dāng)容器內(nèi)元素的尺寸不固定的時(shí)候更能表現(xiàn)出它的優(yōu)勢(shì)。它能夠自動(dòng)識(shí)別子元素的尺寸，從而為盒裝模型提供更高的靈活性。

一、基本概念

如果元素采用Flex進(jìn)行布局，那么這個(gè)元素就可以稱(chēng)為Flex容器（Flex container），元素的所有子元素稱(chēng)為Flex項(xiàng)目（Flex item）。

下圖為Flexbox模型圖：

CSS3-Flexbox-Model

（一）幾個(gè)術(shù)語(yǔ)

  • main axis：水平主軸
  • main-start：主軸開(kāi)始位置，與邊框的交叉點(diǎn)
  • main-end：主軸的結(jié)束位置
  • cross axis：垂直交叉軸
  • cross-start：交叉軸的開(kāi)始位置
  • cross-end：交叉軸的結(jié)束位置
  • main size：?jiǎn)蝹€(gè)項(xiàng)目占據(jù)的主軸空間
  • cross size：?jiǎn)蝹€(gè)項(xiàng)目占據(jù)的交叉軸空間

二、瀏覽器兼容情況

CSS flexbox

點(diǎn)擊查看更多信息：flexbox-compatibility

三、Flexbox容器的構(gòu)造方法

  1. 任何一個(gè)容器都可以指定為Flexbox布局：
.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}
  1. 行內(nèi)元素可以指定Flexbox布局：
.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

注意，設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

四、Flexbox容器特性

（一）flex-direction屬性

flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。

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

Values:

.flex-container {
  -webkit-flex-direction: row; /* Safari */
  flex-direction:         row; /* 默認(rèn)值 */
}

主軸為水平方向，起點(diǎn)在左端:

CSS flexbox
.flex-container {
  -webkit-flex-direction: row-reverse; /* Safari */
  flex-direction:         row-reverse;
}

主軸為水平方向，起點(diǎn)在右端:

CSS flexbox
.flex-container {
  -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}

主軸為垂直方向，起點(diǎn)在上端:

CSS flexbox
.flex-container {
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction:         column-reverse;
}

主軸為垂直方向，起點(diǎn)在下端:

CSS flexbox

（二）flex-wrap屬性

flex-wrap屬性決定內(nèi)容在抽線(xiàn)上排列不下的換行方式。

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

Values:

.flex-container {
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap; /* 默認(rèn) */
}
CSS flexbox

設(shè)置不換行。

.flex-container {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}
CSS flexbox

設(shè)置自動(dòng)換行，且第一行在上方。

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /* Safari */
  flex-wrap:         wrap-reverse;
}
CSS flexbox

設(shè)置自動(dòng)換行，且第一行在下方。

（三）flex-flow屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式。

Values:

.flex-container {
  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
  flex-flow:         <flex-direction> || <flex-wrap>;
}

默認(rèn)屬性值：

.flex-container {
  -webkit-flex-flow: row nowrap; /* Safari */
  flex-flow:         row nowrap;
}

（四）justify-content屬性

justify-content屬性定義項(xiàng)目在主軸上的對(duì)齊方式。

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

Values:

.flex-container {
  -webkit-justify-content: flex-start; /* Safari */
  justify-content:         flex-start;
}
CSS flexbox

左對(duì)齊。

.flex-container {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content:         flex-end;
}
CSS flexbox

右對(duì)齊。

.flex-container {
  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
}
CSS flexbox

居中。

.flex-container {
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}
CSS flexbox

兩端對(duì)齊，項(xiàng)目之間的間隔相等。

.flex-container {
  -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
}
CSS flexbox

每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。

（五）align-items屬性

align-items屬性定義項(xiàng)目在交叉軸上的對(duì)齊方式。

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

Values:

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items:         flex-start;
}
CSS flexbox

交叉軸的起點(diǎn)對(duì)齊。

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items:         flex-end;
}
CSS flexbox

交叉軸的終點(diǎn)對(duì)齊。

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items:         center;
}
CSS flexbox

交叉軸的中點(diǎn)對(duì)齊。

.flex-container {
  -webkit-align-items: baseline; /* Safari */
  align-items:         baseline;
}
CSS flexbox

項(xiàng)目的第一行文字的基線(xiàn)對(duì)齊。

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items:         stretch;
}
CSS flexbox

如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿(mǎn)整個(gè)容器的高度。

（六）align-content屬性

align-content定義了多根軸線(xiàn)的對(duì)齊方式。如果項(xiàng)目只有一根軸線(xiàn)，該屬性不起作用。

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

Values:

.flex-container {
  -webkit-align-content: flex-start; /* Safari */
  align-content:         flex-start;
}
CSS flexbox

與交叉軸的起點(diǎn)對(duì)齊。

.flex-container {
  -webkit-align-content: flex-end; /* Safari */
  align-content:         flex-end;
}
CSS flexbox

與交叉軸的終點(diǎn)對(duì)齊。

.flex-container {
  -webkit-align-content: center; /* Safari */
  align-content:         center;
}
CSS flexbox

與交叉軸的中點(diǎn)對(duì)齊。

.flex-container {
  -webkit-align-content: space-between; /* Safari */
  align-content:         space-between;
}
CSS flexbox

與交叉軸兩端對(duì)齊，軸線(xiàn)之間的間隔平均分布。

.flex-container {
  -webkit-align-content: space-around; /* Safari */
  align-content:         space-around;
}
CSS flexbox

每根軸線(xiàn)兩側(cè)的間隔都相等。

.flex-container {
  -webkit-align-content: stretch; /* Safari */
  align-content:         stretch;
}
CSS flexbox

軸線(xiàn)占滿(mǎn)整個(gè)交叉軸。

五、Flexbox項(xiàng)目特性

（一）order屬性

order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。

Values:

.flex-item {
  -webkit-order: <integer>; /* Safari */
  order:         <integer>;
}
CSS flexbox

（二）flex-grow屬性

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

Values:

.flex-item {
  -webkit-flex-grow: <number>; /* Safari */
  flex-grow:         <number>;
}
CSS flexbox

如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話(huà)）。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。

（三）flex-shrink屬性

flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

Values:

.flex-item {
  -webkit-flex-shrink: <number>; /* Safari */
  flex-shrink:         <number>;
}
CSS flexbox

如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。

負(fù)值對(duì)該屬性無(wú)效。

（四）flex-basis屬性

flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。

Values：

.flex-item {
  -webkit-flex-basis: auto | <width>; /* Safari */
  flex-basis:         auto | <width>;
}

它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間。

（五）flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。

Values：

.flex-item {
  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

（六）align-self屬性

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。

Values：

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

參考信息：
https://www.w3.org/html/ig/zh/css-flex-1/#intro
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • H5移動(dòng)端知識(shí)點(diǎn)總結(jié) 閱讀目錄 移動(dòng)開(kāi)發(fā)基本知識(shí)點(diǎn) calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,824評(píng)論 0贊 26
  • 移動(dòng)開(kāi)發(fā)基本知識(shí)點(diǎn) 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,719評(píng)論 0贊 6
  • 前言 FlexBox是css3的一種新的布局方式，天生為解決布局問(wèn)題而存在的它，比起傳統(tǒng)的布局方式，我們使用Fle...
    zevei閱讀 1,529評(píng)論 23贊 3
  • 作者： 阮一峰日期： 2015年7月10日原文鏈接：http://www.ruanyifeng.com/blog/...
    Mike_Gu閱讀 1,052評(píng)論 0贊 6
  • 簡(jiǎn)書(shū)的Markdown貌似不支持插入iframe，所以文章里的JSFiddle示例都改做截圖了，如果有需要可以點(diǎn)擊...
    kangflict閱讀 1,227評(píng)論 2贊 8

友情鏈接更多精彩內(nèi)容