彈性盒模型

WelliJhon 發布于2019-08-30 10:57 / 1714人閱讀

摘要：如果一個項目的屬性為，其他項目都為，則空間不足時，前者不縮小。

彈性盒模型 1. 容器的概念

指定父元素為 flex

.parent { display: flex; }
.parent_inline { display: inline-flex; }

指定之后 float clear vertical-align 會失效

父元素稱為 flex container 子元素稱為 flex item

容器默認包含 main axis 和 cross axis，
main start main end 為主軸的起始位置和結束位置
cross start cross end 為交叉軸的起始位置和結束位置

flex item沿主軸排列，main size cross size 為所占據的主軸和交叉軸的空間

2. container的屬性

flex-direction flex-wrap flex-flow justify-content align-items align-content 為定義在容器上的屬性

flex-direction 主軸的方向

  row            主軸為水平方向，起點在左端 （默認值）
  row-reverse    主軸為水平方向，起點在右端
  column         主軸為垂直方向，起點在上沿
  column-reverse 主軸為垂直方向，起點在下沿

flex-wrap item的換行方向

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

flex-flow direction、item的簡寫

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

flex-start    左對齊（默認值）
flex-end      右對齊
center        居中
space-between 兩端對齊，項目之間的間隔都相等
space-around  兩端對齊, 每個項目兩側的間隔相等

align-items 定義item在交叉軸上的對齊方式

flex-start 交叉軸的起點對齊
flex-end   交叉軸的終點對齊
center     交叉軸的中點對齊
baseline   項目的第一行文字的基線對齊
stretch    如果item未設置高度或設為auto，將占滿整個容器的高度 （默認值）

align-content 多根軸線的對齊方式，單軸無效

flex-start    與交叉軸的起點對齊
flex-end      與交叉軸的終點對齊
center        與交叉軸的中點對齊
stretch       軸線占滿整個交叉軸。（默認值）
space-between 與交叉軸兩端對齊，軸線之間的間隔平均分布
space-around  每根軸線兩側的間隔都相等,所以，軸線之間的間隔比軸線與邊框的間隔大一倍

3. item的屬性

order flex-grow flex-shrink flex-basis flex align-self 屬性定義在 item 上

order item的排列順序

  數值越小，排列越靠前，默認為0

flex-grow item的放大比例

  默認0，即如果存在剩余空間，也不放大
  如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）
  如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍

flex-shrink item的縮放比例

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

flex-basis 在分配多余空間之前，item占據的主軸空間

  默認auto，即項目的本來大小
  設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間

flex

  flex-grow, flex-shrink 和 flex-basis 的簡寫
  默認 0 (1 auto)
  auto 1 1 auto
  none 0 0 auto

align-self item 的對齊方式

  允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性
  默認 auto, 表示繼承父元素的 align-items屬性,
  如沒有父元素則為 stretch
  .item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
  }
  該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致

云服務器 GPU云服務器盒模型盒模型html嗎簡述html盒模型盒遙控

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

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

CSS中各種布局的背后(*FC)

摘要：中各種布局的背后，實質上是各種的組合。相反，一些塊容器盒，比如非替換行內塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內格式化上下文產生的盒，用于表示一行。彈性容器外和彈性項目內的一切元素都不受影響。 CSS中各種布局的背后，實質上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。盒模型(Box M...

miracledan 2019-08-30 14:01 評論0 收藏0
彈性盒子模型詳解

摘要：二彈性盒模型歷史彈性盒模型歷史英文原版或者查看中文翻譯版另外附上標準文檔彈性盒模型在過去幾年間制定了三版草案規范。給子元素直接添加屬性即可七后話以上是本文所有內容，以下是小白我的感慨。一、前言由于W3C在制定彈性盒模型內容有多版草案，在網上瀏覽了很多視頻和文章，版本有新有舊，所以準備寫一篇關于彈性盒模型的文章，一是輔助自己學習，二是幫忙其他前端學習者更容易地彈性盒模型。二、彈性盒...

rozbo 2019-08-28 18:27 評論0 收藏0
彈性盒模型，flex布局

摘要：彈性盒模型彈性盒子是的一種新布局模式，由容器父元素和項目子元素組成。彈性盒子是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。彈性盒模型 ??彈性盒子是css3的一種新布局模式，由容器（父元素）和項目（子元素）組成。 ? 彈性盒子是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。 ? 引入彈性盒模型的目的：提供一種更加有效的方式...

CoderDock 2019-04-23 11:54 評論0 收藏0
彈性盒模型冷門知識

摘要：可以出現居中的，兩邊元素分別為彈性盒模型中的標簽可能會出現默認寬度，并且不可以用覆蓋，只能設置為類似以下結構的有一定高度這個容器占據下部剩余空間這個容器在左邊作為目錄這個容器是一個搜索欄這里理論上是剩余空可以出現居中的border，兩邊元素分別為49.5px a b 彈性盒模型中的input標簽可能會出現默認寬度，并且不可以用fle...

DevYK 2019-08-30 15:52 評論0 收藏0
彈性盒模型

摘要：彈性盒模型相比傳統的盒模型，可以更加簡單的實現各種布局頁面簡單舉一個例子，代碼如下加上廠商前綴，目前使用方式都有三種寫法，舊的，過度的，新的的屬性假如的改成也能實現數字的垂直居中彈性盒模型相比傳統的盒模型（display+position+float），可以更加簡單的實現各種布局頁面簡單舉一個例子，代碼如下 1 2 3 css .row{width:200px;...

BakerJ 2019-08-30 12:52 評論0 收藏0
彈性盒模型flex

摘要：一是的縮寫，意為彈性布局定義彈性布局二基本定義我只簡單的說一下容器和項目，因為只關系容器和項目來講的個人理解。它可以設為或屬性一樣的值，則該項目占據固定的空間。默認值為，表示繼承夫元素的屬性，如果沒有夫元素，則等同于。一、flex flex是flexible box的縮寫，意為彈性布局；定義彈性布局 display:flex; box{ display:flex; } 二...

Gemini 2019-04-23 11:53 評論0 收藏0