flex 布局列表自动换行

Posted yixiaoyang-

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flex 布局列表自动换行相关的知识,希望对你有一定的参考价值。

 

 

技术图片

 

<!DOCTYPE html>
<html>
<head></head>
<meta charset="utf-8">
<style type="text/css">
.con
width:102px;
border:solid 1px red;
display: flex;
flex-wrap: wrap;
justify-content: space-between;

.conlist
width:50px;
background: blue;
height: 50px;
margin-bottom:2px;

</style>
<body>
<div class="con">
<div class="conlist"></div>
<div class="conlist"></div>
<div class="conlist"></div>
<div class="conlist"></div>
<div class="conlist"></div>
<div class="conlist"></div>
</div>
</body>
</html>

 

以上是关于flex 布局列表自动换行的主要内容,如果未能解决你的问题,请参考以下文章

flex布局

Flutter 流式布局自动换行(WrapFlow)

如何让 Flex 文本控件自动换行

即使在使用自动换行之后,由于长词,flex 项目也会溢出容器

flex 布局解决最后一个布局问题

flex 相关属性