圖解CSS3-flex布局

Freeman 發布于2019-04-23 11:42 / 725人閱讀

摘要：前言前言最近筆者在復習以前基礎知識，發現很多細的知識點還是需要重新再總結一番。第一個子元素和最后一個子元素與邊框也會有一定的距離。同時也歡迎大家在上和我一起進階前端。找到我找到我知乎

前言

最近筆者在復習以前基礎知識，發現很多細的知識點還是需要重新再總結一番。本文對flex布局進行圖解說明，以后忘了的同學可以隨時過來查看，歡迎轉載，煩請注明出處。

主體

萬丈高樓平地起，熟悉flex，先來了解下以下7種css屬性

display: flex;
/* 設置父級元素flex模式 */

flex-direction: column;
/* 設置子級元素排列方式，主軸是哪一根（橫/豎） */

flex-wrap: wrap;
/* 決定子級元素一行排列不下時，是否換行 */

flex-flow: row nowrap;
/* flex-direction和flex-wrap的綜合體 */

justify-content: center;
/* 項目在主軸上的對齊方式 */

align-items: center;
/* 項目在側軸上的對齊方式 */

align-content: space-between;
/* 多行項目的對齊方式 */

下面我們就對每個屬性進行詳細的探討：

flex-direction: 絕對主軸的方向

row 默認水平方向，起點在左邊
row-reverse 水平方向，起點在右邊
column垂直方向，起點在上沿
column-reverse垂直方向，起點在下沿

display: flex;

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

flex-wrap 當項目在一條軸線上排不下時，是否換行

wrap換行
nowrap （默認）不換行
wrap-reverse 換行，第一行在最下面

display: flex;

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

flex-flow: flex-direction和flex-wrap的集合，也就是說這個屬性是后面兩個屬性的結合方式

row nowrap （默認）水平方向，起點在左端，不換行

display: flex;

flex-flow:  || ;

詳細可參考如上單個屬性的解釋

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

flex-start左邊對齊
flex-end 右邊對齊
center居中對齊
space-between 兩端對齊，空格在中間
space-around空格環繞

display: flex;

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

這里對space-between和space-around做一個簡單的區別說明：

相同點：子元素都會自動排好，彼此之間距離相等
不同點：space-between兩端對齊，第一個子元素和最后一個子元素會貼著父級元素的邊框。space-around 第一個子元素和最后一個子元素與邊框也會有一定的距離。
align-items項目在側軸的對齊方式

flex-start 頂部對齊，即文字圖片等頂部同一條線上
flex-end 底部對齊，即文字圖片等底部在同一條線上
center中間對齊，即文字圖片不管多高，都拿它們的中間放在同一條線上
stretch將文字圖片充滿整個容器的高度，強制統一
baseline將每項的第一行文字做統一在一條線上對齊

display: flex;

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

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

flex-start這幾行頂部對齊
flex-end這幾行底部對齊
center這幾行居中對齊
stretch這幾行進行擴展或者縮放，從而填滿容器高
space-between這幾行中間使用空格進行填充(兩端對齊)
space-around這幾行用空格進行圍繞（兩邊及中間）

display: flex;

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

后綴

如果你覺得這個對你有幫助，歡迎轉載，煩請注明出處。同時也歡迎大家在GitHub上和我一起進階前端。

找到我：GitHub

找到我：知乎

GPU云服務器云服務器圖解安裝圖解 webrtc圖解排序算法圖解

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

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

前端學習資源

摘要：提供了完整的環境，并且支持自定義域名指向，動態計算資源調整，可以完成各種應用的開發編譯與部署。 react 新特性 react16 Context 算法相關圖解排序算法(二)之希爾排序微信小程序微信小程序組件化的解決方案移動端尺寸基本知識瀏覽器前端必讀：瀏覽器內部工作原理瀏覽器緩存原理解讀瀏覽器加載css和js及dom解析之間的關系瀏覽器緩存 CSS學習移動web開發布局入...

zhisheng 2019-08-20 13:33 評論0 收藏0
圖解——PyQt4從入門到運用

摘要：將程序包裝在界面里，可以將輸入通過多種途徑如文本框彈出路徑選擇等輸入到程序里。將輸出通過文本框顯示出來將執行信息如如報錯信息運行進度通過文本框或進度條顯示出來文章安排先介紹安裝和配合的使用。作為一個程序的開發者，我們僅僅需要在相應路徑通過命令行就可執行那個程序。但是，不懂行的人不理解這個黑框框的東西，陌生領域任何人都沒有安全感，所以他們是拒絕接受一個項目僅僅只是通過一個黑框框來執行的...

史占廣 2019-07-25 10:25 評論0 收藏0
Flex布局

摘要：布局干什么用常常會因為元素居中之類的問題苦惱，這時就可以借助，它為盒狀模型提供強大的靈活性。基本概念采用布局的元素，稱為容器，簡稱容器，容器子元素稱為項目，簡稱項目。 Flex布局干什么用？常常會因為元素居中之類的問題苦惱，這時就可以借助Flex（Flexible Box），它為盒狀模型提供強大的靈活性。基本概念采用Flex布局的元素，稱為Flex容器，簡稱容器，容器子元素稱為F...

dongfangyiyu 2019-08-29 12:15 評論0 收藏0
淺談瀑布流

摘要：瀑布流又稱瀑布流式布局，是比較流行的一種網站頁面布局方式。那么規則是什么呢下面通過圖解來分析一下瀑布流的算法。看懂這個圖示應該就能理解了瀑布流的原理算法。瀑布流又稱瀑布流式布局，是比較流行的一種網站頁面布局方式。視覺表現為參差不齊的多欄布局，最早采用此布局的是網站是 Pinterest，后逐漸在國內流行。瀑布流布局效果即多行等寬元素排列，后面的元素依次添加到其后，等寬不等高，...

番茄西紅柿 2019-04-23 13:27 評論0 收藏0