CSS - 布局 - display:flex / inline-flex - 彈性盒子布局

彈性盒子布局模型

是一種用于按行或按列布局元素的 一維布局方法。元素可以膨脹以填充額外的空間啄巧，收縮以適應(yīng)更小的空間。

示例1: 正常流布局

.css
section{
    display: block;
}
.html
<header>
    <h3>Sample flexbox example</h3>
</header>
<section>
    <article>
        <h4>First article</h4>
        <p>Tacos actually microdosing</p>
    </article>

    <article>
        <h4>Second article</h4>
        <p>Tacos actually microdosing</p>
    </article>

    <article>
        <h4>Third article</h4>
        <p>Tacos actually microdosing</p>
        <p>Cray food truck brunch</p>
    </article>
</section>

效果：

示例2: 彈性盒子布局修改 `display`的值為`flex`

section{
    display: flex;
}
article {
    padding: 5px;
    margin: 5px;
    background: aqua;
    width: 100%; // 充滿(mǎn)空間
}

效果：

flex 模型的概念說(shuō)明

主軸（main axis）：是沿著 flex 元素放置的方向延伸的軸（比如頁(yè)面上的橫向的行、縱向的列）蜓萄。該軸的開(kāi)始和結(jié)束被稱(chēng)為 main start 和 main end庄新。
交叉軸（cross axis）：是垂直于 flex 元素放置方向的軸鞠眉。該軸的開(kāi)始和結(jié)束被稱(chēng)為 cross start 和 cross end。
flex 容器（flex container）：設(shè)置了 display: flex 的父元素择诈。（在本例中是 <section>被稱(chēng)之為 flex 容器（flex container）械蹋。
flex 項(xiàng)（flex item）：在 flex 容器中表現(xiàn)為柔性的盒子的元素。（本例中是 <article>元素羞芍。

?
?

屬性 `flex-direction` 決定彈性盒子內(nèi)部項(xiàng)的方向哗戈。

指定了內(nèi)部元素是如何在 flex 容器中布局的，定義了主軸的方向 (正方向或反方向)涩金。

語(yǔ)法：

flex-direction = 
  row             |
  row-reverse     |
  column          |
  column-reverse

取值：

row：主軸與文本方向相同谱醇。主軸起點(diǎn)和主軸終點(diǎn)與內(nèi)容方向相同。
row-reverse：表現(xiàn)和 row 相同步做，但置換了主軸起點(diǎn)和主軸終點(diǎn)
column：主軸和塊軸相同副渴。主軸起點(diǎn)與主軸終點(diǎn)和書(shū)寫(xiě)模式的前后點(diǎn)相同
column-reverse：表現(xiàn)和column相同，但置換了主軸起點(diǎn)和主軸終點(diǎn)

?
?

屬性 `flex-wrap` 換行處理溢出的布局

指定 flex 元素單行顯示還是多行顯示全度。如果允許換行煮剧，這個(gè)屬性允許你控制行的堆疊方向。

語(yǔ)法：

flex-wrap = 
  nowrap        |
  wrap          |
  wrap-reverse

取值

nowrap：默認(rèn)值，flex 的元素被擺放到到一行勉盅，這可能導(dǎo)致 flex 容器溢出佑颇。cross-start 會(huì)根據(jù) flex-direction 的值等價(jià)于 start 或 before。
wrap：flex 元素被打斷到多個(gè)行中草娜。cross-start 會(huì)根據(jù) flex-direction的值等價(jià)于 start或before挑胸。cross-end 為確定的 cross-start 的另一端。
wrap-reverse：和 wrap 的行為一樣宰闰，但是 cross-start 和 cross-end 互換茬贵。

示例：

如圖是未換行，且益處的彈性布局：

添加如下代碼：

section{
    display: flex;
    flex-wrap: wrap;
}

效果：

也添加如下代碼：

article {
    flex: 100px;
}

效果：

?
?

屬性 `flex-flow` 簡(jiǎn)寫(xiě)屬性

是 flex-direction 和 flex-wrap 的簡(jiǎn)寫(xiě)移袍。

語(yǔ)法：

flex-flow =   <'flex-direction'>  ||  <'flex-wrap'>

?
?

屬性 `flex` 增大解藻，縮小

設(shè)置了彈性項(xiàng)目如何增大或縮小以適應(yīng)其彈性容器中可用的空間。

是簡(jiǎn)寫(xiě)屬性葡盗，其包含如下屬性：
flex-grow螟左、flex-shrink、flex-basis

語(yǔ)法：

flex = 
  none                                                |
  [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

取值：

flex-grow
flex-shrink
flex-basis

單值語(yǔ)法:

一個(gè)無(wú)單位數(shù) <number>: 它會(huì)被當(dāng)作 flex:<number> 1 0; <flex-shrink>的值被假定為 1觅够，然后<flex-basis> 的值被假定為0胶背。
一個(gè)有效的寬度 (width) 值：它會(huì)被當(dāng)作 flex-basis 的值。
關(guān)鍵字none蔚约、auto奄妨、initial.

雙值語(yǔ)法:

第一個(gè)值必須為一個(gè)無(wú)單位數(shù)，并且它會(huì)被當(dāng)作 flex-grow 的值苹祟。
- 第二個(gè)值必須為以下之一：
  一個(gè)無(wú)單位數(shù)：它會(huì)被當(dāng)作 flex-shrink 的值砸抛。
  一個(gè)有效的寬度值：它會(huì)被當(dāng)作 flex-basis 的值。

三值語(yǔ)法:

第一個(gè)值必須為一個(gè)無(wú)單位數(shù)树枫，并且它會(huì)被當(dāng)作 flex-grow 的值直焙。
第二個(gè)值必須為一個(gè)無(wú)單位數(shù)，并且它會(huì)被當(dāng)作 flex-shrink 的值砂轻。
第三個(gè)值必須為一個(gè)有效的寬度值奔誓，并且它會(huì)被當(dāng)作 flex-basis 的值。

?
?

屬性 `flex-grow`

MDN介紹：

設(shè)置 flex 項(xiàng) 主尺寸的 flex 增長(zhǎng)系數(shù)搔涝，負(fù)值無(wú)效厨喂，默認(rèn)為 0。
主尺寸：flex項(xiàng)的寬度或高度庄呈，取決于flex-direction值蜕煌。

個(gè)人理解：

屬性規(guī)定了 flex項(xiàng) 在 flex 容器中分配剩余空間的所占有相對(duì)比例。
剩余空間：是 flex 容器的大小減去所有 flex 項(xiàng)的大小加起來(lái)的空間诬留。
如果所有的兄弟項(xiàng)目 flex-grow 屬性值斜纪，都是一致的贫母，那么所有的項(xiàng)目所占的剩余空間，按相同比例分配盒刚，否則將根據(jù)不同的flex-grow定義的比例進(jìn)行分配腺劣。

語(yǔ)法：

flex-grow = 
  <number [0,∞]>

示例1：所有的flex項(xiàng)的 `flex-grow` 屬性值全部為 `0`，即默認(rèn)值因块，按相同比例分配橘原。

.html
<div id="content">
    <div class="box box1" style="background-color:red;">A</div>
    <div class="box box2" style="background-color:lightblue;">B</div>
    <div class="box box3" style="background-color:yellow;">C</div>
    <div class="box box4" style="background-color:brown;">D</div>
    <div class="box box5" style="background-color:lightgreen;">E</div>
</div>

.css
#content{
    width: 100px;
    padding: 0px;
    border: 2px solid black;
    
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap; 
}

.box{
    width: 10px;
}

效果：

示例2：我們將 .box1 的 `flex-grow` 屬性值改為 `1`，添加如下代碼

.box1{
    flex-grow: 1;
}

效果：

代碼解析：
將 .box1 的 flex-grow 屬性值改為 1涡上。意味著：所有的剩余空間靠柑，全部分配給了 .box1。
即使你將屬性值設(shè)為 100吓懈，結(jié)果也是一樣的，此時(shí)不論值為多少靡狞，.box 占有所有剩余空間耻警。

示例3：我們將 .box1 和 .box2 的 `flex-grow` 屬性值改為 `1`，添加如下代碼

.box1{
    flex-grow: 1;
}
.box2{
    flex-grow: 1;
}

效果：

代碼解析：
將 .box1 和 .box2 的 flex-grow 屬性值都改為 1甸怕。意味著：所有的剩余空間甘穿，全部平均分配給了 .box1 和 .box2 ，各占 1 / 2梢杭。

示例4：我們將 .box2 的 `flex-grow` 屬性值改為 `2`温兼，添加如下代碼

.box1{
    flex-grow: 1;
}
.box2{
    flex-grow: 2;
}

效果：

代碼解析：
將 ..box2 的 flex-grow 屬性值改為 2。意味著：所有的剩余空間武契，.box1 占 1 / 3 募判，.box2 占 2 / 3；

示例5：看一下 flex項(xiàng) 換行之后咒唆，修改 `flex-grow`屬性届垫，會(huì)是什么效果，添加如下代碼

.box{
    width: 30px;
}
.box1{
    flex-grow: 1;
}
.box4{
    flex-grow: 1;
}

效果：

代碼解析：
在第一行全释，所有的剩余空間装处，全部分配給了 .box1。
在第二行浸船，所有的剩余空間妄迁，全部分配給了 .box4。

?
?

屬性 `flex-basis`

MDN：指定了 flex 元素在主軸方向上的初始大小李命。如果不使用 box-sizing 改變盒模型的話(huà)登淘，那么這個(gè)屬性就決定了 flex 元素的內(nèi)容盒（content-box）的尺寸。

語(yǔ)法：

flex-basis = 
  content    |
  <'width'>  

  <'width'>  =
  <length>  |
  <percentage>

語(yǔ)法示例：

指定<'width'> 
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

固有的尺寸關(guān)鍵詞 
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

在 flex item 內(nèi)容上的自動(dòng)尺寸 
flex-basis: content;

全局?jǐn)?shù)值 
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

取值：

<'width'>：width 值可以是 <length>; 該值也可以是一個(gè)相對(duì)于其父彈性盒容器主軸尺寸的百分?jǐn)?shù) 项戴。負(fù)值是不被允許的形帮。默認(rèn)為 auto槽惫。
content：基于 flex 的元素的內(nèi)容自動(dòng)調(diào)整大小。
由于最初規(guī)范中沒(méi)有包括這個(gè)值辩撑，在一些早期的瀏覽器實(shí)現(xiàn)的 flex 布局中界斜，content 值無(wú)效，可以利用設(shè)置 width 或 height為 auto 達(dá)到同樣的效果合冀。

示例：

.box{
    flex-basis: 100px;
}
.box1{
    flex-basis: max-content;
}

效果：

?
?

屬性 `flex-shrink`

MDN：指定了 flex 元素的收縮規(guī)則各薇。flex 元素僅在默認(rèn)寬度之和大于容器的時(shí)候才會(huì)發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值君躺。負(fù)值是不被允許的峭判。默認(rèn)值 0。

自己的理解：原理同屬性 flex-grow相似棕叫。屬性按比例分配溢出父元素的空間林螃。如果設(shè)置了屬性 flex-wrap 屬性值 wrap，那么 flex-shrink 會(huì)失效俺泣。

語(yǔ)法：

flex-grow = 
  <number [0,∞]>

示例：未設(shè)置 `flex-shrink`屬性疗认，且子元素共超出父元素 100px的寬度空間。

.css
#content{
    width: 500px; 
    padding: 0px;
    border: 2px solid black;
    align-items: center;
    display: flex;
    justify-content: space-around;
}
.box{
    flex-basis: 120px;
}

效果：

示例1：設(shè)置 .box 的屬性 `flex-shrink`屬性伏钠，添加如下代碼横漏。

.box{
    flex-basis: 120px;
}
.box1{
    flex-shrink: 1;
}

效果：

代碼解析：
.box1 收縮了全部溢出的寬度 100px 剩余 20px ，下面的紅色方塊就是 20px 的寬度熟掂。

?
?

屬性 `align-self`

用于單獨(dú) 設(shè)置 彈性元素 (flex項(xiàng)) 在側(cè)軸（縱軸）方向上的對(duì)齊方式缎浇。
align-self 會(huì)對(duì)齊當(dāng)前 grid 或 flex 行中的元素，并覆蓋已有的 align-items的值赴肚。

語(yǔ)法：

align-self = 
  auto                                  |
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

取值：

auto：繼承父元素的 align-items 的屬性值素跺。如果其沒(méi)有父元素，則值為stretch尊蚁。
center：flex 元素會(huì)對(duì)齊到 cross-axis 的中間亡笑，如果該元素的 cross-size 尺寸大于 flex 容器，將在兩個(gè)方向均等溢出横朋。
flex-start：flex 元素會(huì)對(duì)齊到 cross-axis 的首端仑乌。專(zhuān)門(mén)為了彈性布局而開(kāi)發(fā)的屬性。
- start：效果同 flex-start琴锭。
- self-start：效果同 flex-start晰甚。
flex-end：flex 元素會(huì)對(duì)齊到 cross-axis 的尾端。專(zhuān)門(mén)為了彈性布局而開(kāi)發(fā)的屬性决帖。
- end：效果同 flex-end厕九。
- self-end：效果同 flex-end。
stretch：默認(rèn)值地回。元素被拉伸以適應(yīng)容器扁远，但同時(shí)會(huì)遵照min/max-width/height屬性的限制俊鱼。
baseline：元素被定位到容器的基線。側(cè)軸起點(diǎn)到元素基線距離最大的元素將會(huì)于側(cè)軸起點(diǎn)對(duì)齊以確定基線畅买。
- first baseline
- last baseline

示例1：設(shè)置 `algin-self` 屬性為 center

.html

.css
#content{
    width: 300px; 
    height: 50px;
    padding: 0px;
    border: 2px solid black;
    display: flex;
}   
.box{
    flex-basis: 50px;
}
.box1{
    align-self: center;
}
.box2{
    height: 30px;
    align-self: center;
}
.box3{
    height: 70px;
    align-self: center;
}

效果：

代碼解析：
子元素設(shè)置了 align-self屬性后并闲，元素不再填充滿(mǎn) 父元素。

示例2：`flex-start`谷羞、`start`帝火、`self-start`

.box1{
    align-self: flex-start;
}
.box2{
    align-self: self-start;
}
.box3{
    align-self: start;
}

單行效果：

換行效果：

示例3：`flex-end`、`end`湃缎、`self-end`

.box1{
    align-self: flex-end;
}
.box2{
    align-self: self-end;
}
.box3{
    align-self: end;
}

效果：

示例4：`stretch`

.box1{
    align-self: stretch;
}
.box2{
    height: 20px;
    align-self: stretch;
}
.box3{
    height: 70px;
    align-self: stretch;
}

效果：

示例5：`basline`犀填、`first baseline`、`last baseline`

.box1{
    font-size: 10px;
    align-self: baseline;
}
.box2{
    font-size: 15px;
    align-self: baseline;
}
.box3{
    font-size: 20px;
    align-self: baseline;
    
}
.box4{
    font-size: 25px;
    align-self: baseline;
}
.box5{  
    font-size: 30px;
    align-self: baseline;
}

效果：

代碼解析：
不同的flex項(xiàng) 設(shè)置不同的字體大小時(shí)嗓违，first baseline ｜ baseline 會(huì)在縱軸首端進(jìn)行基線的對(duì)齊九巡。
不同的flex項(xiàng) 設(shè)置不同的字體大小時(shí)，lase baseline 會(huì)在縱軸尾端進(jìn)行基線的對(duì)齊蹂季。
不同的flex項(xiàng) 設(shè)置相同的字體大小時(shí)比庄，lase baseline 效果同 flex-end；first baseline ｜ baseline 效果同 flex-start乏盐。

?
?

屬性 `align-items`

用于統(tǒng)一設(shè)置 彈性元素 (flex項(xiàng)) 在側(cè)軸（縱軸、交叉軸）方向上的對(duì)齊方式制恍。
行排列父能。

語(yǔ)法，取值净神，示例同 align-self何吝。

屬性 `align-content`

當(dāng)交叉軸上有可用的空間，且容器內(nèi)有多行的項(xiàng)目時(shí)鹃唯，才可以對(duì)齊容器內(nèi)的各項(xiàng)（垂直）爱榕。

語(yǔ)法：

align-content = 
  normal                                   |
  <baseline-position>                      |
  <content-distribution>                   |
  <overflow-position>? <content-position>  

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<content-distribution> = 
  space-between  |
  space-around   |
  space-evenly   |
  stretch        

<overflow-position> = 
  unsafe  |
  safe    

<content-position> = 
  center      |
  start       |
  end         |
  flex-start  |
  flex-end

取值：

normal：這些項(xiàng)按默認(rèn)位置填充，就像沒(méi)有設(shè)置對(duì)齊內(nèi)容值一樣坡慌。
flex-start：所有行從垂直軸起點(diǎn)開(kāi)始填充黔酥。剩余空間，全部堆砌到容器的下面洪橘。
- start：同 flex-start跪者。
flex-end：所有行從垂直軸終點(diǎn)開(kāi)始填充。剩余空間熄求，全部堆砌到容器的上面渣玲。
- end：同 flex-end。
center：所有行朝向容器的中心填充弟晚。剩余空間忘衍，全部平均的堆砌到容器的上面和下面逾苫。
space-between：所有行在容器中平均分布。相鄰兩行間距相等枚钓。容器的垂直軸起點(diǎn)邊和終點(diǎn)邊分別與第一行和最后一行的邊對(duì)齊铅搓。
space-around：所有行在容器中平均分布，相鄰兩行間距相等秘噪。容器的垂直軸起點(diǎn)邊和終點(diǎn)邊分別與第一行和最后一行的距離是相鄰兩行間距的一半狸吞。
space-evenly：所有行沿垂直軸均勻分布在對(duì)齊容器內(nèi)。
stretch：均勻分布項(xiàng)目指煎，拉伸‘自動(dòng)’ - 大小的項(xiàng)目以充滿(mǎn)容器

示例1：`flex-start`蹋偏、`start`

#content1{
    flex-flow: row wrap; 
    // flex-flow: stretch; 默認(rèn)值
}
#content2{
    flex-flow: row wrap; 
    align-content: flex-start;
}
#content3{
    flex-flow: row wrap; 
    align-content: start; 
}

效果：

示例2：`flex-end`、`end`

#content1{
    flex-flow: row wrap; 
    // flex-flow: stretch; 默認(rèn)值
}
#content2{
    flex-flow: row wrap; 
    align-content: flex-end;
}
#content3{
    flex-flow: row wrap; 
    align-content: end; 
}

效果：

示例3：`center`

#content1{
    flex-flow: row wrap; 
    // flex-flow: stretch; 默認(rèn)值
}
#content2{
    flex-flow: row wrap; 
    align-content: center;
}

效果：

示例4：`space-between`至壤、`space-around`威始、`space-evenly`

#content1{
    flex-flow: row wrap; 
    align-content: space-between;
}
#content2{
    flex-flow: row wrap; 
    align-content: space-around;
}
#content3{
    flex-flow: row wrap; 
    align-content: space-evenly; 
}

效果：

align-self、align-items像街、align-content黎棠，
還有safe、unsafe镰绎、safe脓斩、normal等值，沒(méi)有研究出來(lái)畴栖，有懂的小伙伴可以在評(píng)論區(qū)分享一下随静。

?
?

屬性 `justify-content`

定義順著彈性容器主軸 (或者網(wǎng)格行軸) ，如何分配元素之間及其周?chē)目臻g吗讶。

語(yǔ)法：

justify-content = 
  normal                                              |
  <content-distribution>                              |
  <overflow-position>? [ <content-position> | left | right ]  

<content-distribution> = 
  space-between  |
  space-around   |
  space-evenly   |
  stretch        

<overflow-position> = 
  unsafe  |
  safe    

<content-position> = 
  center      |
  start       |
  end         |
  flex-start  |
  flex-end

語(yǔ)法示例：

/* Positional alignment */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* 從行首起始位置開(kāi)始排列 */
justify-content: flex-end;   /* 從行尾位置開(kāi)始排列 */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

/* Baseline alignment */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* Distributed alignment */
justify-content: space-between;  /* 均勻排列每個(gè)元素
                                   首個(gè)元素放置于起點(diǎn)燎猛，末尾元素放置于終點(diǎn) */
justify-content: space-around;  /* 均勻排列每個(gè)元素
                                   每個(gè)元素周?chē)峙湎嗤目臻g */
justify-content: space-evenly;  /* 均勻排列每個(gè)元素
                                   每個(gè)元素之間的間隔相等 */
justify-content: stretch;       /* 均勻排列每個(gè)元素
                                   'auto'-sized 的元素會(huì)被拉伸以適應(yīng)容器的大小 */

/* Overflow alignment */
justify-content: safe center;
justify-content: unsafe center;

/* Global values */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

取值：

center：元素向每行中點(diǎn)排列。
flex-start：從行首開(kāi)始排列照皆。
- start：從行首開(kāi)始排列重绷。
flex-end：從行尾開(kāi)始排列。
- end：從行尾開(kāi)始排列膜毁。
stretch：如果元素的組合尺寸小于對(duì)齊容器的尺寸昭卓，那么所有自動(dòng)設(shè)置大小的元素的尺寸都會(huì)等量(而不是按比例)增加，同時(shí)仍然遵守max-height/max-width的約束(或類(lèi)似的功能)瘟滨，這樣組合尺寸就會(huì)沿著主軸完全填充對(duì)齊容器葬凳。
space-between：均勻排列每個(gè)元素，首個(gè)元素放置于起點(diǎn)室奏，末尾元素放置于終點(diǎn)火焰。
space-around：均勻排列每個(gè)元素，每個(gè)元素周?chē)峙湎嗤目臻g胧沫。
space-evenly：均勻排列每個(gè)元素昌简，每個(gè)元素之間的間隔相等占业。

示例1：`center`

#content1{
    flex-flow: row nowrap; 
    justify-content: center;
}
#content2{
    flex-flow: row wrap; 
    justify-content: center;
}

效果：

示例2：`flex-start`、`start` 纯赎、`left`

#content1{
    flex-flow: row nowrap; 
    justify-content: flex-start;
}
#content2{
    flex-flow: row wrap; 
    justify-content: flex-start;
}
#content3{
    flex-flow: row wrap; 
    justify-content: start;
}

效果：

示例3：`flex-end`键痛、`end`冰抢、`right`

#content1{
    flex-flow: row nowrap; 
    justify-content: flex-end;
}
#content2{
    flex-flow: row wrap; 
    justify-content: flex-end;
}
#content3{
    flex-flow: row wrap; 
    justify-content: end;
}

效果：

示例4：`stretch`

#content1{
    flex-flow: row nowrap; 
    justify-content: stretch;
}
#content2{
    flex-flow: row wrap; 
    justify-content: stretch;
}
.box{
    flex=basis: 60px;
}
.boxx{
    flex=basis: 60px;
}

效果：

在多行的容器內(nèi)凳谦，感覺(jué)沒(méi)啥效果驹尼。

示例5：`space-between`

#content1{
    flex-flow: row nowrap; 
    justify-content: space-between;
}
#content2{
    flex-flow: row wrap; 
    justify-content: space-between;
}

效果：

示例6：`space-around`、`space-evenly`

#content1{
    flex-flow: row nowrap; 
    justify-content: space-around;
}
#content2{
    flex-flow: row wrap; 
    justify-content: space-around;
}

效果：

示例7：`space-evenly`

#content1{
    flex-flow: row nowrap; 
    justify-content: space-evenly;
}
#content2{
    flex-flow: row wrap; 
    justify-content: space-evenly;
}

效果：

?
?

屬性 `justify-items`晚顷、`justify-self`

justify-items：為所有盒中的項(xiàng)目定義了默認(rèn)的 justify-self 峰伙，可以使這些項(xiàng)目以默認(rèn)方式沿主軸線對(duì)齊到每個(gè)盒子。

justify-self：使單個(gè) 盒中的項(xiàng)目以默認(rèn)方式沿主軸線對(duì)齊到每個(gè)盒子该默。

該屬性的作用效果取決于我們使用的布局模式：

在塊級(jí)布局中瞳氓，會(huì)將其包含的項(xiàng)目在其行內(nèi)軸上對(duì)齊；

絕對(duì)定位的元素中栓袖，會(huì)將其包含的項(xiàng)目在其行內(nèi)軸上對(duì)齊匣摘，同時(shí)考慮 top、left裹刮、bottom音榜、right 的值；

表格單元中捧弃，該屬性被忽略囊咏；

彈性盒子布局中，該屬性被忽略塔橡；

柵格布局中，會(huì)將其柵格區(qū)域內(nèi)的項(xiàng)目在其行內(nèi)軸上對(duì)齊霜第；

?
?

flex項(xiàng)排序

：彈性盒子也有可以改變 flex 項(xiàng)的布局位置的功能葛家，而不會(huì)影響到源順序（即 dom 樹(shù)里元素的順序）。這也是傳統(tǒng)布局方式很難做到的一點(diǎn)泌类。

屬性 `order`

規(guī)定了彈性容器中的可伸縮項(xiàng)目在布局時(shí)的順序癞谒。元素按照 order 屬性的值的增序進(jìn)行布局。擁有相同 order 屬性值的元素按照它們?cè)谠创a中出現(xiàn)的順序進(jìn)行布局刃榨。

所有 flex 項(xiàng)默認(rèn)的 order 值是0弹砚。

語(yǔ)法：

order = 
  <integer>

示例：

.item1{
    order: 5;
}
.item2{
    order: 4;
}
.item3{
    order: 3;
}
.item4{
    order: 2;
}
.item5{
    order: 1;
}

效果：

?
?

flex 嵌套

彈性盒子也能創(chuàng)建一些頗為復(fù)雜的布局。設(shè)置一個(gè)元素為 flex 項(xiàng)枢希，那么他同樣成為一個(gè) flex 容器桌吃，它的孩子（直接子節(jié)點(diǎn)）也表現(xiàn)為彈性盒子。

示例：

參考嵌套彈性盒子

?
?

屬性值 `flex`與`inline-flex`的區(qū)別

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

一句話(huà)來(lái)描述就是當(dāng)Flex Box 容器沒(méi)有設(shè)置寬度大小限制時(shí)逗物，當(dāng)display 指定為 flex 時(shí)，F(xiàn)lexBox 的寬度會(huì)填充父容器瑟俭，當(dāng)display指定為 inline-flex 時(shí)翎卓，F(xiàn)lexBox的寬度會(huì)包裹flex Item。

inlein-flex效果：

flex效果：

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

人面猴
序言：七十年代末摆寄，一起剝皮案震驚了整個(gè)濱河市失暴，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌微饥，老刑警劉巖逗扒，帶你破解...
沈念sama閱讀 218,941評(píng)論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異畜号，居然都是意外死亡缴阎，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,397評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)简软，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蛮拔，“玉大人，你說(shuō)我怎么就攤上這事痹升〗牛” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 165,345評(píng)論 0贊 356
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵疼蛾，是天一觀的道長(zhǎng)肛跌。經(jīng)常有香客問(wèn)我，道長(zhǎng)察郁，這世上最難降的妖魔是什么衍慎？我笑而不...
開(kāi)封第一講書(shū)人閱讀 58,851評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮皮钠，結(jié)果婚禮上稳捆，老公的妹妹穿的比我還像新娘。我一直安慰自己麦轰，他們只是感情好乔夯，可當(dāng)我...
茶點(diǎn)故事閱讀 67,868評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著款侵，像睡著了一般末荐。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上新锈，一...
開(kāi)封第一講書(shū)人閱讀 51,688評(píng)論 1贊 305
城市分裂傳說(shuō)
那天甲脏，我揣著相機(jī)與錄音，去河邊找鬼。笑死剃幌，一個(gè)胖子當(dāng)著我的面吹牛聋涨，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播负乡，決...
沈念sama閱讀 40,414評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼牍白，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了抖棘？” 一聲冷哼從身側(cè)響起茂腥，我...
開(kāi)封第一講書(shū)人閱讀 39,319評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎切省，沒(méi)想到半個(gè)月后最岗，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,775評(píng)論 1贊 315
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡朝捆，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,945評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年般渡，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片芙盘。...
茶點(diǎn)故事閱讀 40,096評(píng)論 1贊 350
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡驯用，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出儒老，到底是詐尸還是另有隱情蝴乔，我是刑警寧澤，帶...
沈念sama閱讀 35,789評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布驮樊，位于F島的核電站薇正，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏囚衔。R本人自食惡果不足惜挖腰，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,437評(píng)論 3贊 331
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望练湿。院中可真熱鬧猴仑，春花似錦、人聲如沸鞠鲜。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 31,993評(píng)論 0贊 22
一樁弒父案断国，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)贤姆。三九已至，卻和暖如春稳衬，著一層夾襖步出監(jiān)牢的瞬間霞捡，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,107評(píng)論 1贊 271
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工薄疚，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留碧信，地道東北人赊琳。一個(gè)月前我還...
沈念sama閱讀 48,308評(píng)論 3贊 372
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像砰碴，于是被迫代替她去往敵國(guó)和親躏筏。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,037評(píng)論 2贊 355

CSS - 布局 - display:flex / inline-flex - 彈性盒子布局

彈性盒子布局模型

示例1: 正常流布局

示例2: 彈性盒子布局 修改 display的值 為flex

flex 模型的概念說(shuō)明

屬性 flex-direction 決定彈性盒子內(nèi)部項(xiàng)的方向哗戈。

語(yǔ)法：

取值：

屬性 flex-wrap 換行 處理溢出的布局

語(yǔ)法：

取值

示例：

屬性 flex-flow 簡(jiǎn)寫(xiě)屬性

語(yǔ)法：

屬性 flex 增大解藻，縮小

語(yǔ)法：

取值：

單值語(yǔ)法:

雙值語(yǔ)法:

三值語(yǔ)法:

屬性 flex-grow

語(yǔ)法：

示例1：所有的flex項(xiàng)的 flex-grow 屬性值 全部為 0，即默認(rèn)值因块，按相同比例分配橘原。

示例2：我們將 .box1 的 flex-grow 屬性值 改為 1，添加如下代碼

示例3：我們將 .box1 和 .box2 的 flex-grow 屬性值 改為 1，添加如下代碼

示例4：我們將 .box2 的 flex-grow 屬性值 改為 2温兼，添加如下代碼

示例5：看一下 flex項(xiàng) 換行之后咒唆，修改 flex-grow屬性届垫，會(huì)是什么效果，添加如下代碼

屬性 flex-basis

語(yǔ)法：

語(yǔ)法示例：

取值：

示例：

屬性 flex-shrink

語(yǔ)法：

示例：未設(shè)置 flex-shrink屬性疗认，且 子元素 共 超出 父元素 100px的寬度 空間。

示例1：設(shè)置 .box 的 屬性 flex-shrink屬性伏钠，添加如下代碼横漏。

屬性 align-self

語(yǔ)法：

取值：

示例1：設(shè)置 algin-self 屬性 為 center

示例2：flex-start谷羞、start帝火、self-start

示例3：flex-end、end湃缎、self-end

示例4：stretch

示例5：basline犀填、first baseline、last baseline

屬性 align-items

屬性 align-content

語(yǔ)法：

取值：

示例1：flex-start蹋偏、start

示例2：flex-end、end

示例3：center

示例4：space-between至壤、space-around威始、space-evenly

屬性 justify-content

語(yǔ)法：

語(yǔ)法示例：

取值：

示例1：center

示例2：flex-start、start 纯赎、left

示例3：flex-end键痛、end冰抢、right

示例4：stretch

示例5：space-between

示例6：space-around、space-evenly

示例7：space-evenly

屬性 justify-items晚顷、justify-self

flex項(xiàng)排序

屬性 order

語(yǔ)法：

示例：

flex 嵌套

示例：

屬性值 flex與inline-flex的區(qū)別

推薦閱讀更多精彩內(nèi)容

示例2: 彈性盒子布局修改 `display`的值為`flex`

屬性 `flex-direction` 決定彈性盒子內(nèi)部項(xiàng)的方向哗戈。

屬性 `flex-wrap` 換行處理溢出的布局

屬性 `flex-flow` 簡(jiǎn)寫(xiě)屬性

屬性 `flex` 增大解藻，縮小

屬性 `flex-grow`

示例1：所有的flex項(xiàng)的 `flex-grow` 屬性值全部為 `0`，即默認(rèn)值因块，按相同比例分配橘原。

示例2：我們將 .box1 的 `flex-grow` 屬性值改為 `1`，添加如下代碼

示例3：我們將 .box1 和 .box2 的 `flex-grow` 屬性值改為 `1`，添加如下代碼

示例4：我們將 .box2 的 `flex-grow` 屬性值改為 `2`温兼，添加如下代碼

示例5：看一下 flex項(xiàng) 換行之后咒唆，修改 `flex-grow`屬性届垫，會(huì)是什么效果，添加如下代碼

屬性 `flex-basis`

屬性 `flex-shrink`

示例：未設(shè)置 `flex-shrink`屬性疗认，且子元素共超出父元素 100px的寬度空間。

示例1：設(shè)置 .box 的屬性 `flex-shrink`屬性伏钠，添加如下代碼横漏。

屬性 `align-self`

示例1：設(shè)置 `algin-self` 屬性為 center

示例2：`flex-start`谷羞、`start`帝火、`self-start`

示例3：`flex-end`、`end`湃缎、`self-end`

示例4：`stretch`

示例5：`basline`犀填、`first baseline`、`last baseline`

屬性 `align-items`

屬性 `align-content`

示例1：`flex-start`蹋偏、`start`

示例2：`flex-end`、`end`

示例3：`center`

示例4：`space-between`至壤、`space-around`威始、`space-evenly`

屬性 `justify-content`

示例1：`center`

示例2：`flex-start`、`start` 纯赎、`left`

示例3：`flex-end`键痛、`end`冰抢、`right`

示例4：`stretch`

示例5：`space-between`

示例6：`space-around`、`space-evenly`

示例7：`space-evenly`

屬性 `justify-items`晚顷、`justify-self`

屬性 `order`

屬性值 `flex`與`inline-flex`的區(qū)別