百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> 详谈CSS的flex布局(图文介绍)
分享文章到:

详谈CSS的flex布局(图文介绍)

发布时间:09/01 来源:未知 浏览: 关键词:
flex模型的布局方式十分的简约,而是运用的范畴比拼广;具有比拼多的属性,接下来我们就细致介绍各种属性对布局的转变。

3.属性总结

flex-container的属性有flex-direction, flex-wrap, justify-content, align-items, align-content

flex-direction(主轴标的目的): 1) row(布局为一行,从start开端排)

2) row-reverse(布局为一行,从end开端排)

3) column(布局为一列,从start开端排)

4) column-reverse(布局为一列,从end开端排)

flex-wrap(一条轴线排不下怎样换行):1) nowarp (不换行,在一行显示)

2) wrap(内容超过后换行)

3) warp-reverse(换行后有两条轴线,reverse就是把轴线罗列的次序倒置过来)

justify-content(主轴对齐方式):1) flex-start (start侧对齐,左对齐)

2) flex-end(end侧对齐,右对齐)

3) center(核心对齐)

4) space-between(摆布两侧没有间距,中间间距雷同)

5) justify-content:space-around(摆布两侧的间距为中间间距的一半)

align-items(穿插轴对齐方式): 1)align-items:stretch; (拉伸)

2)align-items:flex-start(start侧开端,上对齐)

3)align-items:flex-end(end侧开端,下对齐)

4)align-content :center (核心对齐)

5)align-items:baseline(基线对齐)

align-content(多根轴线对齐方式): 1)align-content :stretch (拉伸)

2)align-content :flex-start (start侧开端,上对齐)

3)align-content :flex-end(end侧开端,下对齐)

4)align-content :center (核心对齐)

5)align-content:space-between(高低没有间距,中间各子元素间距雷同)

6)align-content:space-around (高低间距之和等于中间各个间距)

flex-item相干属性有order,flex-grow,flex-shrink,lex-basis,align-self

order(罗列次序)

flex-grow(放大比例,剩余空间怎么分配,如下图所示,剩余空间的分配比例是1:2:1)

flex-shrink (缩小比例,超出空间怎么紧缩)

flex-basis (item所占主轴空间,优先级高于width)

align-self (对齐方式,遮盖align-items)

只有搞懂每个属性的功能,本人在调试演示一下,flex布局应当没有什么题目!!

这些属性综合起来,真的是可以做出超级多的布局!!

谢谢大家的浏览,但愿大家收益多多

本文转自: https://blog.csdn.net/Allenyhy/article/details/81605547

举荐教程:《CSS教程》

以上就是详谈CSS的flex布局(图文介绍)的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有152人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板