我怎样才能将 3 div 放在 div 中间，中间有 space

Question

我想将“盒子”容器 div 的所有内容居中，然后是“商店盒子”中的所有“物品”，它们之间有一个 space。这是我到目前为止使用 CSS flexbox 尝试过的。

.shop-container {
  height: auto;
  margin: 0 auto;
  padding: 10px;
  position: relative;
  margin-top: 30px;
  border: 5px solid red;
  width: 100%;
  height: 400px;
}

.shop-box {
  width: 95%;
  height: 83%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid rgb(51, 255, 0);
}

.box {
  display: flex;
  position: absolute;
  width: 100%;
  margin: 5 5px;
}
.item {
  background: gray;
  width: 300px;
  height: 300px;
  margin: 0 5px;
}

 <div class="shop-container">
  <div class="shop-box">
    <div class="box">
      <a href="#"><div class="item"></div></a>
      <a href="#"><div class="item"></div></a>
      <a href="#"><div class="item"></div></a>
    </div>
  </div>
</div>

Answer 1

也许这会有所帮助。我将 display: flex 和 align-items: center 添加到 .shop-box class，并将 justify-content: space-between 添加到 .box。

详细了解 CSS Flexbox here。

.shop-container {
  height: auto;
  margin: 0 auto;
  padding: 10px;
  position: relative;
  margin-top: 30px;
  border: 5px solid red;
  width: 100%;
  height: 400px;
}

.shop-box {
  display: flex;
  align-items: center;
  width: 95%;
  height: 83%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid rgb(51, 255, 0);
}

.box {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  margin: 5 5px;
}
.item {
  background: gray;
  width: 300px;
  height: 300px;
  margin: 0 5px;
}

 <div class="shop-container">
  <div class="shop-box">
    <div class="box">
      <a href="#"><div class="item"></div></a>
      <a href="#"><div class="item"></div></a>
      <a href="#"><div class="item"></div></a>
    </div>
  </div>
</div>

Answer 2

您可以使用 flexbox 来做到这一点，您已经是（尽管有一些问题）。

在 .shop-container 上，您需要 width: 100%; 或 margin: 0 auto;。两者都没有意义（如果它占据了整个宽度，居中就变得毫无意义。

我不确定您是否出于某些不相关的原因需要 position: relative？如果没有，我会摆脱它。

将内容（3 <a>s）包裹在 <div>s 的 3 层中通常是个坏主意（同样，除非你有一些不相关的理由这样做).我建议大大简化它，例如：

.box {
display:         flex;
min-width:       fit-content;
flex-flow:       row nowrap;    /* = (horizontal) dont wrap if the items dont fit horizontally; alternatives: wrap | nowrap; */
margin:          0 auto;        /* = center the box, if it happens to be not as wide as its parent */
justify-content: center;        /* = (horizontal) center the <a>s ; try these alternatives: flex-start | flex-end | center | space-between | space-around | space-evenly */
align-items:     flex-start;    /* = (vertical)   align the <a>s to the top of this container (if they were to have different heights); possible alternatives: center | stretch | flex-start | flex-end | baseline */
gap:             0.4rem;        /* = space between the <a>s */
border:          0.4rem solid rgb(51, 255, 0);
}

a {
display:         flex;
flex:            0 0 auto;      /* = start off autosized based on the item(s) inside here; neither grow nor shrink beyond that. */
flex-flow:       column nowrap; /* = (vertical) place additional content that is located within the <a> (if any) under the current content */
justify-content: flex-start;    /* = (vertical) the item(s), if different heights, should cling to the top */
align-items:     center;        /* = (horizontal) if the <a>s were to be be allowed to grow wider than neccecary, then center the item(s) within the link; alternatives: flex-start | flex-end | center */
}

.item {
width:           300px;
height:          300px;
background:      gray;
}

/* a { padding: 0.4rem; background: blue; }       /* uncomment to see that the <a> could be bigger than its content */
/* a:first-child .item { height: 400px; }         /* uncomment to see what happens when one of the items is taller */
/* .box { width: 800px; } .item { width: 100px; } /* uncomment to see what happens if the box was wider than neccecary */

<div class="box">
    <a href="#"><div class="item"></div></a>
    <a href="#"><div class="item"></div></a>
    <a href="#"><div class="item"></div></a>
</div>

我怎样才能将 3 div 放在 div 中间，中间有 space

How can i center 3 div inside a div with a space between

html

css

debugging