html - HTML & CSS 以百分比或视口宽度设置项目周围的空间宽度

Question

您好我正在尝试设置相同宽度的 flex 项目，因此宽度.flexbox将与 相同.width-example，这将是%或vw

这是一个简单的例子，它应该是这样的：

.width-example {
  width: 80%;
  height: 50px;
  background-color: blue;
  
  margin-left: auto;
  margin-right: auto;
}

.flexbox {
  display: flex;
  justify-content:  space-around;
  flex-wrap: wrap;
}

.flex-item {
  width: 175px;
  height: 175px;
  background-color: green;
  margin: 10px auto;
}

<div class="width-example"> </div> 

<div class="flexbox">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

标签： htmlcss

Answer 1

您正在设置宽度，.width-example但不是您的.flexbox. 将 awidth和 a添加margin到您的.flexbox

.flexbox {
    display: flex;
    justify-content:  space-around;
    flex-wrap: wrap;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}