CSS Flexbox - 响应边距

Question

.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，当我减少 window 时它会响应。但我希望列更小并居中，并且仍然具有响应性。我尝试为我的大容器添加边距，我尝试减少列的宽度，但这些解决方案使整个内容在较小的屏幕上无响应。如果屏幕变小，我尝试使用媒体查询删除 margin，但总有那么一刻我的内容消失，当 window 达到 [=14= 中指定的宽度时重新出现] 查询。

到目前为止，我最好的结果是 margin-top 为 15px，margin-left 和 margin-right 为 20%，但是当我缩小 window.

Answer 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

Answer 2

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

添加这个。

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

CSS Flexbox - 响应边距

CSS Flexbox - Responsive margin

html

css

layout

flexbox

responsive