Question

我正在仅使用CSS和React创建一个响应式网站。我想在一个主div中有很多div，但要保持其响应速度和3列布局。将来会自动添加其他小div。如何获得这样的结果？

我是一个初学者，正在考虑flexbox，但我不知道如何使用它来获得3列响应式布局。

n / a

Answer 1

如果只需要恢复性（不关心断点），那么flexbox将解决您的问题。但是，如果您想获得更多的特异性，那么请看一下bootstrap和类似的解决方案，例如，下面的代码使用material-ui的bootstrap网格系统实现。它声明了3个框，它们根据视口的大小改变了它们占据的列数。

<Grid container>
    <Grid item sm={12} md={6} lg={4}>
        Item one
    </Grid>
    <Grid item sm={12} md={6} lg={4}>
        Item two
    </Grid>
    <Grid item sm={12} md={6} lg={4}>
        Item three
    </Grid>
</Grid>

Answer 2

如果您要使用纯CSS解决问题，则可以使用flexboxes，但我建议您像Dupocas所建议的那样来了解一下引导程序。它将帮助您进行布局和响应。

仍然，这是一个简短的示例，说明如何使用flexboxes解决它：

.board {
  background-color: grey;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.item {
  background-color: lightgrey;
  width: 30%;
}

<div class="board">
  <div class="item">
    One
  </div>
  <div class="item">
    Two
  </div>
  <div class="item">
    Three
  </div>
  <div class="item">
    Four
  </div>
  <div class="item">
    Five
  </div>
  <div class="item">
    Six
  </div>
</div>

将div添加到div（响应式布局）

2 个答案: