這篇文章給大家聊聊關于flex布局常用屬性，以及flex彈性布局樣式字體如何實現對應的知識點，希望對各位有所幫助，不要忘了收藏本站哦。

css中基本布局

css中基本的布局方式有以下幾種：

1、靜態布局

最傳統的布局方式，網頁中所有尺寸都是由px作為單位，設置了min-width,如果寬度小于就會出現滾動條，如果大于這個寬度則內容居中外加背景

2、自適應布局

可以看成是不同屏幕下由多個靜態布局組成的。自適應布局是為不同的屏幕分辨率分別定義不同的布局。改變屏幕分辨率可以切換不同的靜態布局（頁面元素位置可能發生改變），但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。

自適應布局頁面里面元素的位置會變化，很好的解決了流式布局中的大屏空間利用率不高弊端。屏幕分辨率變化時，頁面里面元素的位置會變化而大小不會變化。

3、流式布局(又別名百分比布局%)

網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用),分別為不同的屏幕設置布局格式，當屏幕大小改變時，會出現不同的布局。

意思就是在這個屏幕下這個元素塊在這個地方，但是在那個屏幕下，這個元素塊又會出現在那個地方。只是布局改變，元素不變。可以看成是不同屏幕下由多個靜態布局組成的。

4、響應式布局：媒體查詢

通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。屏幕尺寸不一樣展示給用戶的網頁內容也不一樣.利用媒體查詢可以檢測到屏幕的尺寸(主要檢測寬度)，并設置不同的CSS樣式，就可以實現響應式的布局。主要依靠是css的媒體查詢。

每個屏幕分辨率下面會有一個布局樣式，即元素位置和大小都會變。

5、彈性布局(rem/emflex布局)

html中flex布局在什么時候用

flex布局在使用彈性布局的時候可以使用。

flex布局怎么讓盒子垂直水平居中

我們這里分為兩種形式，一種是定元素寬高的情況下，另一種是不定元素寬高的情況下。

定元素寬高的情況下

a.絕對定位+負margin

利用絕對定位absolute和margin完成元素居中，具體例子如下：

給父元素添加相對定位，子元素添加絕對定位，利用margin負子元素寬高的一半，實現元素的居中，這種方法不常用，

優點：好理解，兼容性好

缺點：必需給定子元素的寬高

b.絕對定位+margin:auto

利用absolute絕對定位和margin:auto自動居中方法完成元素的居中，例子如下：

與上例子一樣給父元素加相對定位，子元素添加絕對定位，在設置元素的左、右、上、下位置為零，再利用自動居中對齊的方法margin:auto,完成元素的垂直水平居中，這種方法常用

優點：簡單易懂，兼容性好

缺點：代碼量大，占內存

c.table-cell

利用css的table屬性，完成元素的垂直居中，margin完成元素的水平居中，例子如下

設置父元素的元素類型為table-cell類型，設置表格的垂直對齊方式為居中，再給子元素添加margin:0auto完成元素的垂直水平居中，這種方法不常用，

優點：兼容性好

缺點：出來的太早，現在都不流行用了

d.translate

利用2d位移來完成元素的居中，例子如下：

只需操作子元素，給子元素添加transform屬性，利用2d位移translate,分別向左向右移動父元素寬高度減自身寬高度的一半，完成元素的垂直水平對齊，這種方法不常用，

優點：代碼簡單

缺點：我們必須給定子元素的寬和高，否則無法完成元素居中

不定元素寬高的情況下

line-heght

給元素設置line-heght,也就是行高，完成元素的居中，具體例子如下：

我們給子元素設置行高，完成元素的垂直居中，再然后利用文本水平對齊方式text-align方法，完成水平居中，這中方法是最簡單的，也是我們經常用的

優點：寫起來簡單，兼容性好

缺點：只適合單行文本的居中，多行文本不支持

b.絕對定位加translate

之前我們說過一個利用translate完成元素垂直水平的，這里就是在那種方法上的進一步改進，也就是可以，不用設置寬高，也能實現元素的垂直水平居中，用translate加絕對定位完成元素的居中，例子如下：

在這里，還有不同就是，我們translate里面可以直接用百分比完成位移，從而實現元素的垂直水平居中，這種方法常用（但是我不常用）

優點：代碼簡單，兼容性好

缺點：無

c.flex

flex形成彈性盒，我們利用彈性盒可以做很多事情，其中最主要的還是布局，當然這里我們就不詳細說了，我們來談談如何使一個元素垂直水平居中，例子如下：

我們讓父元素形成彈性盒子，再然后設置主軸對齊方式為居中對齊，側軸對齊方式為居中對齊從而完成元素的垂直水平居中，這種方法經常用，

優點：代碼簡單易懂

缺點：PC端兼容性不好

d.flex+margin:auto

這種方法與上面那種不同的是，這里沒用到彈性盒子里面的屬性，而是用margin直接完成元素的居中對齊，例子如下：

讓父元素形成彈性盒子，再然后給子元素添加margin:auto,完成元素的垂直水平居中，這種方法也常用，

CSS3中Flex彈性布局該如何靈活運用

前端愛好者，學習者可關注我，帶你一起學習前端。

其實如何靈活應用Flex布局，那就要先知道它如何布局以及有哪些屬性，說白了就是在一個容器呢把它的子項目均勻的排列在一起，然后再用屬性指定容器內子項目的詳細排列方式。

網頁布局（layout）是CSS的一個重點應用。Flex布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。

基本概念

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

任何一個容器都可以指定為Flex布局。

采用Flex布局的元素，稱為Flex容器（flexcontainer），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flexitem），簡稱”項目”。

容器屬性

1、flex-direction屬性

flex-direction:row|row-reverse|column|column-reverse;

row（默認值）：主軸為水平方向，起點在左端。row-reverse：主軸為水平方向，起點在右端。column：主軸為垂直方向，起點在上沿。column-reverse：主軸為垂直方向，起點在下沿。

2、flex-wrap屬性

flex-wrap:nowrap|wrap|wrap-reverse;

nowrap（默認）：不換行。

wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。

3、flex-flow屬性

flex-flow:<flex-direction><flex-wrap>;

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為rownowrap。

4、justify-content屬性

justify-content屬性定義了項目在主軸上的對齊方式。

justify-content:flex-start|flex-end|center|space-between|space-around;

flex-start（默認值）：左對齊flex-end：右對齊center：居中space-between：兩端對齊，項目之間的間隔都相等。space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

5、align-items屬性

align-items屬性定義項目在交叉軸上如何對齊。

align-items:flex-start|flex-end|center|baseline|stretch;

flex-start：交叉軸的起點對齊。flex-end：交叉軸的終點對齊。center：交叉軸的中點對齊。baseline:項目的第一行文字的基線對齊。stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

6、align-content屬性

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

align-content:flex-start|flex-end|center|space-between|space-around|stretch;

flex-start：與交叉軸的起點對齊。flex-end：與交叉軸的終點對齊。center：與交叉軸的中點對齊。space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。stretch（默認值）：軸線占滿整個交叉軸。項目的屬性

1、order屬性

order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。

order:<integer>;

2、flex-grow屬性

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

flex-grow:<number>;/*default0*

3、flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

flex-shrink:<number>;/*default1*/

4、flex-basis屬性

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

flex-basis:<length>|auto;/*defaultauto*/

5、flex屬性

flex屬性是flex-grow,flex-shrink和flex-basis的簡寫，默認值為01auto。后兩個屬性可選。

flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]

6、align-self屬性

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

align-self:auto|flex-start|flex-end|center|baseline|stretch;

更多的Flex布局應用可到W3C菜鳥教程查看，或者去張大神、阮一峰的博客查看，詳細的很。

更多前端知識關注我，了解更多

簡述五種布局的特點和運用場合

框架布局：所有控件排列在左上角，用于制作特別的控件，初學者使用較少；

線性布局：控件可以按照水平或者垂直方向進行排列，控件排列方式簡單；

絕對布局：可以指定控件擺放的位置，雖然擺放控件很容易，但是不適合多種分辨率和尺寸的屏幕，需要慎用；

相對布局：能夠設定控件之間的相對關系、控件與父容器的相對關系，控件排列方式比較靈活，是常用的布局之一；

表格布局：通過配合使用TableRow可以將控件以表格形式排列。

不能作為flex子元素的屬性有哪些

有float、clear和vertical-align屬性，因為父元素flex布局，子元素的這些屬性不生效。

flex布局常用屬性的介紹就聊到這里吧，感謝你花時間閱讀本站內容，更多關于flex彈性布局樣式字體如何實現、flex布局常用屬性的信息別忘了在本站進行查找哦。