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

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

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

容器的屬性

flex-direction

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

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

flex-wrap

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

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

flex-flow

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

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

justify-content

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

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

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

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

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

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

項目的屬性

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;
}

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

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

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

廣告

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