好用强大的弹性布局Flex

2018-12-29 小若 HTML CSS学习录

Flex Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。
Webkit 内核的浏览器,必须加上-webkit前缀。

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

---本段说明摘自阮一峰的网络日志

常用属性:

display: inline-flex;  将对象作为弹性伸缩盒展示,用于行内元素

display: flex; 将对象作为弹性伸缩盒展示,用于块级元素

flex-direction 用于指定Flex主轴的方向,继而决定 Flex子项在Flex容器中的位置

取值:row | row-reverse | column | column-reverse

row:默认值,表示水平方向从左到右排列,此时水平方向轴线为主轴

row-reverse:与row相反

column:表示垂直方向从上到下排列,此时垂直方向轴线为主轴

column-reverse:与column相反

图示:

 ]5~ZIW_`YU`U9$ZN3L]}68B.png~0B%HJ2B9R42OFTDL`]IK(0.png4O0M%JYJUE}N)40]H53O5AM.png6_V9SNJO6EON5N6%(RA~PVH.png

 

 

justify-content 用于指定主轴(水平方向)上Flex子项的对齐方式

取值:flex-start | flex-end | center | space-between | space-around

flex-start:默认值,表示与行的起始位置对齐

flex-end:表示与行的结束位置对齐

center:表示与行中间对齐

space-between:表示两端对齐,中间间距相等。要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于flex-start

space-around:表示间距相等,中间间距是两端间距的2倍。要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于center

图示:(主轴方向row) :

)_@AUS44MP6[RCDGD0P{06Q.png`@DXIFWC@8HHWHZ~YJ2R(EB.png

853LZJ0%D[[S6HNB_LEBSYE.pngHF)(Q]S(O%]OM{12BBQBBSY.pngSSJW7W0M8IU2)RKTC8X(9KL.png

 

 

 

align-items 用于指定侧轴(垂直方向)上Flex子项的对齐方式

取值:stretch | flex-start | flex-end | center | baseline

stretch:默认值,当Flex子项未设置高度或者高度值为auto时,stretch起作用,将Flex子项高度设置为行高度。这里需要注意,在只有一行的情况下,行的高度为容器的高度,即Flex子项高度为容器的高度

flex-start:表示与侧轴开始位置对齐

flex-end:表示与侧轴的结束位置对齐

center:表示与侧轴中间对齐

baseline:表示基线对齐,当行内轴与侧轴在同一线上,即所有Flex子项的基线在同一线上时,效果等同于flex-start

图示(主轴方向row,不设置子元素高度): 

[QPPOAB)_H53SZWEFG}[@BS.png]84YI1S~]~ZOJ(@@HMMFX5P.png]UC~N49J((K$1Y]JJ}C93UA.png}FR9~AL5@Q0F)BJ71YG[PAM.png

KVHN8R{@9UAF`@J0A`AF%EY.png

 

 

flex-wrap 用于指定Flex子项是否换行

取值:nowrap | wrap | wrap-reverse

nowrap:默认值,表示不换行,Flex子项可能会溢出

wrap:表示换行,溢出的Flex子项会被放到下一行

wrap-reverse:表示反方向换行

图示:

{]C2T3K%~J71DP@TL4ZR}%0.png6D`5TB@[O~$PFKUUGNK03(N.png 

9SCE9K{PI7K4]GHUXLF~)E2.png

 

 

align-self 该属性用来单独指定某Flex子项的对齐方式

取值:auto | flex-start | flex-end | center | baseline | stretch

图示:

@{PTDVH$XZO}64XK6W2OHX0.png

 

 

align-content 该属性只作用于多行的情况下,用于多行的对齐方式

取值:stretch | flex-start | flex-end | center | space-between | space-around

stretch:默认值,当Flex子项未设置高度或者高度值为auto时,stretch起作用,将Flex子项高度设置为行高度;

flex-start:表示各行与侧轴开始位置对齐,第一行紧靠侧轴开始边界,之后的每一行都紧靠前面一行;

flex-end:表示各行与侧轴的结束位置对齐,最后一行紧靠侧轴结束边界,之后的每一行都紧靠前面一行;

center:表示各行与侧轴中间对齐;

space-between:表示两端对齐,中间间距相等。要注意特殊情况,当剩余空间为负数时,效果等同于flex-start;

space-around:表示各行之间间距相等,中间间距是两端间距的2倍。要注意特殊情况,当剩余空间为负数时,效果等同于center

图示:

(L}{90SBDDEA_E69{B13C%O.png[M_@NKX`99XWCD1]~U0R[1W.png

[VSOO~F9358%YAP`QT7_0$5.pngI4MCMQS`)2U8_64)8R(%]WH.png

OE(1CE1(QY30`(P[1SCM0CW.pngWE5OX(EC3@Z47_7LSZA(BNM.png

 

 

复合属性flex,是flex-grow 、 flex-shrink 和 flex-basis 的简写属性,用来指定Flex子项如何分配空间

flex-grow:默认值为0,若省略则被默认为1

flex-shrink:默认值为1,省略时默认为1

flex-basis:默认值为auto,省略时默认为0%

M0Q}6636L5$L`PLI~4E4$BF.png

 

 

 

附带测试demo,附件下载即可 Flex测试demo.rar

 

标签: css Flex

发表评论:

Powered by emlog 备案号:豫ICP备18002778号