CSS:把Flex布局的代碼全部展示出來,你難道還不會?

2020-12-08 IT熊孩子

進入我的主頁，查看更多CSS的分享！

首先呢，先去看文檔，了解flex是什麼，這裡不做贅述。

當然，可以看下面的代碼示例，輔助你理解。

一、row

將子元素在水平方向進行布局：

1. 垂直方向靠頂部，水平方向靠左側

.row-ll { display: flex;/* 定義flex */ flex-direction: row;/* 默認值*/ align-items: flex-start;/* 默認值*/ justify-content: flex-start;/* 默認值*/}示例：

<div style="width: 660px; height: 230px; border: 1px solid red;"> <div style="width: 110px; height: 110px;">我是div</div> <img src="" alt="" style="width: 110px; height: 110px;" /> <span>text</span></div>

2. 垂直方向靠頂部，水平方向居中

.row-lc { display: flex; flex-direction: row; align-items: flex-start; justify-content: center;}

3.垂直方向靠頂部，水平方向兩端對齊

.row-lsb { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between;}

4. 垂直方向靠頂部，水平方向平均分隔（中間間隔的寬度為兩邊間隔寬度的2倍）

.row-lsa { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-around;}

5. 垂直方向靠頂部，水平方向平均分隔（間隔距離相等）

.row-lse { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-evenly;}

6. 垂直方向靠頂部，水平方向靠右側

.row-le { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-end;}

7. 垂直方向可以設置為：靠頂部、居中、靠底部

前面6個是（垂直方向）靠頂部的效果，且（垂直方向）居中、靠底部的代碼類似，如下：

/* 垂直方向居中，水平方向靠左側 */.row-cl { display: flex; flex-direction: row; align-items: cenetr; justify-content: flex-start;}/* 垂直方向居中，水平方向居中 */.row-cc { display: flex; flex-direction: row; align-items: cenetr; justify-content: cenetr;}/* 垂直方向居中，水平方向平均間隔（中間間隔的寬度為兩邊間隔寬度的2倍） */.row-csa { display: flex; flex-direction: row; align-items: cenetr; justify-content: space-around;}/* 垂直方向居中，水平方向兩端對齊 */.row-csb { display: flex; flex-direction: row; align-items: cenetr; justify-content: space-between;}/* 垂直方向居中，水平方向平均間隔（間隔距離相等） */.row-cse { display: flex; flex-direction: row; align-items: cenetr; justify-content: space-evenly;}/* 垂直方向居中，水平方向靠右側 */.row-ce { display: flex; flex-direction: row; align-items: cenetr; justify-content: flex-end;}/* 垂直方向居底部，水平方向靠左側 */.row-el { display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-start;}/* 垂直方向居底部，水平方向居中 */.row-ec { display: flex; flex-direction: row; align-items: flex-end; justify-content: cenetr;}/* 垂直方向居底部，水平方向平均間隔 */.row-esa { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-around;}/* 垂直方向居底部，水平方向兩端對齊 */.row-esb { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between;}/* 垂直方向居底部，水平方向平均間隔 */.row-ese { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-evenly;}/* 垂直方向居底部，水平方向靠右側 */.row-ee { display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end;}二、column

將子元素在垂直方向進行布局：

1. 垂直方向靠頂部，水平方向靠左側

.col-ll { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}2. 垂直方向靠居中，水平方向靠左側

.col-lc { display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}3. 垂直方向兩端對齊，水平方向靠左側

.col-lsb { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;}4. 垂直方向平均間隔（中間間隔的寬度為兩邊間隔寬度的2倍），水平方向靠左側

.col-lsa { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-around;}5. 垂直方向平均間隔（間隔距離相等），水平方向靠左側

.col-lse { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-evenly;}6. 垂直方向靠底部，水平方向靠左側

.col-le { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;}7. 水平方向可以設置為：靠頂部、居中、靠底部

前面6個是（水平方向）靠頂部的效果，且（水平方向）居中、靠底部的代碼類似，如下：

/* 垂直方向靠頂部，水平方向居中 */.col-cl { display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}/* 垂直方向居中，水平方向居中 */.col-cc { display: flex; flex-direction: column; align-items: center; justify-content: center;}/* 垂直方向平均間隔，水平方向居中 */.col-csa { display: flex; flex-direction: column; align-items: center; justify-content: space-around;}/* 垂直方向兩端對齊，水平方向居中 */.col-csb { display: flex; flex-direction: column; align-items: center; justify-content: space-between;}/* 垂直方向平均間隔，水平方向居中 */.col-cse { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;}/* 垂直方向靠底部，水平方向居中 */.col-ce { display: flex; flex-direction: column; align-items: center; justify-content: flex-end;}/* 垂直方向靠頂部，水平方向靠底部 */.col-cl { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start;}/* 垂直方向居中，水平方向靠底部 */.col-cc { display: flex; flex-direction: column; align-items: flex-end; justify-content: center;}/* 垂直方向平均間隔，水平方向靠底部 */.col-csa { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-around;}/* 垂直方向兩端對齊，水平方向靠底部 */.col-csb { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;}/* 垂直方向平均間隔，水平方向靠底部 */.col-cse { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-evenly;}/* 垂直方向靠底部，水平方向靠底部 */.col-ce { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;}三、更多屬性

菜鳥教程(https://www.runoob.com/css3/css3-flexbox.html)

四、代碼太多了也有重複，好亂啊

我參考了vuetify的預置css，flex.css可以這麼寫：

.d-flex { display: flex;}.flex-row { flex-direction: row;}.flex-wrap { flex-wrap: wrap;}.flex-wrap-reverse { flex-wrap: wrap-reverse;}.flex-row-reverse { flex-direction: row-reverse;}.flex-column { flex-direction: column;}.flex-column-reverse { flex-direction: column-reverse;}.align-start { align-items: flex-start;}.align-center { align-items: center;}.align-end { align-items: flex-end;}.justify-start { justify-content: flex-start;}.justify-center { justify-content: center;}.justify-space-around { justify-content: space-around;}.justify-space-between { justify-content: space-between;}.justify-space-evenly { justify-content: space-evenly;}示例：

<link rel="stylesheet" href="./flex.css" /><div> 垂直居中，水平居中</div><div> 垂直居中，水平兩端對齊</div>有補充請在評論區留言。

相關焦點

  • 微信小程序CSS之Flex布局
    點擊上方「代碼集中營」，選擇「置頂公眾號」優秀文章，第一時間送達！
  • 一行 CSS 代碼的魅力
    並且它們還可以互相混合、疊加添加濾鏡、配合各種背景相關屬性等等等。不過今天，來看看一行 CSS Background 代碼能玩出什麼花來。嗯？Wow，不可思議。這裡 0.1deg 非常關鍵，這裡的角度越小（小於 1deg 為佳），圖形越酷炫。
  • CSS基礎之Flex布局面面觀
    但是利用另外一種布局方式，要實現垂直就中，一行代碼就搞定了，這種新的布局方式就是Flex彈性盒子布局。Flex 即 Flexible Box ，用來為盒狀模型提供最大的靈活性，顧名思義稱為」彈性布局」。
  • CSS中固定定位、相對定位、絕對定位以及flex布局高效定位
    ；鳥兒是身體加上一對翅膀），聖杯布局是Kevin Cornell在2006年提出的一個布局模型概念，在國內最早是由淘寶UED的工程師（傳說是玉伯）改進並傳播開來，在中國也有叫法是雙飛翼布局，它的布局要求有幾點： 三列布局，中間寬度自適應，兩邊定寬；中間欄要在瀏覽器中優先展示渲染； 允許任意列的高度最高
  • 【乾貨】Css精髓:這些布局你都學廢了嗎?
    前言最近忙裡偷閒，給自己加油充電的時候，發現自己腦海中布局這塊非常的凌亂混雜，於是花了一些時間將一些常用的布局及其實現方法整理梳理了出來，在這裡，代碼實現三列布局的實現方法也很多，這裡主要介紹兩種(雙飛翼布局、聖杯布局、flex布局)在介紹雙飛翼布局和聖杯布局之前要先說一下margin
  • Chrome72 嵌套 flex 布局修改,你的網站可能會發生布局錯亂
    問題首先，我們有一個嵌套的 flex 布局，代碼如下：<style>div { box-sizing: border-box;}.flex { display: flex; flex-direction: column;}.area { padding: 10px; height: 300px; width:
  • 20個讓你效率更高的CSS代碼技巧
    2.使用flex進行布局flex彈性布局的出現是有原因的。浮動和inline-block雖然也能實現很多的布局效果，但它們本質上是文本和塊元素布局的工具，而不是面向整個網頁的。flex可以很容易的按照我們預期的方式創建布局。
  • 20 個讓你效率更高的 CSS 代碼技巧
    2.使用flex進行布局flex彈性布局的出現是有原因的。浮動和inline-block雖然也能實現很多的布局效果，但它們本質上是文本和塊元素布局的工具，而不是面向整個網頁的。flex可以很容易的按照我們預期的方式創建布局。
  • css flex屬性筆記
    flex屬性定義及用法在css中，flex屬性是使用來設置或檢索彈性盒模型對象的子元素如何分配空間，是 flex-grow屬性、flex-shrink屬性和 flex-basis 屬性的簡寫屬性。flex屬性針對的是彈性盒模型對象的子元素，對於其它元素，flex屬性不起任何作用；一些主流瀏覽器還不支持flex屬性，需要在該屬性之前加對應的前綴才能識別該屬性。Internet Explorer 9及更早版本不支持flex屬性，但是可以通過-ms-flex屬性來支持， IE11 及更新版本完全支持flex屬性，不再需要-ms-前綴。
  • CSS Display屬性的雙值寫法
    display屬性用來控制一個元素及其子元素的格式化上下文，你應該在剛剛學習CSS的時候就知道，有些元素是塊級元素，有些則是行內元素。有了display屬性，你就可以切換元素不同的狀態。比如說，通常一個h1元素是一個塊級元素，但是通過切換，它就能以內聯元素展現。這幾年，我們也知道了Grid 布局和彈性盒布局。
  • HTML & CSS頁面布局之定位
    網頁布局的好與壞，直接決定了網頁最終的展示效果。這裡總結一下 WEB前端CSS部分的定位問題，同時這些問題也是對一些基礎的技術概念和思想的理解。對這些基本知識的掌握程度和深度決定了你的技術層級。文檔流文檔流就是HTML文檔內所有元素按照一定規律排列並顯示的形式。CSS文檔流大致可以分為3種：標準流，浮動流，定位流。
  • 一行CSS 代碼搞定響應式布局
    最精彩的地方在於：所有的響應特性被添加到了一行 css 代碼中。這意味著我們不必將 HTML 與醜陋的類名(如col-sm-4, col-md-8)混雜在一起，也不必為每個屏幕創建媒體查詢。ok，讓我們發車吧。 設置 在本文中，我將繼續使用我在第一篇 CSS Grid 布局教程文章中的網格布局。然後，我們將在文章末尾添加圖片。
  • 合格前端開發該了解的css知識
    但作為一個合格的前端開發，css其實還是挺重要的，本人在面試別人的時候，總是要提及一些css問題，考察面試者基本的布局能力或者其他的一些小想法以下是一些比較常問的問題，包括本人會問候選人和被問的題，各位有興趣的話可以看看，試著實現下，前面會放問題和問題的一些簡述，後面會給一些實現的具體代碼；不趕時間的話，先試著去想像怎麼解決問題，再去看下實現的代碼，加深下自己的印象
  • 10 個 CSS 高頻面試題,你都會嗎?
    居中布局行內元素: text-align:center塊級元素: margin:0 auto絕對定位和移動: absolute + transform絕對定位和負邊距: absolute + marginflex布局: flex + justify-content:center垂直居中子元素為單行文本
  • 前端學習——匯集了大量 CSS 的使用和學習的示例代碼
    CSS-Inspiration這裡可以讓你尋找到使用或者是學習 CSS 的靈感，以分類的形式，展示不同 CSS 屬性或者不同的課題使用 CSS 來解決的各種方法。目前已有上百種的CSS 實現示例，代碼可以拿 來即用LayoutCSS實現瀑布流布局（display: flex）CSS實現瀑布流布局（colum+count）CSS實現瀑布流布局（display: grid）
  • CSS中flex和inline-flex的區別
    兩者的區別描述：flex： 將對象作為彈性伸縮盒顯示inline-flex：將對象作為內聯塊級彈性伸縮盒顯示一句話來描述就是 當Flex Box 容器沒有設置寬度大小限制時，當display 指定為 flex 時，FlexBox 的寬度會填充父容器，當display指定為 inline-flex
  • 【面試題】CSS知識點整理(附答案)
    答案來源於 CSS選擇器從右向左的匹配規則[4]5. flex: 1 完整寫法Flex 布局概念:採用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。postcss的常用插件autoprefixer[15]：autoprefixer插件會給根據CanIUse的兼容性去檢查你的CSS代碼，然後自動為你的CSS代碼加上瀏覽器廠商的私有前綴11. css modulescss modules作用:- 避免css相互覆蓋的方法，CSS Modules
  • CSS的flex布局,看完這篇你就懂了
    每一個項目都離不開前端的網頁布局，網頁布局也是CSS一個重點應用，系統來說，頁面的布局都應該由前端來完成，不過作為後端人員，一些簡單的樣式就不需要依賴前端人員了。傳統的布局，都是基於盒子模型，依賴float、position定位，它對於一些特殊的布局非常不方便，比如，垂直居中。相信很多小夥伴對於垂直居中有些困擾吧。
  • 10個關於css高頻面試題
    居中布局行內元素: text-align:center塊級元素: margin:0 auto絕對定位和移動: absolute + transform絕對定位和負邊距: absolute + marginflex布局: flex + justify-content:center垂直居中子元素為單行文本
  • flex布局實現瀑布流專題及常見問題 - CSDN
    瀑布流的布局自我感覺還是很吸引人的，最近又看到實現瀑布流這個做法，在這裡記錄下，特別的，感覺flex布局實現瀑布流還是有點懵的樣子，不過現在就可以明白它的原理了1.multi-column多列布局實現瀑布流先簡單的講下multi-column相關的部分屬性column-count