为了账号安全,请及时绑定邮箱和手机立即绑定

Flex布局之子元素下篇

flex布局之子元素下篇

这篇文章很早之前就想写了,最近想写的东西有很多,比如vue的,及其全家桶,日后再写吧。

其实flex布局的子元素的属性用的不多,我个人在做手机项目的网页布局的时候用的最多的还是父元素的属性,比如一些水平和垂直的居中了。
1.flex-grow

个人觉得还是很好用的,但是要注意是占据的是剩余空间的,如果想保证中间的自适应,两边固定,的布局方式还是可以考虑使用这种方式,不过我也建议去百度一下圣杯布局和双飞翼布局,然后看你的个人喜欢了,我是觉得flex布局实现这样的三栏布局是比较简单易懂的了。

2.flex-shrink

这个属性的默认值是1,也就缩小,所以当我们每次想想看看flex布局是多么的神奇的响应的时候,就是这个属性的原因。如果设置为0就不会缩小了。如果你看到了0,和1。想知道它是否可以输入负数,你可以去试试。

3.flex-base

给我的感觉是,基本都是用不上的感觉,完全被width和height替代的感觉,设置元素在主轴的固定大小,在分配多余空间之前

4.flex

子元素的flex布局的以上三个的总属性。

5.align-self

相当是父元素的align-items,就是多了个auto属性,主要是为了控制单个元素的位置,满足特殊的要求,其他基本都是一模一样,具体的属性值就看我的flex布局之父元素上篇

  1. order

这是元素用的也不多,用来排序,值越小越靠前,但是基本前端的排序,基本都可以写死的。。。

就到这了,上班以来都没双休过。。。TT

点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消