当前位置:  首页  >  前端开发  >  CSS+DIV

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

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布局(图文介绍)的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有