CSS Flexbox - 响应式边距答案

【问题标题】：CSS Flexbox - Responsive marginCSS Flexbox - 响应式边距
【发布时间】：2021-05-21 06:46:05
【问题描述】：

.portfolio {
  display: flex;
  margin: 15px;
  background-color: #ddd0a7;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.box {
  background-color: rgb(238, 241, 210);
  padding: 0px;
  margin: 20px;
}

.box>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class='portfolio'>
  <div class='row'>
    <div class='column'>
      <div class="box zone game"><img src=""></div>
      <div class="box zone game"><img src=""></div>
    </div>
    <div class='column'>
      <div class="box zone writting"><img src=""></div>
      <div class="box zone writting"><img src=""></div>
      <div class="box zone writting"><img src=""></div>
      <div class="box zone writting"><img src=""></div>
      <div class="box zone writting"><img src=""></div>
    </div>
    <div class='column'>
      <div class="box zone roleplay"><img src=""></div>
      <div class="box zone roleplay"><img src=""></div>
      <div class="box zone roleplay"><img src=""></div>
      <div class="box zone roleplay"><img src=""></div>
      <div class="box zone roleplay"><img src=""></div>
      <div class="box zone roleplay"><img src=""></div>
    </div>
  </div>
</div>

我的 CSS 有问题。我正在尝试建立一个投资组合，这里是

我有什么

我想要什么 .

所以它是一个大容器，里面有三列，列里面有内容。我正在使用 flexbox，当我缩小窗口时它会响应。但我希望列更小且居中，并且仍然具有响应性。我尝试为我的大容器添加边距，我尝试减小列的宽度，但这些解决方案使整个事情在较小的屏幕上无响应。如果屏幕变小，我尝试使用媒体查询删除margin，但总有一段时间我的内容消失了，当窗口达到@media 查询中指定的宽度时重新出现。

到目前为止，我的最佳结果是 margin-top 为 15 像素，margin-left 和 margin-right 为 20%，但是当我缩小窗口时，我的内容变得非常小。

【问题讨论】：

作为解决方案之一。将justify-content: center 添加到.row 以进行居中。并将flex: 0 1 300px 添加到.column。

标签： html css layout flexbox responsive

【解决方案1】：

您是否尝试将其添加到您的.row

max-width: 960px;
margin: 0 auto;

还加

@media only screen and (max-width: 768px) {
    .row {
        flex-direction: column;
    }
}

https://codepen.io/craig_codes/pen/qBqjNJe

【讨论】：

【解决方案2】：

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    max-width: 992px;
    margin: 0 auto;
}

添加这个。

您可以根据需要更改 最大宽度。 margin: 0 auto 将保持框水平居中，因为左右边距是自动的

【讨论】：