資訊專欄INFORMATION COLUMN
摘要：同時(shí)定義了伸縮容器的主軸和側(cè)軸。伸縮項(xiàng)目向一行的中間位置靠齊。伸縮項(xiàng)目會平均地分布在行里。伸縮項(xiàng)目的外邊距盒在該行的側(cè)軸上居中放置。默認(rèn)值伸縮項(xiàng)目拉伸填充整個(gè)伸縮容器。主要用來決定伸縮容器剩余空間按比例應(yīng)擴(kuò)展多少空間。
flexbox 研究
研究flexbox需要清楚一個(gè)概念，主軸和交叉軸的概念，而這兩個(gè)軸是可以交換的
flexbox的樣式屬性主要作用于兩個(gè)部分，一個(gè)是伸縮容器，一個(gè)是伸縮子項(xiàng)目
容器樣式display: flex | inline-flex
設(shè)置這個(gè)屬性就代表當(dāng)前這個(gè)元素變成了伸縮容器，一個(gè)是塊狀容器，一個(gè)是行內(nèi)塊狀容器
flex-direction: row | row-reverse | column | column-reverse
flex-direction代表主軸布局方向
row: 左－> 右 ，row-reverse: 右 -> 左 ，column：上 －> 下 ，column-reverse：下 －> 上
flex-wrap: nowrap | wrap | wrap-reverse
flex-wrap:代表的是超出布局的元素如何顯示，分別是不換行，換行，換行之后從右向左排列
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
這個(gè)是“flex-direction”和“flex-wrap”屬性的縮寫版本。同時(shí)定義了伸縮容器的主軸和側(cè)軸。其默認(rèn)值為“row nowrap”。
justify-content: flex-start | flex-end | center | space-between | space-around
主軸方向的對其方式
flex-start(默認(rèn)值)：伸縮項(xiàng)目向一行的起始位置靠齊。
flex-end：伸縮項(xiàng)目向一行的結(jié)束位置靠齊。
center：伸縮項(xiàng)目向一行的中間位置靠齊。
space-between：伸縮項(xiàng)目會平均地分布在行里。第一個(gè)伸縮項(xiàng)目一行中的最開始位置，最后一個(gè)伸縮項(xiàng)目在一行中最終點(diǎn)位置。
space-around：伸縮項(xiàng)目會平均地分布在行里，兩端保留一半的空間。
align-items: flex-start | flex-end | center | baseline | stretch
定義伸縮項(xiàng)目交叉軸在當(dāng)前行的對齊方式
flex-start：伸縮項(xiàng)目在側(cè)軸起點(diǎn)邊的外邊距緊靠住該行在側(cè)軸起始的邊。
flex-end：伸縮項(xiàng)目在側(cè)軸終點(diǎn)邊的外邊距靠住該行在側(cè)軸終點(diǎn)的邊 。
center：伸縮項(xiàng)目的外邊距盒在該行的側(cè)軸上居中放置。
baseline：伸縮項(xiàng)目根據(jù)他們的基線對齊。
stretch（默認(rèn)值）：伸縮項(xiàng)目拉伸填充整個(gè)伸縮容器。此值會使項(xiàng)目的外邊距盒的尺寸在遵照「min/max-width/height」屬性的限制下盡可能接近所在行的尺寸。
align-content: flex-start | flex-end | center | space-between | space-around | stretch
定義伸縮項(xiàng)目在伸縮容器內(nèi)部的對齊方式
同上
伸縮項(xiàng)目樣式order:
子元素順序
flex-grow:(默認(rèn)值為： 0)
根據(jù)需要用來定義伸縮項(xiàng)目的擴(kuò)展能力。它接受一個(gè)不帶單位的值做為一個(gè)比例。主要用來決定伸縮容器剩余空間按比例應(yīng)擴(kuò)展多少空間。
flex-shrink:(默認(rèn)值為： 1)
根據(jù)需要用來定義伸縮項(xiàng)目收縮的能力。
flex-basis:| auto (默認(rèn)值為： auto)
這個(gè)用來設(shè)置伸縮基準(zhǔn)值，剩余的空間按比率進(jìn)行伸縮。
flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
這是“flex-grow”、“flex-shrink”和“flex-basis”三個(gè)屬性的縮寫
align-self: auto | flex-start | flex-end | center | baseline | stretch
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111930.html
摘要：本文譯自這里，針對本文介紹的屬性列個(gè)提綱伸縮容器屬性伸縮項(xiàng)目屬性以后再布局時(shí)可以考慮用啦背景布局模塊目前上一次工作草案的叫法旨在提供一種更高效的方式來布局排列及分配容器中項(xiàng)目的空間，即便容器大小是未知或動態(tài)變化的因此稱為。 本文譯自 A Complete Guide to Flexbox這里，針對本文介紹的屬性列個(gè)提綱： 伸縮容器屬性： display flex-direction...
摘要：分配空間原理影響布局分配空間的屬性有三個(gè)，分別是和。伸縮項(xiàng)目擴(kuò)展寬度項(xiàng)目容器寬度項(xiàng)目寬度或項(xiàng)目設(shè)置的總和對應(yīng)的比例拉伸后伸縮項(xiàng)目寬度原伸縮項(xiàng)目寬度擴(kuò)展寬度我們來計(jì)算一下上面栗子中第一個(gè)伸縮項(xiàng)目拉伸后的寬度。 在項(xiàng)目中，我們還會大量使用到flexbox的新舊屬性，但大多數(shù)人一般只會寫新屬性，舊屬性交由autoprefixer處理，但其實(shí)完成同樣功能的新舊屬性表現(xiàn)形式卻不盡相同。還有部分人...
摘要：完整的說法是屬于同一個(gè)的倆個(gè)相鄰的的會發(fā)生重疊，與方向無關(guān)。元素會位于與與之間，使得寬度縮短。簡單的說，有了之后，布局不再局限于單個(gè)維度了。 什么是FC？ Formatting Context，格式化上下文，指頁面中一個(gè)渲染區(qū)域，擁有一套渲染規(guī)則，它決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。 BFC 什么是BFC Block Formatting Context，塊級格式...
閱讀 1343·2021-09-04 16:40
閱讀 3467·2021-07-28 00:13
閱讀 2893·2019-08-30 11:19
閱讀 2625·2019-08-29 12:29
閱讀 3179·2019-08-29 12:24
閱讀 1132·2019-08-26 13:28
閱讀 2408·2019-08-26 12:01
閱讀 3456·2019-08-26 11:35
