一、彈性盒模型

彈性盒模型是css3的一種新的布局方式，是一種當(dāng)前頁面需要適應(yīng)不同的屏幕大小及設(shè)備類型時(shí)確保擁有恰當(dāng)?shù)男袨榈牟季址绞健?/p>

要點(diǎn)：

• 主要是針對(duì)容器類元素中對(duì)子元素的布局上的控制
• 彈性盒模型是由彈性容器與彈性子元素構(gòu)成
• 對(duì)于父級(jí)元素之外，子元素以內(nèi)是正常渲染的，與彈性盒模型無關(guān)

二、CSS3 彈性盒子內(nèi)容

1、基本概念

• 彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
• 彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
• 彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素。
• 彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個(gè)容器只有一行。

2、display:flex 和 display:inline-flex 區(qū)別

• flex： 將對(duì)象作為彈性伸縮盒顯示
• inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示

（1）flex

.main {
    background-color: #0f0;
    display: flex;
}
.main>div {
    width: 50px;
    height: 50px;
    border: 1px solid #000;
}

<div class="main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

此時(shí)沒有為父元素main設(shè)置寬度，默認(rèn)為100%；

（2）inline-flex

.main {
    background-color: #0f0;
    display: inline-flex;
}
.main>div {
    width: 50px;
    height: 50px;
    border: 1px solid #000;
}
.main div:nth-child(2) {
    height: 60px;
}

<div class="main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

此處雖然沒有給父元素設(shè)置寬度，但是父元素默認(rèn)會(huì)根據(jù)子元素的寬高去自適應(yīng)。

三、CSS3 彈性盒子常用屬性

1、flex-direction 屬性

決定項(xiàng)目的方向。

注意：如果元素不是彈性盒對(duì)象的元素，則 flex-direction 屬性不起作用。

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

屬性值

2、flex-wrap 屬性

flex-wrap 屬性規(guī)定flex容器是單行或者多行，同時(shí)橫軸的方向決定了新行堆疊的方向。

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

可以取三個(gè)值：

（1）nowrap (默認(rèn))：不換行

（2）wrap：換行，第一行在上方

（3）wrap-reverse：換行，第一行在下方

3. flex-flow 屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap。

.flex-container { flex-flow: <flex-direction> <flex-wrap> }

4、align-items屬性

align-items 屬性定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式。

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

5、align-content屬性

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

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

。

6、justify-content屬性

justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。

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

四、彈性子元素屬性

1、order屬性

.flex-container .flex-item { order: <integer>; }

<integer>：用整數(shù)值來定義排列順序，數(shù)值小的排在前面?？梢詾樨?fù)值，默認(rèn)為0。

2、flex-grow屬性

.flex-container .flex-item { flex-grow: <integer>; }

<integer>：一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量。默認(rèn)值是 0。

3、flex-shrink屬性

.flex-container .flex-item { flex-shrink: <integer>; }

<integer>：一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行收縮的量。默認(rèn)值是 1。

4、flex-basis屬性

.flex-container .flex-item { flex-basis: <integer> | auto; }

<integer>：一個(gè)長(zhǎng)度單位或者一個(gè)百分比，規(guī)定元素的初始長(zhǎng)度。

auto：默認(rèn)值。長(zhǎng)度等于元素的長(zhǎng)度。如果該項(xiàng)目未指定長(zhǎng)度，則長(zhǎng)度將根據(jù)內(nèi)容決定。

5、flex屬性

flex 屬性用于設(shè)置或檢索彈性盒模型對(duì)象的子元素如何分配空間。

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫屬性。

.flex-container .flex-item { flex: flex-grow flex-shrink flex-basis | auto | initial | inherit; }

6、align-self屬性

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

取值同 align-items。