flex布局一行展示两个或者四个

可以使用flex布局的justify-content属性和flex-wrap属性来实现一行展示两个或四个元素。

展示两个元素：

.container {
  display: flex;
  justify-content: space-between;
}

在容器中放入两个子元素即可。

展示四个元素：

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item {
  width: calc(50% - 10px);
  margin-bottom: 20px;
}

在容器中放入四个子元素，通过flex-wrap属性设置换行，再通过给每个子元素设置宽度和底部边距来实现一行展示四个元素。其中calc(50% - 10px)用于计算每个子元素的宽度，减去的10px是为了给子元素之间留出一些空隙。

相关问题

用flex布局使四个div成两行两列

好的，下面是使用flex布局实现四个div成两行两列的代码：

HTML代码：

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin-bottom: 10px;
}

这个布局将四个div放在一个父容器中，使用flex布局让子元素自动排列成两行两列，其中`flex-wrap: wrap`属性使元素自动换行，`justify-content: space-between`属性使元素在主轴上等间距分布，`align-items: center`属性使元素在交叉轴上居中对齐。

display: flex; 怎么一行排两个

在使用display: flex布局时，可以通过设置flex容器的flex-wrap属性为wrap，然后在子元素上设置flex属性来实现一行排两个的效果。

下面是一个示例代码[^2]：

<style>
.list_cai {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  flex: 0 0 48%;
  margin-bottom: 10px;
}
</style>

<div class="list_cai">
  <div class="item">第一个元素</div>
  <div class="item">第二个元素</div>
  <div class="item">第三个元素</div>
  <div class="item">第四个元素</div>
  <div class="item">第五个元素</div>
  <div class="item">第六个元素</div>
</div>

在上面的代码中，通过设置.item的flex属性为0 0 48%来控制每个子元素的宽度为父容器的48%，并且通过设置flex-wrap属性为wrap来实现换行排列。通过设置justify-content属性为space-around来实现子元素的水平居中对齐。

这样，就可以实现一行排两个的效果。