資訊專欄INFORMATION COLUMN
摘要：的屬性采用布局的元素，稱為容器，簡(jiǎn)稱容器它的所有子元素自動(dòng)成為容器成員，稱之為項(xiàng)目簡(jiǎn)稱項(xiàng)目容器默認(rèn)存在兩根軸水平主軸和垂直的交叉軸。子項(xiàng)在容器的當(dāng)前行側(cè)軸縱軸方向上的對(duì)齊方式對(duì)影響與交叉點(diǎn)的起點(diǎn)對(duì)齊。負(fù)值對(duì)該屬性無(wú)效。
CSS3 彈性盒子(Flexible Box 或 Flexbox)，彈性框布局，它具有定義一個(gè)可伸縮項(xiàng)目的能力。
flex元素可以根據(jù)flex-grow因子拉伸以填充可用空間，或根據(jù)flex-shrink因子收縮以防止溢出。
當(dāng)不使用浮動(dòng)，且彈性容器的外邊距也不需要與其內(nèi)容的外邊距合并時(shí)，彈性盒子模型比起方框模型要好一些。
基本布局模塊：塊布局，內(nèi)聯(lián)布局，表格布局，定位布局。
使用彈性框布局功能，可以更加輕松地設(shè)計(jì)復(fù)雜網(wǎng)頁(yè)布局，并且可以在屏幕和瀏覽器窗口大小發(fā)生改變時(shí)進(jìn)行調(diào)整以保持元素的相對(duì)位置和大小。
flex作用
彈性框可減少對(duì)浮動(dòng)（display屬性 + position屬性 + float屬性）和 表格布局 等各種布局方式的依賴。
flex布局可簡(jiǎn)化的操作
構(gòu)建這樣一種布局，即使屏幕和瀏覽器窗口大小發(fā)生改變可靈活調(diào)整，但包含彼此的相對(duì)位置和大小保持不變的元素。（如圖像和控件）
指定如何沿著一系列元素的水平軸或垂直軸重新分配多余空間，從而增加給定元素的大小。
指定如何沿著一系列元素的布局軸將多余空間重新分配到一系列元素之前，之后或之間。
指定如何將某個(gè)元素布局軸垂直方向的多余空間。（例如，已并排布局的按鈕上方或下方的多余空間） 移動(dòng)到該元素的周圍。
控制元素在頁(yè)面上的視覺方向(例如，從上到下，從左到右，從右到左或從下到上),無(wú)需調(diào)整指定的writing-mode.
按照不同文檔對(duì)象模型 （DOM）所指定的排序方式，對(duì)屏幕上的元素重新排序。
writing-mode屬性：
span {
width: 100px;
height: 100px;
background: chocolate;
writing-mode: horizontal-tb; /* 默認(rèn)屬性 */
writing-mode: vertical-lr; /* 行內(nèi)元素變?yōu)閴K級(jí)元素，垂直顯示 左邊 */
writing-mode: vertical-rl; /* 行內(nèi)元素變?yōu)閴K級(jí)元素，垂直顯示 右邊 */
}
兼容性
IOS 可以使用最新的flex布局
android4.4以下，只能兼容舊版的flexbox布局
android4.4及以上，可以使用最新的的flexbox布局
flex布局任何容器都可以指定flex屬性。
要啟用彈性框布局，需要首先創(chuàng)建一個(gè)彈性容器。彈性容器構(gòu)成一個(gè)包容塊，用于容納其它內(nèi)容(彈性項(xiàng)目)。
使用display屬性將值指定為：flex 或者 inline-flex.設(shè)置完Flex屬性以后，子元素的float，clear和vertical-align屬性將失效
將 display 設(shè)置為 flex 會(huì)導(dǎo)致元素的行為類似于塊級(jí)的彈性容器框。塊級(jí)彈性容器框會(huì)占用其父容器的完整寬度。將 display 設(shè)置為 inline-flex 會(huì)使元素的行為類似于內(nèi)聯(lián)級(jí)彈性容器框，僅占用其所需的最低空間量，同時(shí)也不強(qiáng)加新行。
flex (new)
display: flex; display: inline-flex; display: -webkit-flex;
flex (old)
display: -webkit-box; display: -moz-box; display: -ms-box;Container的屬性
采用flex布局的元素，稱為flex容器(flex container)，簡(jiǎn)稱"容器". 它的所有子元素自動(dòng)成為容器成員，稱之為flex項(xiàng)目(flex item), 簡(jiǎn)稱"項(xiàng)目".
容器默認(rèn)存在兩根軸：水平主軸（main axis）和垂直的交叉軸（cross axis）。
主軸開始的位置（與邊框的交叉點(diǎn)）叫做（main start），結(jié)束位置叫做（main ned）。
交叉軸的開始位置叫做（cross start）結(jié)束位置（cross end）。
項(xiàng)目默認(rèn)沿著主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做（main size），占據(jù)的交叉軸空間叫做（cross size）
6個(gè)容器上的屬性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-directionflex-direction屬性決定主軸的方向（即item的排列方向）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row(默認(rèn)值) ： 主軸為水平方向，起點(diǎn)在左端。
row-reverse: 主軸為水平方向，起點(diǎn)在右端。
column: 主軸為垂直方向，起點(diǎn)在上沿。
column-reverse: 主軸為垂直方向，起點(diǎn)在下沿。
order 屬性
flex-wrap
默認(rèn)情況下，itme都排在一條線(軸線)上。flex-wrap屬性定義，如果一條軸線排列不下，如何換行。
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-wrap: nowrap;： 默認(rèn)不換行
flex-wrap: wrap;: 換行第一行在上方
flex-wrap: wrap-reverse;: 換行，第一行在下方.
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;flex-flow
flex-flow屬性是flew-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式.默認(rèn)值為:row nowrap
.box {
flex-flow: || ;
}
flex-flow: row-reverse wrap;
同時(shí)具有 row-reverse: 主軸為水平方向，起點(diǎn)在右端 和 flex-wrap: wrap: 換行第一行在上方
justify-contentjustify-content屬性定義了item 在主軸上的對(duì)齊方式.
.box {
justify-content：flex-start | flex-end | center | space-between | space-around
}
flex-start: 行起始位置對(duì)齊。
flex-end: 行結(jié)束位置對(duì)齊。
space-between: 平均分布，起始位置。
space-around: 平均分布，終點(diǎn)加上自身位置。
center: 向行中間位置對(duì)齊。
justify-content: flex-start
a
b
c
justify-content: flex-end
a
b
c
justify-content: space-between
a
b
c
justify-content: space-around
a
b
c
justify-content: center
a
b
c
align-items
align-items flex子項(xiàng)在flex容器的當(dāng)前行側(cè)軸(縱軸)方向上的對(duì)齊方式.
對(duì)padding影響.
align-items：flex-start | flex-end | center | baseline | stretch
flex-start: 與交叉點(diǎn)的起點(diǎn)對(duì)齊。
flex-end: 與交叉點(diǎn)的終點(diǎn)對(duì)齊。
center: 與交叉點(diǎn)的中點(diǎn)對(duì)齊。
space-between: 與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。
space-around: 每根軸線兩側(cè)的間隔都相等。
stretch(默認(rèn)值): 將軸線占滿這個(gè)交叉軸。
align-items: flex-start
a
b
c
align-items: flex-end
a
b
c
align-items: baseline
a
b
c
align-items: stretch
a
b
c
align-items: center
a
b
c
align-content
align-content: 屬性定義了多根軸線的對(duì)齊方式。如果item只有一根軸線，該屬性不起作用。
align-content: flex-start | flex-end | center | space-between | spce-around | stretch
flex-start: 與交叉軸的起點(diǎn)對(duì)齊
flex-end: 與交叉軸的終點(diǎn)對(duì)齊
center: 與交叉軸的中點(diǎn)對(duì)齊
space-between: 與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。
space-around: 每根軸線兩側(cè)的間隔都相等。
6個(gè)屬性設(shè)置在Item上。
order
flex-grow
flex-shrink
flex-basis
flex
align-self
orderorder屬性定義Item的排列順序。 數(shù)值越小，排列越靠前。 默認(rèn)為0.
flex-grow
flex-grow屬性定義Item的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
子級(jí)中的元素將按照比例占滿父級(jí)的width.
如果所有Item的flex-grow屬性都為1，則它們將等分剩余空間(如果有的話)。
如果一個(gè)Item的flex-grow屬性為2，其它Item都未1，則前者占據(jù)的剩余空間將比其它多一倍.
flex-shrink
flex-shrink屬性定義了Item的縮小比例。默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。
負(fù)值對(duì)該屬性無(wú)效。
flex-basis
設(shè)置
flex-basis:| auto; /* default auto */
flex-basis屬性定義了在分配多余空間之前，Item占據(jù)的主軸(main size)。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。默認(rèn)為auto，即Item本來(lái)的大小。
可以為跟width或height屬性一樣的值(比如：400px),則Item將占滿固定空間。
flex
flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
flex屬性是flex-grow,flex-shrink和flex-basis的簡(jiǎn)寫。默認(rèn)值為： 0 1 auto. 后兩個(gè)屬性可選。
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)
align-self
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
align-self屬性允許單個(gè)item有與其它item不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto,標(biāo)識(shí)繼承父元素的align-items屬性，如果沒有父元素，則等同于strecth
該屬性可能取6個(gè)值，除了auto，其它都與align-items屬性完全一致。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/115466.html
閱讀 1826·2021-11-23 09:51
閱讀 947·2021-10-08 10:05
閱讀 3431·2021-09-26 09:55
閱讀 1039·2021-09-22 15:21
閱讀 1633·2021-09-09 09:33
閱讀 1265·2019-08-30 15:56
閱讀 1285·2019-08-30 15:55
閱讀 969·2019-08-30 13:19
