介紹
屬性
- none
此屬性是說不讓元素顯示 - block
是對于行內(nèi)元素來說的嵌戈，例如span,a,i.em等。 - inline
此屬性值是針對塊級元素的固逗，使用該屬性值左权，塊級元素就不會一家為大，不再獨占一行褐墅，如果其后的元素是行內(nèi)元素拆檬，就會跟在這個塊級元素后面顯示。 - inline-block
兼具二者特點 - flex
設(shè)為Flex布局以后妥凳，子元素的float竟贯、clear和vertical-align屬性將失效-
flex-direction
- row 沿主軸(水平)排列(左 -> 右)
- row-reverse 沿主軸(水平)反向排列(右 -> 左)
- column 豎直排列
- column-revers 豎直反向排列
-
flex-wrap
- nowrap (默認(rèn))元素不換行
比如：一個div寬度100%，設(shè)置此屬性逝钥，2個div寬度就自動變成各50%屑那； - wrap 換行在上方
比如：一個div寬度100%，設(shè)置此屬性艘款，第二個div就在第二行了持际； - wrap-reverse 換行在下方
- nowrap (默認(rèn))元素不換行
-
flex-flow 是flex-direction屬性和flex-wrap屬性的簡寫形式
默認(rèn)值為row nowrap -
justify-content 元素在主軸上的排列
- center 居中排列
- flex-start 從左或者上開始排列
- flex-end 由右或者下開始排列
- space-between 從左右兩端或者上下兩端開始排列
-
space-around 每個元素兩側(cè)的間隔相等,項目之間的間隔比項目與邊框的間隔大一倍
image
-
align-items 元素在主軸方向上的對齊方式
- flex-start 靠左上對齊
- flex-end 靠左下對齊
- center 靠中間對齊
- baseline 該值與'flex-start'等效
-
stretch 如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度(默認(rèn))
image
-
align-content 在彈性容器內(nèi)的元素沒有占用交叉軸上所有可用的空間時對齊容器內(nèi)的各項（垂直）
- flex-start 各行向彈性盒容器的起始位置堆疊
- flex-end 各行向彈性盒容器的結(jié)尾位置堆疊
- stretch 各行向彈性盒容器的中間位置堆疊
- center 元素被拉伸以適應(yīng)容器哗咆。各行將會伸展以占用剩余的空間
- space-between 元素位于各行之間留有空白的容器內(nèi)蜘欲。各行在彈性盒容器中平均分布。
-
space-around 元素位于各行之前晌柬、之間姥份、之后都留有空白的容器內(nèi)。各行在彈性盒容器中平均分布年碘，兩端保留子元素與子元素之間間距大小的一半殿衰。如果剩余的空間是負(fù)數(shù)或彈性盒容器中只有一行，該值等效于'center'盛泡。
image
-
flex-direction
塊級元素和行內(nèi)元素的區(qū)別：
- 塊級元素會獨占一行闷祥，其寬度自動填滿其父元素寬度
行內(nèi)元素不會獨占一行，相鄰的行內(nèi)元素會排列在同一行里傲诵，直到一行排不下凯砍，才會換行，其寬度隨元素的內(nèi)容而變化 - 塊級元素可以設(shè)置 width, height屬性拴竹，行內(nèi)元素設(shè)置width, height無效（focus:塊級元素即使設(shè)置了寬度悟衩，仍然是獨占一行的）
- 塊級元素可以設(shè)置margin 和 padding.
行內(nèi)元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產(chǎn)生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產(chǎn)生邊距效果。
