flex佈局小結

来源:https://www.cnblogs.com/thinkguo/archive/2020/02/21/12340838.html
-Advertisement-
Play Games

2009年,W3C 提出了一種新的方案 Flex 佈局,可以簡便、完整、響應式地實現各種頁面佈局。目前,它已經得到了所有瀏覽器的支持。 Flex 是 Flexible Box 的縮寫,意為"彈性佈局",用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為 Flex 佈局。 行內元素也可以使用 F ...


2009年,W3C 提出了一種新的方案----Flex 佈局,可以簡便、完整、響應式地實現各種頁面佈局。目前,它已經得到了所有瀏覽器的支持。

Flex 是 Flexible Box 的縮寫,意為"彈性佈局",用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為 Flex 佈局。

行內元素也可以使用 Flex 佈局。

.box{
  display: flex;
}
.box{
  display: inline-flex;
}

需要註意的是Webkit 內核的瀏覽器,必須加上-webkit首碼。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

此外,設為 Flex 佈局以後,子元素的float、clear和vertical-align屬性將失效。

flex佈局經常用到的的6個屬性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

1、flex-direction屬性決定主軸的方向(即項目的排列方向)。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row(預設值):主軸為水平方向,起點在左端。
  • row-reverse:主軸為水平方向,起點在右端。
  • column:主軸為垂直方向,起點在上沿。
  • column-reverse:主軸為垂直方向,起點在下沿。

2、flex-wrap屬性定義,如果一條軸線排不下,如何換行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap(預設):不換行。
  • wrap:換行,第一行在上方。
  • wrap-reverse:換行,第一行在下方。

3、flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,預設值為row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

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

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

  • flex-start(預設值):左對齊
  • flex-end:右對齊
  • center: 居中
  • space-between:兩端對齊,項目之間的間隔都相等。
  • space-around:每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍。

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

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start:交叉軸的起點對齊。
  • flex-end:交叉軸的終點對齊。
  • center:交叉軸的中點對齊。
  • baseline: 項目的第一行文字的基線對齊。
  • stretch(預設值):如果項目未設置高度或設為auto,將占滿整個容器的高度。

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

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

該屬性可能取6個值。

  • flex-start:與交叉軸的起點對齊。
  • flex-end:與交叉軸的終點對齊。
  • center:與交叉軸的中點對齊。
  • space-between:與交叉軸兩端對齊,軸線之間的間隔平均分佈。
  • space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
  • stretch(預設值):軸線占滿整個交叉軸。

 

 還有以下6個屬性設置在項目上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
 order屬性定義項目的排列順序。數值越小,排列越靠前,預設為0。
.item {
  order: <integer>;
}

flex-grow屬性定義項目的放大比例,預設為0,即如果存在剩餘空間,也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

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

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

.item {
  flex-shrink: <number>; /* default 1 */
}

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

flex-basis屬性定義了在分配多餘空間之前,項目占據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto,即項目的本來大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

flex屬性是flex-growflex-shrink 和 flex-basis的簡寫,預設值為0 1 auto。後兩個屬性可選。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

該屬性有兩個快捷值:auto (1 1 auto) 和 none (0 0 auto)。

align-self屬性允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性。預設值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 邊框border通常簡寫為"border:1px solid red;"但其實一個完整的border邊框其實是由1.border-width/*邊框寬度*/,2.border-style/*邊框樣式*/,3.border-color/*邊框色彩*/三大屬性構成構成;邊框方位分為border-top,... ...
  • fancybox圖片燈箱功能 在頁面中引入幾個文件 在博客文件中需要載入圖片的地方插入下麵html代碼 效果: ...
  • 是誰在耳邊對我說!important提升權重優先順序,只為這一句,我用了3600s研究通配符與標簽!important的背景展示,也是讓我懷疑人生了!選擇器權值:標簽選擇器1,類選擇器和偽類選擇器:10,ID選擇器:100,通配符選擇器:0,行內樣式:1000,!important 在一定條件下,優先... ...
  • background如何簡寫?如何在背景圖像不變的情況下,依舊實現頁面文字滾動,為之奈何?別擔心,快用background-attachment: fixed;/*固定定位*/常用的background樣式如下,1.background-color2.background-image3.backgr... ...
  • 通過之前的站點導航案例,分離下拉菜單的共性和特性 dropdown.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dropdown</title> <link rel="stylesheet" h ...
  • 1.vue框架使用註意事項和經驗 1.1 解決Vue動態路由參數變化,頁面數據不更新 問題描述: 遇到動態路由如:/page/:id 從/page/1 切換到 /page/2 發現頁面組件沒有更新 解決方式1: 給增加一個不同:key值,這樣vue就會識別這是不同的了。 解決方案2: 在組件內使用v ...
  • 常見css樣式:1.字體與顏色2.背景屬性3.文本屬性4.邊框屬性5.滑鼠游標屬性6.列表樣式7.定位屬性8.內外邊距9.浮動和清除浮動10.滾動條11.顯示和隱藏 文本:1.letter-spacing/*字間距*/2.word-spacing/*詞間距*/3.text-decoration/*下... ...
  • 由於jquery2.0及以下不再支持IE6/7/8,因此選擇jquery1.x版本中較新的一個 推薦一個各種插件URL地址的公共庫:https://www.bootcdn.cn/ CDN載入jquery的優點: 1、減輕伺服器壓力 2、速度快 3、可以緩存 缺點: 不穩定(取決於別人的伺服器,因此需 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...