首页 ›存档› 技术 › 查看内容

HTML布局 -- 初识flex布局

2018-3-30 13:00 |来自: 互联网 273 0

摘要: 来自公众号：PHP大咖非常不错的公众号，大家可以搜索PHP大咖关注 html布局 felx布局 1.设置flex布局的box 给盒子添加display属性 .box { display:flex;} 1.flex-direction属性决定主轴的方向（即项目的排列方向）。 ...

来自公众号：PHP大咖非常不错的公众号，大家可以搜索PHP大咖关注

.box {  display:flex;}

1.flex-direction属性决定主轴的方向（即项目的排列方向）。

box { flex-direction: row | row-reverse | column | column-reverse;}

1-1.它可能有4个值。

row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿

2.默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{ flex-wrap: nowrap | wrap | wrap-reverse;}

2-1.它可能取三个值。

nowrap（默认）：不换行。wrap：换行，第一行在上方。wrap：换行，第一行在上方。

3.flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box { flex-flow:

声明：文章版权归原作者所有部分文章转自互联网如有侵权请联系 [邮箱地址] 删除

上一篇：重大通知！5月又一大波铁饭碗招聘！下一篇：程序员最好的几个职业方向

相关分类