博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
flex小记
阅读量:5214 次
发布时间:2019-06-14

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

 align-items 是在nowrap时,对一行进行的设置

align-content 是在wrap时,对所有进行的设置。

子元素:

flex-grow :默认值是0 。 他们分配的是剩下的空间,如果没有剩下的空间,就没效果。

flex-shrink:默认值是1.它是指在进行压缩的时候,他的收缩能力。值越大,收缩的越快。

flex-basis: 设置成百分比,可以直接决定他占用的宽度。默认是auto。默认的时候就根据flex-grow。

 

如果 flex-direction 被设置成了 column,其实相当于把屏幕左旋90度。然后按照正常的方式进行设置。

order 不是flex-order!

如果我们设置了具体的宽度200px---使用flex-grow设置了,并且可以换行wrap。如果容器的宽度小于总的宽度和了,最后一个元素会随着宽度不够被挤下来。

 

display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; http://www.runoob.com/try/try.php?filename=trycss3_flex-basis http://www.45it.com/css/201407/37606.htm flex-basis :如果设置成具体的值,是 所占的值就是 容器宽度*(自己的值/所有值的和) 如果是百分比: 凑够100%,就按上面算。 flex-grow 是受宽度影响的, flex-basis 被挤下来之后,是否去占满还是保持原位置留空,要看flex-grow 设置,如果设置为0,表死不对剩余空间处理,就会留空。

转载于:https://www.cnblogs.com/yangxiaomie/p/5281366.html

你可能感兴趣的文章
python3--算法基础:二分查找/折半查找
查看>>
Perl IO:随机读写文件
查看>>
Perl IO:IO重定向
查看>>
优化算法系列-模拟退火算法(1)——0-1背包问题
查看>>
JVM系列之三:类装载器子系统
查看>>
java技术汇总
查看>>
git bash 的命令
查看>>
转:基于用户投票的排名算法系列
查看>>
WSDL 详解
查看>>
linux tmux 工具使用 tmux.conf 文件
查看>>
01爬取豆瓣网电影数据进行numpy的练习
查看>>
WSDL测试webservice接口记录
查看>>
独家 | TensorFlow 2.0将把Eager Execution变为默认执行模式,你该转向动态计算图了...
查看>>
react + dva + ant架构后台管理系统(一)
查看>>
[转]ASP数组全集,多维数组和一维数组
查看>>
我的中兴五年:加班为何成了底层员工心中永远的痛
查看>>
git学习
查看>>
C# winform DataGridView 常见属性
查看>>
逻辑运算和while循环.
查看>>
Nhiberate (一)
查看>>