小编给大家分享一下CSS中display：flex布局的使用示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
第一个属性和用法：flex-direction
我了解的方法有4个：row（水平排列）、row-revese（水平反向排列）、column（垂直排列）、column-reserve（垂直反向排列）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="width:300px;border:1px solid red;display: flex;flex-direction: row;"> <div style="width: 100px;height: 100px;background-color: black;"></div> <div style="width: 100px;height: 100px;background-color: green;"></div> <div style="width: 100px;height: 100px;background-color: yellow;"></div> <div style="width: 100px;height: 100px;background-color: blue;"></div> </div> </body> </html>
上面的代码和效果图是属性为row时的效果
注意：虽然是设置好的宽度，但是父容器只有300px，子div没法达到100px，而是适应父容器
只需要将 flex-direction: row代码替换成flex-direction:row-revese 或者flex-direction:column 或则flex-direction:column-reserve，就可以得到不同的效果
下面是效果图：
row-revese
-------
column
-------
column-reverse
-------
第二个属性和用法：flex-wrap
这是换行属性：nowrap（不换行）、wrap（换行）、wrap-reverse（方向换行）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="width:300px;border:1px solid red;display: flex;flex-wrap: wrap;"> <div style="width: 100px;height: 100px;background-color: black;"></div> <div style="width: 100px;height: 100px;background-color: green;"></div> <div style="width: 100px;height: 100px;background-color: yellow;"></div> <div style="width: 100px;height: 100px;background-color: blue;"></div> </div> </body> </html>
这是换行的代码和效果图
-------
将属性flex-wrap: wrap 替换成nowrap（不换行）、wrap-reverse（方向换行）得到的效果图如下：
nowrap
-----
wrap-reverse
---------
第三个属性和用法：justify-content
包含的属性有：justify-content: start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline
（这些属性都是抄别人的）
flex-start（默认值）：左对齐；
左对齐
flex-end：右对齐
右对齐
center：居中；
居中对齐space-between：两端对齐，项目之间间隔相等；
两端对齐space-around：每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍。
以上是“CSS中display：flex布局的使用示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
