栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

Flex布局之子元素下篇

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/243210.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号