博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
弹性布局
阅读量:6912 次
发布时间:2019-06-27

本文共 556 字,大约阅读时间需要 1 分钟。

从左往右的方格,默认是不换行的,flex-warp:no-warp(默认),如果现在想让一行出现四个,那么项目本身的宽度是25%,flex:0 0 25%,第三个属性就是本身项目的大小,其实相当于设置宽度。width:25%一样的。

比如三个我设置宽度为33.3%,其实不用,flex-grow:1剩余空间均等分,如果都给1,说明全部平分。grow=1的作用还有很多,比如我header和footer是固定高度,那么中间的部分就是flex-grow:1,就是把剩余的空间全部占满,也就是通常说的,左边是固定宽度,右边自适应,flex:1是一个道理,flex:1就是grow:1,就是把剩下的空间全部占满了。

面试会问左侧是固定宽度,右侧怎么自适应,要么就用calc计算,要么就是弹性布局,给右边一个属性就好,就是把剩余的空间占满-----flex:1 总结:总之我觉得最有用的,除了水平居中,垂直居中之外,flex:1,非常有用,如果只剩下自己加上这个属性,那么就是占满剩下的空间,如果是很多兄弟都加上这个属性,那么就是占的分数,如果都是1,那么平分,如果又一个是2,那么他比其他的宽一倍。至于align-items:center,justify-content:center这个应该都会使用的。本文就不说明了。

转载地址:http://slbcl.baihongyu.com/

你可能感兴趣的文章
快速开发基于 HTML5 网络拓扑图应用1
查看>>
LUA 表结构的使用
查看>>
动态规划
查看>>
威佐夫博弈
查看>>
前端工程师知识图
查看>>
李俊君保研个人陈述
查看>>
Bash 实例,第 3 部分
查看>>
支持向量机
查看>>
高斯消去、三角分解、追赶法
查看>>
JQuery学习入门之AJAX
查看>>
linux下禁止root远程登陆
查看>>
使用Ninject+Moq在单元测试中抽象数据访问层
查看>>
搭建阿里云博客
查看>>
Xcode证书路径和缓存清理路径
查看>>
在oracle数据库里创建自增ID字段的步骤
查看>>
LC.81. Search in Rotated Sorted Array II
查看>>
使用Jacob操作Wrod文档的工具类代码
查看>>
JavaScript-严格模式
查看>>
将博客搬至CSDN
查看>>
270. Closest Binary Search Tree Value - Easy
查看>>