我有一个 div,我有 12 个元素使用 flex 居中对齐。
但我只想让 4 个元素排成一排,所以我想要 3 行 4 列。
这可以用 flex 做吗?你知道该怎么做吗?
我正在尝试这样做:https://jsfiddle.net/18mzsqcx/1/ , 但它不起作用。
或者最好只创建一个宽度等于 25% 和一些边距的 div,例如 .col4
,然后将此类 .col4
放在每个元素中?
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.container {
float: left;
width: 100%;
background-color: red;
}
.content {
width: 94%;
margin: 0px auto;
background-color: yellow;
padding: 30px;
}
.categories {
display: flex;
justify-content: space-between;
background-color: blue;
}
.categories_item a {
color: green;
}
.categories_item {
flex-grow: 1;
}
<div class="container">
<div class="div content">
<div class="categories">
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
</div>
</div>
</div>
最佳答案
默认情况下, flex 容器设置为 flex-wrap: nowrap
.这意味着 flex 元素将无法换行。
因此,您应该做的第一件事是将 flex-wrap: wrap
添加到您的容器中。
.categories {
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* NEW */
}
然后,定义您的 flex 元素,以便一行只能容纳四个。
取而代之的是:
.categories_item { flex-grow: 1; }
试试这个:
.categories_item { flex: 1 0 20%; margin: 5px; }
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
float: left;
width: 100%;
background-color: red;
}
.content {
width: 94%;
margin: 0px auto;
background-color: yellow;
padding: 30px;
}
.categories {
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* NEW */
}
.categories_item a {
color: white;
}
.categories_item {
flex: 1 0 20%; /* NEW */
margin: 5px; /* NEW */
background-color: blue;
}
<div class="container">
<div class="div content">
<div class="categories">
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
<div class="categories_item">
<a href="" class="">
<span>Item</span>
</a>
</div>
</div>
</div>
</div>
关于html - 具有三 (3) 行和四 (4) 列的 flexbox 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45379566/