本篇文章為大家展示了什么是css中Flex布局要素，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供南京網(wǎng)站建設(shè)、南京做網(wǎng)站、南京網(wǎng)站設(shè)計(jì)、南京網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、南京企業(yè)網(wǎng)站模板建站服務(wù)，十年南京做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

flex布局為 "彈性布局"，任何一個(gè)元素都可以通過設(shè)置css屬性 display:flex; webkit內(nèi)核瀏覽器為 display: -webkit-flex;
指定元素為Flex布局。
采用Flex布局的元素，稱之為"容器"(flex container), 它其中的所有的子元素稱之為Flex項(xiàng)目(flex item);

容器的屬性

flex-direction

項(xiàng)目的排列方向 選擇值：row(默認(rèn)值：左到右) |  row-reverse(右到左) | column(上到下) | column-reverse(下到上)

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

flex-wrap

定義項(xiàng)目是否要換行  選擇值： nowrap(默認(rèn)值：不換行) | wrap(換行，第一行在上方) | reverse-wrap(換行,第一行在下方)

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

flex-flow

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

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

justify-content

定義項(xiàng)目在主軸上的對齊方式。選擇值flex-start(默認(rèn)值 左對齊) | flex-end(右對齊) | center(居中) | space-between(兩端對齊) | space-around(每個(gè)項(xiàng)目間隔相等)

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

align-items
  定義項(xiàng)目在交叉軸上如何對齊。選擇值flex-start(交叉軸的起點(diǎn)對齊) | flex-end(交差軸的終點(diǎn)對齊) | center(交叉軸的中點(diǎn)對齊) | baseline(項(xiàng)目的第一行文字的基線對齊) | stretch(項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度)

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

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

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

項(xiàng)目的屬性

order

.item {
  order: <integer>;
}

flex-grow

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

flex-shrink

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

flex-basis

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

flex

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self

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

上述內(nèi)容就是什么是css中Flex布局要素，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁標(biāo)題：什么是css中Flex布局要素
URL分享：http://www.chinadenli.net/article40/joigeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、ChatGPT、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)、網(wǎng)站排名、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)