CSS 浮動(dòng)布局放棄float棘脐，擁抱flex（詳解）

博客說(shuō)明

文章所涉及的資料來(lái)自互聯(lián)網(wǎng)整理和個(gè)人總結(jié)斜筐，意在于個(gè)人學(xué)習(xí)和經(jīng)驗(yàn)匯總，如有什么地方侵權(quán)蛀缝，請(qǐng)聯(lián)系本人刪除顷链，謝謝！

說(shuō)明

在寫(xiě)前端代碼的時(shí)候屈梁，寫(xiě)一排的float:left, float: right嗤练，最后再來(lái)個(gè)clear:both;有的時(shí)候一旦忘記清除浮動(dòng)榛了，那么頁(yè)面就糊了。

就是吃了float的虧煞抬，代碼寫(xiě)得多霜大，還容易吃虧。所以目光旁移一下革答，看到了flex战坤。

Flex布局

Flex 稱為彈性布局，它為盒狀模型提供了最大的靈活性残拐。任何一個(gè)容器都可以指定為 Flex 布局途茫。使用了flex的元素，稱為flex容器溪食。里面的子元素被稱為項(xiàng)目囊卜，項(xiàng)目的float、clear和vertical-align屬性將失效错沃。

// Flex 布局
.box{
  display: flex;
}


// 行內(nèi)元素使用 Flex 布局
.box{
  display: inline-flex;
}


// Webkit 內(nèi)核的瀏覽器栅组，必須加上`-webkit`前綴
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

容器和項(xiàng)目

既然分為了容器和項(xiàng)目，那么大致就是如下的關(guān)系捎废，主要記錄一下容器屬性和項(xiàng)目屬性笑窜。

image-20210714190524897

容器屬性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction屬性

決定主軸的方向（即項(xiàng)目的排列方向）

取值：row(默認(rèn)) | row-reverse | column | column-reverse

• row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端登疗。
• row-reverse：主軸為水平方向排截，起點(diǎn)在右端。
• column：主軸為垂直方向辐益，起點(diǎn)在上沿断傲。
• column-reverse：主軸為垂直方向，起點(diǎn)在下沿智政。

image-20210713153348588

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

flex-wrap屬性

控制項(xiàng)目是否換行

取值：nowrap(默認(rèn)) | wrap | wrap-reverse

• nowrap（默認(rèn)值）：不換行认罩，等分容器。
• wrap：換行续捂，項(xiàng)目不會(huì)等分容器寬度垦垂，而是根據(jù)自身寬度進(jìn)行排列，如果超出父容器寬度則自然換行牙瓢。
• wrap-reverse：與wrap效果相反劫拗。

image-20210713173029917

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

flex-flow屬性

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

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

justify-content屬性

控制項(xiàng)目在橫軸的對(duì)齊方式

取值：flex-start(默認(rèn)) | flex-end | center | space-between | space-around | space-evenly;

• flex-start（默認(rèn)值）：左對(duì)齊页慷。

• center：居中。

• flex-end：右對(duì)齊。

• space-between：左右兩端對(duì)齊酒繁，即左右兩側(cè)項(xiàng)目都緊貼容器滓彰，且項(xiàng)目之間間距相等。

• space-around：項(xiàng)目之間間距為左右兩側(cè)項(xiàng)目到容器間距的2倍州袒。

• space-evenly：為項(xiàng)目之間間距與項(xiàng)目與容器間距相等揭绑。

image-20210713174909404

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

align-items屬性

控制項(xiàng)目在縱軸排列方式

取值：flex-start | flex-end | center | baseline | stretch(默認(rèn))

• flex-start：交叉軸的起點(diǎn)對(duì)齊。
• flex-end：交叉軸的終點(diǎn)對(duì)齊郎哭。
• center：交叉軸的中點(diǎn)對(duì)齊洗做。
• baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
• stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto彰居，將占滿整個(gè)容器的高度。

image-20210713175802415

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

align-content屬性

控制多行項(xiàng)目的對(duì)齊方式撰筷，如果項(xiàng)目只有一行則不會(huì)起作用

取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默認(rèn));

• flex-start：與交叉軸的起點(diǎn)對(duì)齊陈惰。
• flex-end：與交叉軸的終點(diǎn)對(duì)齊。
• center：與交叉軸的中點(diǎn)對(duì)齊毕籽。
• space-between：與交叉軸兩端對(duì)齊抬闯，軸線之間的間隔平均分布。
• space-around：每根軸線兩側(cè)的間隔都相等关筒。所以溶握，軸線之間的間隔比軸線與邊框的間隔大一倍。
• stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸蒸播。
• space-evenly：為項(xiàng)目之間間距與項(xiàng)目與容器間距相等睡榆。

image-20210713181735105

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

項(xiàng)目屬性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order屬性

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

.item {
  order: <integer>;
}

image-20210713184220502

flex-grow屬性

性定義項(xiàng)目的放大比例包雀，默認(rèn)為0宿崭，即如果存在剩余空間，也不放大才写。

.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink屬性

flex-shrink屬性定義了項(xiàng)目的縮小比例葡兑，默認(rèn)為1，即如果空間不足赞草，該項(xiàng)目將縮小讹堤。flex-shrink屬性為0時(shí)，其他項(xiàng)目都為1房资，則空間不足時(shí)蜕劝，flex-shrink不縮小。

.item {
  flex-shrink: <number>; /* default 1 */
}

flex-basis屬性

默認(rèn)auto時(shí)，項(xiàng)目會(huì)保持默認(rèn)寬度岖沛，或者以width為自身的寬度

如果設(shè)置了flex-basis會(huì)覆蓋widtn屬性暑始。

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex屬性

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

.item {
  flex: none | [ <'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雹姊。

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

感謝

萬(wàn)能的網(wǎng)絡(luò)

菜鳥(niǎo)教程

阮一峰的flex布局

以及勤勞的自己，個(gè)人博客衡楞，GitHub