flex佈局 -- 彈性盒模型

来源:https://www.cnblogs.com/yin-jihu/archive/2023/01/25/17066563.html
-Advertisement-
Play Games

flex佈局 -- 彈性盒模型 display: flex; 就會讓其變成彈性盒子 當把一個元素的 display 屬性設置為 flex 或者 inline-flex 後,它就成了一個容器。 flex 與 inline-flex 的關係就類似 block 與 inline-block 的關係,定義里 ...


flex佈局 -- 彈性盒模型

display: flex; 就會讓其變成彈性盒子

當把一個元素的 display 屬性設置為 flex 或者 inline-flex 後,它就成了一個容器。

flexinline-flex 的關係就類似 blockinline-block 的關係,定義里容器是行內元素還是塊級元素。

常見屬性:

有六個常用屬性設置在容器上,分別為:

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

1.flex-direction屬性

flex-direction 屬性設置容器主軸的方向改變彈性元素方向

.wrap{
    flex-direction:row | row-reverse | column | column=reverse;
}

包含四個屬性值:

row: 預設值,表示沿水平方向,由左到右。

row-reverse :表示沿水平方向,由右到左

column:表示垂直方向,由上到下

column-reverse:表示垂直方向,由下到上

2.flex-warp屬性

flex-wrap屬性用於設置當項目在容器中一行無法顯示的時候如何處理。(控制彈性元素溢出換行處理

.wrap{
    flex-wrap:nowrap | wrap | wrap-reverse;
}

包含三個屬性值:

nowrap:表示不換行

wrap:正常換行,第一個位於第一行的第一個

image-20230124223806835

wrap-reverse:向上換行,第一行位於下方

image-20230124223724155

3.flex-flow屬性

flex-flow屬性是flex-deriction和flex-wrap屬性的簡寫,預設值為[row nowrap];,

第一個屬性值為flex-direction的屬性值

第二個屬性值為flex-wrap的屬性值

.warp{
	flex-flow: column wrap;
}

4.justify-content 屬性

justify-content屬性用於設置項目在容器中的對齊方式。主軸元素的多種排列方式

.wrap{
    justify-content: flex-start | flex-end | center |space-between | space-around
}

該屬性主要要五個屬性值:

flex-start:預設值,左對齊(都與主軸位置有關)

flex-end:右對齊

center:居中對齊

space-between:兩端對齊

image-20230124225125002

space-around:每個項目兩側的間距相等

image-20230124225136554

5.align-items 屬性

align-items定義了項目在交叉軸上是如何對齊顯示的交叉軸元素的多種排列方式

.wrap{
    align-items:flex-start | flex-end | center | baseline | stretch
}

該屬性主要有五個屬性值:(以交叉軸從上向下為例)

flex-start:交叉軸的起點對齊

flex-end 交叉軸的終點對齊

center 交叉軸居中對齊

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

stretch:預設值:如果項目未設置高度或者高度為auto,將占滿整個容器的高度

6.align-content屬性

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(預設值):軸線占滿整個交叉軸。

7.align-self 屬性

align-self屬性表示當前項目可以和其他項目擁有不一樣的對齊方式。它有六個可能的值。預設值為auto

auto:和父元素align-self的值一致

flex-start:頂端對齊

lex-end:底部對齊

center:豎直方向上居中對齊

baseline:item第一行文字的底部對齊

stretch:當item未設置高度時,item將和容器等高對齊

.item{
    align-self: flex-start | flex-end | center | baseline | stretch 
}

image-20230124230614416

8.flex-grow 屬性

flex-group屬性用來控制當前項目是否放大顯示。預設值為0,表示即使容器有剩餘空間也不放大顯示。如果設置為1,則平均分攤後放大顯示。

.green-item{
    order:-1;
    flex-grow:2;
}

image-20230124230703793

9.flex-shrink 屬性

flex-shrink屬性表示元素的縮小比例。預設值為1,如果空間不夠用時所有的項目同比縮小。如果一個項目的該屬性設置為0,則空間不足時該項目也不縮小。

.green-item{
    flex-shrink:2;
}

10.flex-basis屬性

flex-basis屬性表示表示項目占據主軸空間的值。預設為auto,表示項目當前預設的大小。如果設置為一個固定的值,則該項目在容器中占據固定的大小。

.green-item{
    flex-basis:100px;
    //或者 flex-basis:200px;
}

11.flex屬性

flex屬性是 flex-grow屬性、flex-shrink屬性、flex-basis屬性的簡寫。預設值為:0 1 auto;

.item{
    flex:(0 1 auto) | auto(1 1 auto) | none (0 0 auto)
}

12.order屬性

order屬性設置項目排序的位置,預設值為0,數值越小越靠前

.green-item{
    order:-1;
}

13.小手圖標的樣式

cursor: pointer;
收藏 關註 評論
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本次設計一個八位的SPI的介面模塊,可以修改輸出的頻率,也可以通過修改參數來設置通信模式。 本模塊是設定生成一個目標輸出頻率的二倍的計數器,然後通關計數的值來輸出響應的信號,從而進行SPI通信。 本模塊既可以發送數據也可以接收數據,給Send_en信號使開始發送數據,在接收到8位數據後會生成Read ...
  • 2023-01-23 一、network的命令 (1)關閉網路 systemctl stop network (2)查看網路狀態 systemctl status network (3)開啟網路 systemctl start network (4)重新啟動網路 systemctl start ne ...
  • System類 exit:退出當前程式。 arraycopy:複製數組元素,比較適合底層調用,一般使用Arrays.copyOF完成複製數組。 currentTimeMillens:返回當前時間距離 1970-1-1 的毫秒數。 gc:運行垃圾回收機制 System.gc(); public cla ...
  • 財務精度:BigInteger 與 BigDecimal 每博一文案 師父說: 人這一輩子,真地好難。 有些人,好著好著,忽然就變陌生了,有些手,牽著牽著,瞬間就放開了,有些路,走著走著,就失去了方向了。 懵懵懂懂,一眨眼,我們就長大了,愛過的人,一轉身,,青春就溜走了。以為有來日方長的,最後只剩人 ...
  • 2023-01-23 一、Linux 1、Liunx的簡介 Linux是一套免費使用和自用傳播的類Unix操作系統,是一個基於POSIX和UNIX的多用戶、多任務、支持多線程和多CPU的操作系統。Linux能運行主要的UNIX工具軟體、應用程式和網路協議。它支持32位和64位硬體。Linux繼承了U ...
  • Redhat 8 的安裝和初始配置 環境說明: 1.在VMWare Workstation上創建虛擬機安裝RHEL 8先決條件:自己的物理機(電腦/工作站/伺服器)的CPU的虛擬化功能要開啟。Intel的CPU:Virtualization Technology(VT-x)AMD的CPU:SVM M ...
  • 打算整理彙編語言與介面微機這方面的學習記錄。本部分講解8086CPU的結構和基本功能以及特性。 參考資料 西電《微機原理與系統設計》周佳社 西交《微機原理與介面技術》 課本《彙編語言與介面技術》王讓定 小甲魚《彙編語言》 1. 微處理器的外部結構 1.1 引腳 外部結構就是封裝出來的輸入輸出引腳。8 ...
  • 1. 寫在前面 linux系統內核為上層應用程式提供了多種進程間通信(IPC)的手段,適用於不同的場景,有些解決進程間數據傳遞的問題,另一些則解決進程間的同步問題。對於同樣一種IPC機制,又有不同的API供應用程式使用,目前有POSIX IPC以及System V IPC可以為應用程式提供服務。後續 ...
一周排行
    -Advertisement-
    Play Games
  • 一:背景 1. 講故事 年前遇到了好幾例托管堆被損壞的案例,有些運氣好一些,從被破壞的托管堆記憶體現場能觀測出大概是什麼問題,但更多的情況下是無法做出準確判斷的,原因就在於生成的dump是第二現場,借用之前文章的一張圖,大家可以理解一下。 為了幫助更多受此問題困擾的朋友,這篇來整理一下如何 快狠準 的 ...
  • 前言 .NET6 開始,.NET Croe API 項目取消了 Startup.cs 文件,在 Program.cs 文件的 Main 函數中完成服務的註冊和中間件管道的管理。但當我們項目引入更多包的時候,Program.cs 文件也會看起來很臃腫。 而且,我們不只會有一個後端項目,為了方便快速創建 ...
  • 目錄 背景 get 與 post 的區別 所有介面都用 post 請求? 背景 最近在逛知乎的時候發現一個有趣的問題:公司規定所有介面都用 post 請求,這是為什麼? 看到這個問題的時候其實我也挺有感觸的,因為我也曾經這樣問過我自己。在上上一家公司的時候接到一個項目是從零開始搭建一個微服務,當時就 ...
  • *以下內容為本人的學習筆記,如需要轉載,請聲明原文鏈接 微信公眾號「englyf」https://mp.weixin.qq.com/s/2GFLTstDC7w6u3fTJxflNA 本文大概 1685 個字,閱讀需花 6 分鐘內容不多, 但也花了一些精力如要交流, 歡迎關註我然後評論區留言 謝謝你的 ...
  • 在新版本的pandas中,上述代碼會引起警告,建議改成SQLAlchemy connectable(engine/connection),後續代碼將引入這種升級的連接方式。 ...
  • 幾乎所有的高級編程語言都有自己的垃圾回收機制,開發者不需要關註記憶體的申請與釋放,Python 也不例外。Python 官方團隊的文章 https://devguide.python.org/internals/garbage-collector 詳細介紹了 Python 中的垃圾回收演算法,本文是這篇 ...
  • 如果您想查找高於或低於平均值的數字,可以不必計算該平均值,就能查看更高或更低的值。通過Java應用程式,可以自動突出顯示這些數字。除了快速突出顯示高於或低於平均值的值外,您還可以查看高於或低於的值的個數。現在讓我們看看如何在 Java應用程式中實現此操作。 引入jar包 導入方法1: 手動引入。將  ...
  • 第一種方式:使用{} firstDict = {"name": "wang yuan wai ", "age" : 25} 說明:{}為創建一個空的字典對象 第二種方式:使用fromkeys()方法 second_dict = dict.fromkeys(("name", "age")) #valu ...
  • 在golang中可以使用a := b這種方式將b賦值給a,只有當b能進行深拷貝時a與b才不會互相影響,否則就需要進行更為複雜的深拷貝。 下麵就是Go賦值操作的一個說明: Go語言中所有賦值操作都是值傳遞,如果結構中不含指針,則直接賦值就是深度拷貝;如果結構中含有指針(包括自定義指針,以及切片,map ...
  • 本文結合京東監控埋點場景,對解決樣板代碼的技術選型方案進行分析,給出最終解決方案後,結合理論和實踐進一步展開。通過關註文中的技術分析過程和技術場景,讀者可收穫一種樣板代碼思想過程和解決思路,並對Java編譯器底層有初步瞭解。 ...