Question

我做了一个网站，并使用CSS flexbox进行布局。

首先，请看下面的代码。

html, body {
  margin: 0;
  padding: 0;
}
.wrap {
  height: 100%;
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.box {
  flex: 0 0 350px;
  height: 350px;
  background-color: aquamarine;
  border: 1px solid black;
}

<html>
<body>
  <div class="wrap">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

我的目标在这里。

使每个框的宽度固定为350px。
不管浏览器的大小如何，一行必须只有3个框。（如果浏览器尺寸变大）
不要考虑使用较小尺寸的浏览器。

因此我将flex: 0 0 350px定义为.box，将flex-wrap: wrap定义为.wrap

但这与我的期望有所不同。

有什么方法可以实现固定宽度的flexbox？

还是这里的解决方案？

谢谢。

Answer 1

html, body {
  margin: 0;
  padding: 0;
/* add height so that .wrap height: 100% knows what it's a percentage of */
height:100%;
}
.wrap {
  height: 100%;
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
/* add widths so that you will always have three in a row */
min-width:1056px; /* extra 6px to cater for border */
max-width:1056px;
width:1056px;
}
.box {
  flex: 0 0 350px;
  height: 350px;
  background-color: aquamarine;
  border: 1px solid black;
}

<html>
<body>
  <div class="wrap">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

flexbox固定宽度和固定行数

1 个答案: