Flex布局詳解

IT那活兒發布于2023-01-11 13:19 / 1421人閱讀

Flex布局詳解

點擊上方“IT那活兒”公眾號，關注后了解更多內容，不管IT什么活兒，干就完了！！！

Flex布局是什么？

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

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

.demo{
     display: flex;
}

2. 行內元素也可以使用Flex布局

.demo{
     display: inline-flex;
}

3. Webkit內核的瀏覽器，必須加上-webkit前綴

.demo{
     display: -webkit-flex;
     display: flex;
}

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

4. 常見術語

4.1 容器和項目(container / item)；

4.2 主軸與交叉軸(main-axis / cross-axis)；

4.3 起始線(main/cross-start)與結束線（main/cross-end)。

容器 container 的屬性

1. flex-direction 主軸方向

1.1 row（默認值）：主軸為水平方向，起點在左端。

1.2 row-reverse：主軸為水平方向，起點在右端。

1.3 column：主軸為垂直方向，起點在上沿。

1.4 column-reverse：主軸為垂直方向，起點在下沿。

2. flex-wrap主軸一行滿了換行

2.1 nowrap (默認值) 不換行壓縮寬度。

2.2 wrap 換行。

2.3 wrap-reverses 反向換行。

3. flex-flow 1和2的組合

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

.demo {
      flex-flow:  ; // flex-flow:row nowrap;
}

4. justify-content主軸元素對齊方式

4.1 flex-start (默認)靠著main-start對齊//參考常見術語(一般是左方向)。

4.2 flex-end 靠著main-end對齊//參考常見術語(一般是右方向)。

4.3 center 靠著主軸居中對齊//一般就是居中對齊。

4.4 space-between 兩端對齊，靠著容器壁，剩余空間平分。

4.5 space-around 分散對齊，不靠著容器壁，剩余空間在每個項目二側平均分配。

4.6 space-evenly 平均對齊，不靠著容器壁，剩余空間平分。

5. align-items交叉軸元素對齊方式//單行

5.1 flex-start：交叉軸的起點對齊。

5.2 flex-end：交叉軸的終點對齊。

5.3 center：交叉軸的中點對齊。

5.4 baseline: 項目的第一行文字的基線對齊。

5.5 stretch（默認值）伸展：如果項目未設置高度或設為auto，將占滿整個容器的高度。

6. align-content 交叉軸行對齊方式多行（和 justify-content 屬性一樣）

項目的屬性

1. flex-grow 長大

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

2. flex-shrinik 縮小

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

3. align-self覆蓋

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

4. order 排序

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

5. flex-basis 有效寬度

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

END

本文作者：池思敏

本文來源：IT那活兒（上海新炬王翦團隊）

GPU云服務器云服務器 flex布局 flex flex40 flex 教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/129483.html

彈性布局（display:flex;）屬性詳解

摘要：設為布局以后，子元素的和屬性將失效。二基本概念采用布局的元素，稱為容器，簡稱容器。它的所有子元素自動成為容器成員，稱為項目，簡稱項目。如果項目只有一根軸線，該屬性不起作用。四項目的屬性注項目屬性的全面理解較為復雜，可以參考文章一、Flex布局-前言 Flex是Flexible Box的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性,旨在提供一個更有效地布局、對齊方式，并且能夠使容...

wangshijun 2019-08-30 15:55 評論0 收藏0
CSS實例詳解：Flex布局

摘要：本文由云社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下布局是如何解決布局問題。通過對比其他的實現方式，可以看出使用布局可以優雅地實現相同的布局問題。本文由云+社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下Flex布局是如何解決CSS布局問題。一．垂直居中這里同時用非flex布局和flex布局兩種方式來實現，可以對比兩種實現方式...

RobinQu 2019-08-02 13:55 評論0 收藏0
CSS實例詳解：Flex布局

摘要：本文由云社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下布局是如何解決布局問題。通過對比其他的實現方式，可以看出使用布局可以優雅地實現相同的布局問題。本文由云+社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下Flex布局是如何解決CSS布局問題。一．垂直居中這里同時用非flex布局和flex布局兩種方式來實現，可...

Meathill 2019-04-29 15:35 評論0 收藏0
CSS實例詳解：Flex布局

摘要：本文由云社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下布局是如何解決布局問題。通過對比其他的實現方式，可以看出使用布局可以優雅地實現相同的布局問題。本文由云+社區發表本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下Flex布局是如何解決CSS布局問題。一．垂直居中這里同時用非flex布局和flex布局兩種方式來實現，可以對比兩種實現方式...

Magicer 2019-08-30 15:54 評論0 收藏0
flex基礎布局詳解

摘要：系統性的介紹關于布局，也作為自學的一篇文章基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個布局的頁面所具有的元素可分為類。每行第一個元素與行首對齊，每行最后一個元素與行尾對齊。 flex-tutorials 系統性的介紹關于flex布局，也作為自學的一篇文章 flex基礎理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

nemo 2019-08-30 15:53 評論0 收藏0