CSS中Flex布局控制每row的元素数量（没行3个）的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS中Flex布局控制每row的元素数量（没行3个）的问题相关的知识，希望对你有一定的参考价值。
首先，布局是要row，而不是column。
然后要实现的功能是row同一行的div数大于3时，主动换行。即每行div数不会超过3个，如何实现？
补充：有个笨方法就是在div的父级加div，每个父级带3个div，但这样不灵活，求在不改html的情况下通过css实现的方法。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
div
display: flex; flex-flow: row; flex-wrap: wrap
div>div
border: solid; width: 100px; height: 100px; margin: 10px
</style>
</head>
<body>
<div>
<div>box1</div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
<div>box5</div>
<div>box6</div>
<div>box7</div>
<div>box8</div>
<div>box9</div>
<div>box10</div>
</div>
</body>
</html>
设置flex-direction属性
flex-direction:column追问
你好，你没有看清楚我要实现的功能，我布局是要row，而不是column，但row同一行的元素数大于3时，主动换行。即每row元素数不会超过3个。
CSS3 弹性布局
参考技术A flex 是 flexible box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。能够高效方便的控制元素的对齐、排列，自动计算布局内元素的尺寸，无论元素的尺寸是固定的还是动态的，控制元素在页面的布局方向。弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成。
弹性容器设置属性 display:flex;
一、容器属性
flex-flow 复合属性，是 flex-direction 和 flex-wrap 的简写形式。 默认值：flex-flow: row nowrap;
⑴ flex-direction 子元素排列方向
flex-direction: row; 从左到右
flex-direction: row-reverse; 从右到左
flex-direction: column; 从上到下
flex-direction: column-reverse; 从下到上
⑵ flex-wrap 子元素换行方式
flex-wrap: nowrap; 不换行
flex-wrap:wrap; 换行
flex-wrap: wrap-reverse; 反转 wrap 排列，行颠倒
2 justify-content 子元素沿主轴对齐方式
justify-content: flex-start;
justify-content: space-between;
3 align-items 子元素在交叉轴上对齐方式
align-items: center; 垂直方向居中
align-items:flex-start; 垂直方向的顶部/交叉轴的起点对齐
align-items: flex-end; 垂直方向的底部/交叉轴的终点对齐
align-items: baseline; 项目的第一行的文字的基线对齐
align-items: stretch; 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度
二、子元素属性（写在子元素下）
align-self 用于设置弹性子元素自身在侧轴（纵轴）方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
align-items: center;
align-items: flex-start;
align-items: flex-end;
align-items: baseline;
align-items: stretch;
order 定义子元素的排列顺序。数值越小，排列越靠前，默认为order: 0;，可以为负值。
flex-grow 定义子元素的扩展比率，主要作用：分配剩余空间。负值无效。
flex-grow: 0; 默认值，即如果存在剩余空间，也不放大。
flex-grow: 1; 如果存在剩余空间，放大 ，等分剩余空间。
flex-shrink 定义子元素的收缩比率，值越大，按比例缩的就越小。
flex-shrink: 1; 默认值，即如果空间不足，缩小。
flex-shrink: 0; 不缩小。
flex-basis 定义元素的默认基准值。
设置了flex-basis，width就不起作用；同时存在的时候，优先使用flex-basis。
如果容器的宽度太小，子元素排列不下，设置的flex-basis的宽度会自动缩小，直到占满容器。
链接：https://juejin.cn/post/7038088241437736991
以上是关于CSS中Flex布局控制每row的元素数量（没行3个）的问题的主要内容，如果未能解决你的问题，请参考以下文章