彈性盒模型，flex布局

CoderDock 發布于2019-04-23 11:54 / 3567人閱讀

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

彈性盒模型

??彈性盒子是css3的一種新布局模式，由容器（父元素）和項目（子元素）組成。

? 彈性盒子是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。

? 引入彈性盒模型的目的：提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白區間。

? 設置彈性盒子：display:flex或inline-flex; 區別：flex獨占一行；inline-flex占據自己應該占據的位置，有點像inline-block，不支持margin:auto。

容器屬性

?1.flex-direction? 確定主軸和方向

row 默認，從左到右
row-reverse? 從右到左
column 從上到下
column-reverse 從下到上

? 2.flex-wrap 規定項目是否換行

nowrap 默認，不換行
wrap 換行，交叉軸從上到下
wrap-reverse 換行，第一行在下，交叉軸從下到上

? 3.flex-flow 復合屬性，flex-direction和flex-wrap組成的復合屬性

row nowrap 默認，從左到右不換行

? 4.justify-content 項目在主軸上的對齊方式

flex-start 默認，主軸起點對齊
flex-end 主軸終點對齊
center 主軸居中對齊
space-between 主軸上項目兩端對齊，項目之間間隙平分空白
space-around 主軸上的項目兩側間隔相等

? 5.align-content 多行項目在交叉抽（與主軸垂直）上的對齊方式，不要和align-items共存

stretch 默認，不設置項目高度的時候，占滿平分整個交叉軸
flex-start 交叉軸起點對齊
flex-end 交叉軸終點對齊
center 交叉軸居中對齊
space-between 交叉軸上項目兩端對齊，項目之間間隙平分空白
space-around 交叉軸上項目兩側間隔相等

? 6.align-items 單行項目在交叉軸上的對齊方式

stretch 默認，不設置高度（豎直時）或寬度(水平時)占滿整個交叉軸
flex-start 交叉軸的起點對齊
flex-end 交叉軸的終點對齊
center 交叉軸的中間對齊
baseline 文字基線對齊

項目屬性

??1.flex-grow 設置項目的擴大比例

0 默認，不擴大
1 項目擴大填滿容器，值為1時占一份，值為2時占兩份，不支持負值

? 2.flex-shrink 設置項目的收縮比例

1 默認，當容器寬度不夠時，項目等比例縮小
0 不縮小
2,3...n 值越大縮小得越多

? 3.flex-basis 設置項目初始長度

auto 默認，項目沒有設置寬度的時候，默認內容撐開寬度
0 不設置初始值
number 規定項目的初始長度

? 4.flex 復合寫法flex:flex-grow flex-shrink flex-basis

auto 相當于1 1 auto
none 相當于0 0 auto
1 相當于1 1 0
initial 相當于0 1 auto

? 5.align-self 多帶帶控制交叉軸一個項目的對齊方式

auto 默認值，繼承父容器的align-items
其他屬性值與align-items一樣

? 6.order 規定項目在主軸上的排列順序

0 默認，根據項目先后排列
整數，可為負值，數值越小排名越靠前

以上為個人理解，如有不當之處請指正！

GPU云服務器云服務器 flex布局盒模型盒模型html嗎簡述html盒模型

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

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

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

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

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

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

Gemini 2019-04-23 11:53 評論0 收藏0
彈性盒模型

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

BakerJ 2019-08-30 12:52 評論0 收藏0
flex布局的溫故學習

摘要：需要注意的是當時設置布局之后，子元素的的屬性將會失效。各行向彈性盒容器的中間位置堆疊。各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。各行將會伸展以占用剩余的空間。 flex的簡介在flex的容器中默認存在兩條軸，水平主軸main axis和垂直交叉軸cross axis，這是默認的設置，不過我們可以通過設置將主軸的方向變成垂直方向，交叉軸變成水平方向。在一...

Aldous 2019-08-30 11:12 評論0 收藏0
CSS的常用單位 %和 vw vh 和 box-sizing：border-box; 和flex

摘要：一理解號是中的常用單位，它是相對于父容器而言的。效果圖利用設置了的寬代碼二理解這倆個單位是相對于視口的大小而定的。效果圖代碼彈性盒布局一、% 理解： %號是CSS中的常用單位，它是相對于父容器而言的。如:一個父容器的寬是100px,給它的子元素一個10%，那么子元素的寬就是100px的10% 10px。效果圖：（利用%設置了li 的寬）showImg(https://seg...

lordharrd 2019-08-29 16:14 評論0 收藏0