Flex布局所有属性总结大全

1)Flex布局父容器属性

flex-direction / flex-wrap / flex-flow / justify-content / align-items / align-content

1》水平(主轴上)对齐方式:

justify-content:flex-start | flex-end | center | space-between | space-around;

flex-start(默认值):左对齐

flex-end:右对齐

center: 居中

space-between:两端对齐,子元素间隔相等。

space-around:子元素两侧的间隔相等。

2》十字交叉轴上对齐方式

align-items:flex-start | flex-end | center | baseline | stretch;

flex-start:上对齐。

flex-end:下对齐。

center:交叉轴对齐。

baseline: 第一行文字的基线对齐。

stretch(默认值):如果子元素未设置高度或设为auto,将占满整个容器。

3》项目排列方向

flex-direction:row | row-reverse | column | column-reverse;

row(默认值):从左1/2/3/...。

row-reverse:从左../3/2/1。

column:从上1/2/3/...。

column-reverse:从上../3/2/1。

4》换行方式

flex-wrap:nowrap(不换行) | wrap(向下换) | wrap-reverse(向上换);

5》flex-flow

flex-direction和flex-wrap的简写

flex-flow:row nowrap

6》多根轴线的对齐方式

align-content:flex-start | flex-end | center | space-between | space-around | stretch;

flex-start:上对齐。

flex-end:下对齐。

center:居中对齐。

space-between:两端对齐,间隔平均。

space-around:间隔相等。

stretch(默认值):占满。

2)Flex布局子元素属性

order/flex-grow/flex-shrink/flex-basis/flex/align-self

1》order属性(num)

order定义自身排列顺序。数值越小,越靠前,默认为0。-1/0/1/2/3/...

2》flex-grow属性(num)

flex-grow 定义自身放大比例,默认为0不放大。例如:1/2/1=25%:50%:25%

3》flex-shrink属性(num)

flex-shrink定义了空间不足时自身缩小比例,默认为1自动缩小,0不缩小。

4》flex-basis属性

flex-basis定义最小空间,默认值为auto,即自身的本来大小。

5》flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

6》align-self属性

align-self定义自身对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
————————————————
版权声明:本文为CSDN博主「怪咖___」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_60790033/article/details/122464421

  • 4
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值