css - flex布局如何每行固定数量显示
本文介绍了css - flex布局如何每行固定数量显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
19个div， 每行只显示5个，宽度是平均的。
不改变结构， 只用弹性布局， 不用width, 因为width 太不灵活了。
能否做到呢。
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.flex {
display: -webkit-flex;
}
</style>
</head>
<body>
<div class="flex">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
</div>
</body>
</html>解决方案
不改变结构，可以用宽的百分比，不用宽做不到
楼上方法有问题，display:inline-block会有边距，宽度必小于20%
.flex {
display: flex;
flex-wrap: wrap
}
.flex > div {
width: 20%;
}这篇关于css - flex布局如何每行固定数量显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
