這篇“flex布局基本語法有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“flex布局基本語法有哪些”文章吧。

堅守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價值觀，專業(yè)網站建設服務10余年為成都小攪拌車小微創(chuàng)業(yè)公司專業(yè)提供成都企業(yè)網站定制營銷網站建設商城網站建設手機網站建設小程序網站建設網站改版，從內容策劃、視覺設計、底層架構、網頁布局、功能開發(fā)迭代于一體的高端網站建設服務。

1.什么是flex布局?

Flex是FlexibleBox的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性.

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

行內元素也可以使用flex布局:.box{display:inline-flex;}

Webkit內核的瀏覽器，必須加上-webkit前綴:.box{display:-webkit-flex;display:flex;}

注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。

2.基本概念

Flex容器(flexcontainer):采用Flex布局的元素,稱為flex容器.

Flex項目(flexitem):flex容器的所有子元素,自動成為容器成員,即flex項目.

容器的兩根軸線:水平的主軸(mainaxis),垂直的交叉軸(crossaxis).

主軸(mainaxis):開始位置->mainstart,結束位置->mainend,項目默認沿主軸排列.

交叉軸(crossaxis):開始位置->crossstart,結束位置->crossend

容器內的單個項目占據的主軸空間叫做->mainsize,交叉軸空間叫做->crosssize

3.FLex屬性

flex屬性分為容器屬性和項目屬性.

容器屬性:flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content

項目屬性:order,flex-grow,flex-shrink,flex-basis,flex,align-self

3.1容器屬性

flex-direction:決定主軸的方向(即項目排列方向)

row:水平方向,從左到右.(默認屬性)

row-reverse:水平方向,從右到左.

column:垂直方向,從上到下.

column-reverse:垂直方向,從下到上.

flex-wrap:規(guī)定一條軸線排不下,如何換行.

nowrap:不換行(默認屬性)

wrap:換行,第一行在上邊

wrap-reverse:換行,第一行在下邊,(只行數(shù)排列相反,單行內依舊從左到右排列,每一行都是).

flex-flow:結合flex-direction和flex-wrap,寫法如下

.box{flex-flow:columnwrap-reverse}

justify-content:定義項目在主軸上的對齊方式

flex-start:左對齊(默認值),項目以主軸的起點對齊

flex-end:右對齊,項目以主軸的終點

center:居中

space-between:兩端對齊,項目之間間隔相等

space-around:每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍

align-items:定義項目在交叉軸的對齊方式(僅單行,多行對齊由align-content定義)

stretch:如果項目未設置高度或設為auto，將占滿整個容器的高度(默認值)

flex-start:從上到下,以交叉軸的起點為基線,向終點延伸

flex-end:從下到上,以交叉軸的終點為基線,向起點延伸

center:交叉軸的中點對齊,項目的中點放在交叉軸的中點上

baseline:以一行中每個項目的第一行文字進行對齊.

align-content:定義了容器內有多行項目時沿交叉軸的對齊方式,如果項目只有一根軸線，該屬性不起作用

stretch:軸線占滿整個交叉軸(每行都有一條軸線),默認屬性

flex-start:以交叉軸的起點對齊

flex-end:以交叉軸的終點對齊

center:以交叉軸的中點對齊

space-between:多行項目在交叉軸上間隔平均分布

space-around:多行項目在交叉軸上兩側的間隔都相等。所以，項目在交叉軸上的間隔比項目與邊框的間隔大一倍

注:justify-content,align-items和align-content是容器的屬性,而不是項目的屬性,是設定一個容器內項目以軸線上的某一位置對齊

3.2項目屬性

order:定義項目的排列順序,數(shù)值越小,排列越靠前.默認值為0,寫法如下

.item{order:5}

flex-grow:定義屬性項目放大比例,默認為1

如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍

flex-shrink:定義項目縮小比例,默認為1

如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小.負值對該屬性無效

flex-basis:定義了在分配多余空間之前，項目占據的主軸空間（mainsize）,瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小

它可以設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間

flex:結合flex-grow,flex-shrink和flex-basis的屬性,默認值為01auto,推薦優(yōu)先使用

該屬性有兩個快捷值：auto(11auto)和none(00auto

align-self:允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性,默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch

該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致

以上就是關于“flex布局基本語法有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：flex布局基本語法有哪些
標題來源：http://chinadenli.net/article48/gsgdep.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站建設、網站設計公司、App設計、外貿建站、網站策劃、用戶體驗

廣告

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