使用列设置响应式弹性框[重复]答案

【问题标题】：Set responsive flexbox with column [duplicate]使用列设置响应式弹性框[重复]
【发布时间】：2021-08-28 01:15:56
【问题描述】：

由于设计方便，所以经常使用 flex-box。但问题是，当我想使用两列进行移动响应式设计时，我就卡住了。对于大屏幕，我连续使用四列。只要屏幕大小<768px（移动屏幕），它就会向我显示两列。

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


@media(min-width: 768px) {
  .row {
    display: flex;
  }
  .col {
    flex-grow: 2;
  }  
}

<div class="row">
  <div class="col">
    <h2>Column One</h2>
  </div>
  <div class="col">
    <h2>Column Two</h2>
  </div>
  <div class="col">
    <h2>Column Three</h2>
  </div>
  <div class="col">
    <h2>Column Four</h2>
  </div>
</div>

预期结果

我在制作两列设计时遇到了困难。它总是将我放在响应式屏幕的一栏中。有什么方法可以用极简的 css 代码让它变成两列？

【问题讨论】：

.col 的规则将不适用，因为 divs 上的唯一类是 col-3。你在使用 Bootstrap 之类的东西吗？
不，我只是将上下文设置为每列将 row/4
默认情况下，div 将占据其容器宽度的 100%，因此它是单列。我会对可以应用于flex 元素的各种属性进行一些研究；我发现 CSS-Trick's A Complete Guide to Flexbox 对我来说是一个很好的参考。

标签： html css

【解决方案1】：

根据分辨率使用flex-wrap和flex-basis：

_{请参阅 CSS 中的注释}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Basis to 49% so we get 2 cols per row */
.col {
  flex-basis: 49%;
  border: 1px solid red;
}

/* Enable wrap */
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
 
@media(min-width: 768px) {
  
  /* Disable wrap */
  .row {
    flex-wrap: nowrap ;
  }
  
  /* Basis to 20% so we get 4 col per row (+ padding) */
  .col {
    flex-basis: 20%;
  }  
}

<div class="row">
  <div class="col-3 col">
    <h2>Column One</h2>
  </div>
  <div class="col-3 col">
    <h2>Column Two</h2>
  </div>
  <div class="col-3 col">
    <h2>Column Three</h2>
  </div>
  <div class="col-3 col">
    <h2>Column Four</h2>
  </div>
</div>

小屏幕：

大屏幕：

【讨论】：

【解决方案2】：

使用媒体查询或引导

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  width: 50%;
  border: 1px solid;
}

@media(min-width: 768px) {
  .col {
    width: 25%;
  }
}

<div class="row">
  <div class="col">
    <h2>Column One</h2>
  </div>
  <div class="col">
    <h2>Column Two</h2>
  </div>
  <div class="col">
    <h2>Column Three</h2>
  </div>
  <div class="col">
    <h2>Column Four</h2>
  </div>
</div>

【讨论】：