前端Flex布局

在 CSS2的時(shí)代晾捏，前端的布局基本上采用標(biāo)準(zhǔn)流配合浮動(dòng)來(lái)進(jìn)行開(kāi)發(fā)椿息，從CSS3開(kāi)始提供了Flex布局（彈性布局）來(lái)適應(yīng)移動(dòng)端的發(fā)展潮流窟哺，Flex布局更加靈活屹篓，能為不同尺寸的設(shè)備提供適配的布局，在iOS中其實(shí)有一個(gè)stackView的布局方式和Flex布局非常相似。

初步理解Flex

Flex布局在整個(gè)頁(yè)面中的布局主要和float布局的地位差不多俗冻，主要是確定頁(yè)面中主要模塊的布局礁叔，至于模塊內(nèi)部的布局則依然可以采用position的方式來(lái)布局。要學(xué)習(xí)Flex布局迄薄，一開(kāi)始會(huì)有很多概念需要理解琅关，其實(shí)這些概念都是確認(rèn)一個(gè)flex-item 的位置所需要的，下面先拋磚引玉進(jìn)行一些通俗的說(shuō)明讥蔽。其實(shí)Flex布局的過(guò)程可以簡(jiǎn)單的理解為在黑板上寫(xiě)字的過(guò)程涣易，先拋開(kāi)固定的寫(xiě)字思維：即在黑板上開(kāi)始寫(xiě)字時(shí)不一定非要從黑板的左上角開(kāi)始寫(xiě)，然后依次從左向右冶伞，寫(xiě)完一行后在移到下一行新症，再次從左向右，直至反復(fù)將黑板寫(xiě)滿响禽。為啥不能一開(kāi)始從黑板的右上角徒爹，左下角，右下角開(kāi)始書(shū)寫(xiě)芋类？書(shū)寫(xiě)的順序從右向左隆嗅？寫(xiě)完一行，下一行在寫(xiě)完這行的上面侯繁？每一行文字的是左對(duì)齊胖喳，右對(duì)齊或者二端對(duì)齊？行與行之間是多大的間距贮竟？上面的規(guī)律組合可以形成很多種不同的書(shū)寫(xiě)格局丽焊，Flex布局的原理和這差不多，也是通過(guò)不同的參數(shù)設(shè)定坝锰，來(lái)保證在不同的黑板大小下形成不同的布局方式粹懒，即使不同的瀏覽器尺寸，不同的移動(dòng)端屏幕大小顯示不同的布局顷级。

Flex基本的理解

開(kāi)局一張圖凫乖，那么我們就雙手奉上Flex解析最經(jīng)典的一張圖：

main axis：稱為主軸，flex items主要的布局方向弓颈，不一定是水平的（就像對(duì)聯(lián)是從上往下寫(xiě)一樣帽芽，當(dāng)然你樂(lè)意也是可以倒著從下往上寫(xiě)），其方向由屬性flex-direction決定翔冀。
cross-axis：稱為交叉軸导街，相對(duì)于主軸而言，與主軸垂直纤子，其方向要基于main-axis而定搬瑰。
main-start | main-end：flex items在main-axis是從main-start到main-end排布的款票。
cross-start | cross-end ：一條line上的flex items在cross axis上是從cross-start到cross-end排布的，就像對(duì)聯(lián)是先讀右聯(lián)在讀左聯(lián)一樣泽论，但有些對(duì)聯(lián)你先讀左聯(lián)在讀右聯(lián)好像也通順艾少。
main size | cross size ：主軸和交叉軸的大小。

Flex屬性

display

黑板在Flex中稱為flex container翼悴，寫(xiě)的字則稱為flex items是flex container的直接子元素缚够，display屬性是設(shè)置在flex container上的，有二個(gè)取值：

flex
inline-flex

.container {
  display: flex; /* or inline-flex */
}

如果flex container的display設(shè)置為flex的話鹦赎，那么flex container是以block-level的形式存在的谍椅，相當(dāng)于是一個(gè)塊級(jí)元素，如果display的值設(shè)置為inline-flex的話古话，那么flex container是以inline-level的形式存在的雏吭，相當(dāng)于是一個(gè)行內(nèi)塊元素；父元素設(shè)置了display: flex煞额，即使子元素設(shè)置了display：block或者display：inline的屬性思恐，子元素還是會(huì)表現(xiàn)的像個(gè)行內(nèi)塊元素一樣沾谜，但是假如flex container和flex items都設(shè)置了display: flex膊毁，那么flex items自身依然是行塊級(jí)元素，并不會(huì)因?yàn)槠溟_(kāi)啟了flex布局就變?yōu)閴K級(jí)元素基跑，但是flex items的內(nèi)容依然會(huì)受到它flex布局的影響婚温，各種flex特有的屬性就會(huì)生效。

flex-direction

這個(gè)屬性確定了主軸以及主軸的方向媳否，實(shí)質(zhì)是改變了main-start和main-end的位置來(lái)改變flex items在main axis上的排布方向栅螟，一共有四個(gè)取值如下：

row (default)：水平方向從左向右。
row-reverse：水平方向從右向左篱竭。
column：垂直方向從上到下力图。
column-reverse：垂直方向從下到上。

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

flex-wrap

flex-wrap決定了是否需要換行來(lái)顯示掺逼，默認(rèn)情況下flex items是盡量一行顯示的（會(huì)自動(dòng)縮放flex item的寬度）吃媒，可以通過(guò)設(shè)置此屬性要決定是否多行顯示：

nowrap (default)：一行顯示。
wrap：多行顯示吕喘，根據(jù)交叉軸的方向來(lái)決定赘那，主軸是橫向則從上到下，主軸是縱軸則從左到右氯质。
wrap-reverse：多行顯示募舟，將cross-start和cross-end的位置互換，主軸是橫向則從下到上闻察，主軸是縱向則從右到左拱礁。

主軸只要是橫向的琢锋，無(wú)論flex-direction設(shè)置的是row還是row-reverse，其交叉軸都是從上指向下的呢灶，所以當(dāng)flex-wrap設(shè)置為wrap屬性時(shí)吩蔑，cross-start在上面而cross-end在下面；但設(shè)置為wrap-reverse時(shí)則cross-start在下面填抬，cross-end在上面烛芬；

主軸只要是縱向的，無(wú)論flex-direction設(shè)置的是column還是column-reverse飒责，其交叉軸都是從左指向右的赘娄，所以當(dāng)flex-wrap設(shè)置為wrap屬性時(shí)，cross-start在左邊而cross-end在右邊；但設(shè)置為wrap-reverse時(shí)則cross-start在右邊拢驾，cross-end在左邊彩届；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example of Perfect Center Alignment Using Flexbox</title>
    <style>
        .flex-container {
            width: 500px;
            min-height: 600px;
            margin: 0 auto;
            font-size: 22px;
            border: 1px solid #666;
            display: -webkit-flex; /* Safari 6.1+ */
            display: flex;  /* Standard syntax */
            flex-wrap: wrap-reverse;
        }
        .item {
            width: 200px;
            height: 200px;
            margin-left: 20px;
            line-height: 200px;
            text-align: center;
            background: #f0e68c;
        }
    </style>
</head>
<body>
<div class="flex-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
</body>
</html>

結(jié)果如下：

在縱向的排布方向永遠(yuǎn)是cross-start ---> cross-end的（橫向的原理也是一樣），而起始點(diǎn)的位置則由align-content屬性決定揍堰，至于這里的3號(hào)方塊為什么不是緊挨著1號(hào)的上邊緣，這個(gè)也和align-content屬性有關(guān)嗅义，后面會(huì)作解釋屏歹。

flex-flow

這個(gè)屬性就是上面flex-direction和flex-wrap的縮寫(xiě)，可以只寫(xiě)一個(gè)屬性也可以二個(gè)都寫(xiě)之碗，且與順序無(wú)關(guān)蝙眶。

.container {
   flex-flow: column wrap;
}

justify-content

在黑板上寫(xiě)字默認(rèn)的習(xí)慣是每個(gè)字緊挨著，但是有人卻每次寫(xiě)字都能保證一行只寫(xiě)10個(gè)字褪那，無(wú)論黑板多寬我就寫(xiě)10個(gè)字幽纷，且每個(gè)字之間的距離相等，這時(shí)你腦翰┚矗肯定想著拿尺子量黑板的寬度友浸，然后心中情不自禁的做起了數(shù)學(xué)題，這在Flex布局中也一樣偏窝，有時(shí)候在一個(gè)頁(yè)面中布局的內(nèi)容的大小是后臺(tái)返回的收恢，但是頁(yè)面通常需要均勻排布這些內(nèi)容，這時(shí)候justify-content屬性就派上用場(chǎng)了囚枪，justify-content決定了flex items在主軸上的對(duì)齊方式派诬，一共有六種取值如下圖所示：

align-content

既然主軸上可以指定對(duì)齊方式，交叉軸當(dāng)然也可以指定對(duì)齊方式链沼，當(dāng)在交叉軸上有多余的空間時(shí)默赂，align-content決定了多行flex-items在交叉軸上的對(duì)齊方式（如果flex-warp：nowarp，此屬性將不起作用）括勺。

重點(diǎn)說(shuō)下stretch值缆八，這個(gè)是默認(rèn)的曲掰，當(dāng)flex-items在交叉軸上的size為auto時(shí)，則flex-items所在的行會(huì)平分flex container在交叉軸上剩余的尺寸奈辰±秆回到上面flex-wrap的例子，為什么3號(hào)方塊為什么不是緊挨著1號(hào)的上邊緣奖恰？這里是由于align-content默認(rèn)的是stretch吊趾，即使flex-items在交叉軸上明確的設(shè)定了高度，所以flex items不會(huì)被拉伸瑟啃，但是它們會(huì)排列在要被拉伸的位置论泛，所以3號(hào)方塊依然在被拉上后的起始位置上，當(dāng)我們加上align-content: flex-start;時(shí)則3號(hào)方塊就會(huì)緊貼著1號(hào)方塊的上邊緣蛹屿。

align-items

有的人天生就有較好的水平特性屁奏，隨手在黑板上寫(xiě)一行字就能保證每個(gè)字的上邊緣對(duì)齊，且在一條水平線上错负，好看極了坟瓢，就像印刷的一樣；而有些人則每行的字都對(duì)不齊犹撒，align-items決定了單行flex items在cross axis（交叉軸）上的對(duì)齊方式折联。

當(dāng)flex items在交叉軸方向上的size（指width或者height，由交叉軸方向確定）為auto時(shí)油航，stretch會(huì)自動(dòng)拉伸至填充崭庸；但是如果flex items的size并不是auto怀浆，那么產(chǎn)生的效果就和設(shè)置為flex-start一樣谊囚。

注意flex-start和flex-end都是相對(duì)于cross-start和cross-end而言的，而cross-start和cross-end的位置是受flex-wrap影響的执赡，默認(rèn)值也是stretch镰踏。

對(duì)比align-items和align-content的stretch

align-items的stretch是作用在每個(gè)flex item上的，將flex item在交叉軸上的size設(shè)置為auto則拉伸至這行所在的高度沙合，這行所在的高度的確定是關(guān)鍵奠伪，并不是簡(jiǎn)單的認(rèn)為是這行所在align-items的最大值（就是手動(dòng)設(shè)定的），還要考慮上align-content的stretch的影響首懈，align-content的stretch會(huì)導(dǎo)致每行（注意這里是每行這個(gè)整體绊率，就是以行為單位）平分剩余的空間（注意是剩余的空間，不是簡(jiǎn)單的認(rèn)為是container的高度）究履，所以每行的高度是手動(dòng)設(shè)定的這行最大的高度滤否，加上這行align-content的stretch平分剩余空間的高度，可能讀了這你還是不太理解最仑，那么接下來(lái)進(jìn)行實(shí)操講解：

情形一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example of Perfect Center Alignment Using Flexbox</title>
    <style>
        .flex-container {
            width: 500px;
            min-height: 600px;
            margin: 0 auto;
            font-size: 22px;
            border: 1px solid #666;
            display: -webkit-flex; /* Safari 6.1+ */
            display: flex;  /* Standard syntax */
            flex-wrap: wrap-reverse;
            justify-content: space-evenly;
            align-content: flex-start;
            align-items: stretch;
        }
        .item {
            width: 200px;
            text-align: center;
            font-size: 2em;
        }
        .item1{
            height: 100px;
            background-color: green;
        }
        .item2{
            height: 50px;
            background-color: red;
        }
        .item3{
            height: 300px;
            background-color: blue;
        }
        .item4{
            height: auto;
            background-color: #2c3e50;
        }
    </style>
</head>
<body>
<div class="flex-container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
</div>
</body>
</html>

解讀：

由于這里設(shè)置的是align-content: flex-start藐俺，所以每一行都是緊挨著的炊甲，由于每行不存在align-content平分剩余的空間，所以第一行的最大高度是item1設(shè)置的固定高度100px欲芹，而第二行的最大高度則是item3設(shè)置的固定高度卿啡，由于item4設(shè)置的auto所以要拉升至所在行的高度，最后就與item3處在同一高度菱父。

情形二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example of Perfect Center Alignment Using Flexbox</title>
    <style>
        .flex-container {
            width: 500px;
            min-height: 600px;
            margin: 0 auto;
            font-size: 22px;
            border: 1px solid #666;
            display: -webkit-flex; /* Safari 6.1+ */
            display: flex;  /* Standard syntax */
            flex-wrap: wrap-reverse;
            justify-content: space-evenly;
            align-content: stretch;
            align-items: stretch;
        }
        .item {
            width: 200px;
            text-align: center;
            font-size: 2em;
        }
        .item1{
            height: 100px;
            background-color: green;
        }
        .item2{
            height: 50px;
            background-color: red;
        }
        .item3{
            height: 300px;
            background-color: blue;
        }
        .item4{
            height: auto;
            background-color: #2c3e50;
        }
    </style>
</head>
<body>
<div class="flex-container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
</div>
</body>
</html>

解讀：

上面的代碼只改動(dòng)了一行align-content: stretch會(huì)發(fā)現(xiàn)布局大不相同颈娜，首先由于這次align-content設(shè)置的是stretch，所以每行會(huì)平分剩余的高度浙宜，因?yàn)榈谝恍泄潭ㄔO(shè)置的最大高度是item1的100px揭鳞，第二行最大高度是item3的300px，所以剩下的高度是container的600px - 300px -100px等于200px梆奈，所以每行獲得剩下的100px野崇，最后第一行的高度是200px，第二行的高度是400px亩钟，所以3方塊和1方塊之間的空隙其實(shí)就是均分的100px（這也是為什么align-content設(shè)置為stretch二行不緊挨著的原因）乓梨，由于4號(hào)方塊的高度設(shè)置的是auto，所以會(huì)拉升至這行最后的高度至400px清酥。

align-self

flex items可以通過(guò)align-self覆蓋flex container設(shè)置的align-items扶镀，默認(rèn)值為auto：默認(rèn)遵從flex container的align-items設(shè)置。

   .item4{
            align-self: flex-end;
            height: auto;
            background-color: #2c3e50;
        }

在上面的例子的item4添加align-self: flex-end后焰轻，則item4不會(huì)進(jìn)行拉伸至400px臭觉，表現(xiàn)為起始點(diǎn)在最頂部，高度為字體的高度辱志。

order

控件的展示順序默認(rèn)是按照在HTML中書(shū)寫(xiě)的順序來(lái)展示的蝠筑，可以通過(guò)給每個(gè)控件設(shè)置order值（可以為負(fù)數(shù)）可以自定義展示順序，這個(gè)屬性沒(méi)啥好說(shuō)的揩懒。

flex-grow

在主軸方向上什乙，假如存在剩余的空間（或者空間不足）想分配給（收縮）每個(gè)元素，該以什么樣的原則分配已球？因?yàn)?strong>Flex的意義就是適配不同的屏幕臣镣，每個(gè)元素的大小會(huì)根據(jù)屏幕大小變化的，這個(gè)問(wèn)題其實(shí)由三個(gè)屬性決定的即flex-grow智亮，flex-shrink和flex-basis忆某，首先說(shuō)說(shuō)flex-grow吧，flex-grow用來(lái)“瓜分”父項(xiàng)的“剩余空間”阔蛉，就是空間有多余時(shí)弃舒，以怎么樣的原則進(jìn)行瓜分，其實(shí)就是百分比瓜分馍忽，默認(rèn)值是0棒坏，接受一個(gè)正的值燕差。

三個(gè)item都設(shè)置為1，則每個(gè)item瓜分的剩余空間是相等的坝冕，假如第二個(gè)item設(shè)置為2徒探，則其瓜分的空間是另外二個(gè)的二倍，所以寬度也是二倍喂窟。

flex-shrink

flex-shrink用來(lái)“吸收”超出的空間测暗，有時(shí)候flex-item設(shè)置的寬度太大，已經(jīng)超出了container的寬度磨澡，為了容下所有的item碗啄，就要收縮一下，flex-shrink就是定義怎么樣收縮的稳摄，也是和flex-grow一樣按照百分比進(jìn)行收縮稚字，但是方式有點(diǎn)不太一樣，要算上自己基礎(chǔ)寬度來(lái)進(jìn)行百分比厦酬，而flex-grow則不用胆描，具體看后面的例子。

flex-basis

flex-basis是用來(lái)在分配在主軸上多余或者收縮空間之前指定flex-item的基本尺寸仗阅，以這個(gè)尺寸來(lái)評(píng)價(jià)是否有剩余空間或者超出的部分昌讲。

auto：默認(rèn)值，設(shè)置為auto之后减噪，當(dāng)有設(shè)置固定的size時(shí)則basis尺寸就等于這個(gè)固定的size短绸，當(dāng)沒(méi)有設(shè)置固定的size時(shí)則等于自身內(nèi)容的size。
固定數(shù)值或者百分比：設(shè)置固定的數(shù)值或者百分比筹裕，則主軸上對(duì)應(yīng)的size（width/height）就可忽略醋闭，basis尺寸直接等于這個(gè)指定的固定值。

flex

flex是flex-grow饶碘，flex-shrink和flex-basis的縮寫(xiě)目尖，開(kāi)發(fā)中經(jīng)常使用flex這個(gè)屬性，最常用的就是flex：1扎运，其實(shí)就是flex：1 0 %0分別表示flex-grow：1，flex-shrink：0饮戳，flex-basis：0%豪治，其默認(rèn)值是flex：0 1 auto。

flex演練

演練一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example of Perfect Center Alignment Using Flexbox</title>
    <style>
        .flex-container {
            width: 500px;
            min-height: 100px;
            margin: 0 auto;
            font-size: 22px;
            border: 1px solid #666;
            display: -webkit-flex; /* Safari 6.1+ */
            display: flex;  /* Standard syntax */
            flex-wrap: wrap-reverse;
            justify-content: space-evenly;
            align-content: stretch;
            align-items: stretch;
        }
        .item {
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 2em;
        }
        .item1{
            flex: 1;
            background-color: green;
        }
        .item2{
            width: 100px;
            background-color: red;
        }
        .item3{
            width: 150px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="flex-container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
</div>
</body>
</html>

解讀：

首先計(jì)算每個(gè)item的基本寬度扯罐，由于item設(shè)置flex: 1也就是flex：1 0 0%所以其basis寬度為500px * 0% = 0px负拟，而item2和item3都沒(méi)設(shè)置flex則是默認(rèn)值flex：0 1 auto，由于item2和item3都指定了固定的width尺寸歹河，所以item2的basis尺寸為100px掩浙，item3的basis尺寸為150px花吟，三個(gè)item的basis尺寸一共為250px是小于container的500px的，所以表現(xiàn)為有剩余尺寸厨姚，這時(shí)候就要用到flex-grow屬性來(lái)決定剩余尺寸的分配衅澈，由于只有item1的flex-grow是設(shè)置有值的，所以item1獨(dú)享剩余的250px谬墙，最后item1的尺寸為0px+ 250px = 250px今布，item2的為100px + 0px = 100px，item3的尺寸為150px + 0px = 150px拭抬。

演練二

        .item1{
            flex: 1;
            background-color: green;
        }
        .item2{
            width: 100px;
            flex:2 0 30%;
            background-color: red;
        }
        .item3{
            width: 200px;
            flex:3 0 80px;
            background-color: blue;
        }

首先還是計(jì)算每個(gè)item的基本寬度部默，item1的basis尺寸為0，item2的basis尺寸為500px * 30% = 150px造虎，item3的為80px傅蹂，顯而易見(jiàn)表現(xiàn)為有多余的270px尺寸需要分配，item1分配獲得的尺寸為(1/(1+2+3))*270px = 45px算凿，item2分配獲得的尺寸為(2/(1+2+3))*270px = 90px贬派，item3分配獲得的尺寸為(3/(1+2+3))*270px = 135px，最后item1的尺寸為0 + 45px = 45px澎媒，最后item1的尺寸為150px + 90px = 240px搞乏，最后item1的尺寸為80 + 135px = 215px。

演練三

       .flex-container {
            flex-wrap: nowrap;
        }
      .item1{
            width: 100px;
            background-color: green;
        }
        .item2{
            width: 100px;
            flex:2 2 60%;
            background-color: red;
        }
        .item3{
            width: 200px;
            flex:3 1 300px;
            background-color: blue;
        }

上面將flex-container的flex-wrap設(shè)置為了nowrap讓三個(gè)item只能在一行顯示戒努，item1的basis尺寸為100px请敦，item2的basis尺寸為300px，item3的basis尺寸為300px储玫，顯而易見(jiàn)表現(xiàn)為需要收縮侍筛，分配的收縮尺寸是700px-500px = 200px。上文我們提到flex-shrink屬性不是簡(jiǎn)單的百分比撒穷，需要帶上basis尺寸匣椰，item1的收縮尺寸為((100px * 1)/(100px * 1 + 300px * 2 + 300px *1)* 200px = 20px ，同理可以算得item2的收縮尺寸為0.6*200 = 120px端礼，item3的為0.3*200 = 60px禽笑，所以最后item1的尺寸為100px -20px = 80px，item2的為300px-120px = 180px蛤奥，item3的為300px - 60px = 240px佳镜。

思考

假如上面重新將flex-container設(shè)置為wrap-reverse結(jié)果會(huì)是怎樣？這里不在進(jìn)行分析凡桥，結(jié)果如下（最好自己自行計(jì)算一下）：

Tips: 設(shè)置可以顯示多行后蟀伸，item1和item2在一行表現(xiàn)為分配多余空間，item3在一行也表現(xiàn)為分配多余空間。

九宮格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example of Perfect Center Alignment Using Flexbox</title>
    <style>
        .flex-container {
            width: 1000px;
            min-height: 800px;
            margin: 0 auto;
            font-size: 22px;
            border: 1px solid #666;
            display: -webkit-flex; /* Safari 6.1+ */
            display: flex;  /* Standard syntax */
            flex-wrap: wrap;
            justify-content: space-evenly;
            /*align-items: stretch;*/
            /*align-content: stretch;*/
        }

        .item {
            /*為了讓文字居中可以繼續(xù)給item設(shè)置flex布局*/
            display: flex;
            align-items: center;
            justify-content: center;

            flex: 0 30.67%;
            margin-bottom: 2%;
            font-size: 2em;
            background-color: green;
            /*height: auto;*/
        }
        /*偽類取前三個(gè)*/
        .item:nth-child(-n + 3) {
            margin-top: 2%;
        }
    </style>
</head>
<body>
<div class="flex-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>
</body>
</html>

Vertical stack

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example of Perfect Center Alignment Using Flexbox</title>
    <style>
        .flex-container {
            width: 1000px;
            min-height: 800px;
            margin: 0 auto;
            font-size: 22px;
            border: 1px solid #666;
            display: -webkit-flex; /* Safari 6.1+ */
            display: flex;  /* Standard syntax */
            flex-wrap: nowrap;
            flex-direction: column;
            justify-content: space-evenly;
            /*align-items: stretch;*/
        }

        .item {
            /*為了讓文字居中可以繼續(xù)給item設(shè)置flex布局*/
            display: flex;
            align-items: center;
            justify-content: center;

            height: 150px;
            font-size: 2em;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="flex-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
</body>
</html>

實(shí)現(xiàn)這個(gè)效果試了好長(zhǎng)時(shí)間啊掏，看起來(lái)簡(jiǎn)單蠢络，其實(shí)不然，首先item是沒(méi)有設(shè)置交叉軸的尺寸的迟蜜，也就是寬度是默認(rèn)的auto刹孔，由于flex-warp設(shè)置的是nowarp單行顯示，單行顯示下交叉軸尺寸如果是auto則這行的交叉軸尺寸就是container的尺寸小泉，也就是此時(shí)每行的寬度就是container的寬度（單行設(shè)置align-content是沒(méi)有效果的）芦疏，由于align-items默認(rèn)的是stretch，當(dāng)size為auto時(shí)會(huì)拉升至這行所在的尺寸微姊，所以會(huì)在寬度方向上實(shí)現(xiàn)鋪滿效果酸茴。

假如我們將上面的item的寬度寫(xiě)死為width: 500px，則此時(shí)align-item：stretch則表現(xiàn)為flex-start整體左對(duì)齊兢交，此時(shí)想讓內(nèi)容水平居中薪捍，設(shè)置align-contetn: center不起效果，需要設(shè)置align-items：center才行配喳。

最后編輯于：2022.04.09 11:02:14

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末酪穿，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子晴裹，更是在濱河造成了極大的恐慌被济，老刑警劉巖，帶你破解...
沈念sama閱讀 206,126評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件涧团，死亡現(xiàn)場(chǎng)離奇詭異只磷，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)泌绣，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,254評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)钮追，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人阿迈，你說(shuō)我怎么就攤上這事元媚。” “怎么了苗沧？”我有些...
開(kāi)封第一講書(shū)人閱讀 152,445評(píng)論 0贊 341
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵刊棕，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我崎页，道長(zhǎng)鞠绰，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 55,185評(píng)論 1贊 278
?港島之戀（遺憾婚禮）
正文為了忘掉前任飒焦，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘牺荠。我一直安慰自己翁巍，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 64,178評(píng)論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布休雌。她就那樣靜靜地躺著灶壶，像睡著了一般。火紅的嫁衣襯著肌膚如雪杈曲。梳的紋絲不亂的頭發(fā)上驰凛，一...
開(kāi)封第一講書(shū)人閱讀 48,970評(píng)論 1贊 284
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音担扑，去河邊找鬼恰响。笑死，一個(gè)胖子當(dāng)著我的面吹牛涌献，可吹牛的內(nèi)容都是我干的胚宦。我是一名探鬼主播，決...
沈念sama閱讀 38,276評(píng)論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼燕垃，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼枢劝！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起卜壕，我...
開(kāi)封第一講書(shū)人閱讀 36,927評(píng)論 0贊 259
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤您旁，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后轴捎，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體鹤盒，經(jīng)...
沈念sama閱讀 43,400評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,883評(píng)論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年轮蜕，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了昨悼。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 37,997評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡跃洛，死狀恐怖率触，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情汇竭，我是刑警寧澤葱蝗，帶...
沈念sama閱讀 33,646評(píng)論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站细燎，受9級(jí)特大地震影響两曼，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜玻驻，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,213評(píng)論 3贊 307
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一悼凑、第九天我趴在偏房一處隱蔽的房頂上張望偿枕。院中可真熱鬧，春花似錦户辫、人聲如沸渐夸。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,204評(píng)論 0贊 19
一樁弒父案渔欢，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)墓塌。三九已至，卻和暖如春奥额，著一層夾襖步出監(jiān)牢的瞬間苫幢，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,423評(píng)論 1贊 260
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工垫挨，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留韩肝，地道東北人。一個(gè)月前我還...
沈念sama閱讀 45,423評(píng)論 2贊 352
代替公主和親
正文我出身青樓棒拂，卻偏偏與公主長(zhǎng)得像伞梯，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子帚屉，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,722評(píng)論 2贊 345