继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Flex布局之子元素下篇

火影劫
关注TA
已关注
手记 5
粉丝 7
获赞 94
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

打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP