使用flexbox在DIV中居中对齐的元素

时间:2018-11-06 17:12:02

标签: html css css3 flexbox

这可能很简单,我只是想念它。我继承了与下面类似的标记,宽度设置在最外面的div上,并由每个孩子div继承。宽度是动态的。

我希望粉红色的wrapper div的宽度与第一行的蓝色框的宽度完全相同。我不知道那里可能有多少个蓝色盒子,也不知道它们的宽度。

我希望粉红色的wrapper位于红色/绿色的div内部,蓝色框保持对齐。

我做了两次尝试,但是都没有成功。任何帮助表示赞赏。下面是我想要实现的图像。

enter image description here

.outer {
  width: 275px;
  border: 4px solid red;
}

.parent-wrap {
  border: 3px solid green;
}

.wrapper {
  background: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.box {
  width: 50px;
  height: 50px;
  background: blue;
  display: inline-block;
  margin: 5px;
}

/* Attempt 2*/

.outer2 {
  width: 275px;
  border: 4px solid red;
}

.parent-wrap2 {
  border: 3px solid green;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.wrapper2 {
  background: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box2 {
  width: 50px;
  height: 50px;
  background: blue;
  display: inline-block;
  margin: 5px;
}
<h2>Attempt #1</h2>
<div class="outer">
  <div class="parent-wrap">
    <div class="wrapper">
      <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>
  </div>
</div>

<h2>Attempt #2</h2>
<div class="outer2">
  <div class="parent-wrap2">
    <div class="wrapper2">
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分:0)

要使用flex将内容居中,请将容器设置为显示:flex和justify-content:居中。然后,其子级可以使用justify-content:left进行左对齐

.outer {
  width: 400px; /* Increased width to show centering */
  border: 4px solid red;
}

.parent-wrap {
  border: 3px solid green;
  justify-content: center; /* CENTER */
  display: flex; /* MAKE THIS FLEX */
}

.wrapper {
  background: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.box {
  width: 50px;
  height: 50px;
  background: blue;
  display: inline-block;
  margin: 2%;
  flex: 0 0 21%; /* Set box to flex to limit number of boxes per line */
}
<h2>Attempt #1</h2>
<div class="outer">
  <div class="parent-wrap">
    <div class="wrapper">
      <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>
  </div>
</div>

答案 1 :(得分:-2)

尝试设置width.wrapper中的wrapper2

.outer {
  width: 275px;
  border: 4px solid red;
}

.parent-wrap {
  border: 3px solid green;
}

.wrapper {
  background: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.box {
  width: 50px;
  height: 50px;
  background: blue;
  display: inline-block;
  margin: 5px;
}

/* Attempt 2*/

.outer2 {
  width: 275px;
  border: 4px solid red;
}

.parent-wrap2 {
  border: 3px solid green;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.wrapper2 {
  background: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.box2 {
  width: 50px;
  height: 50px;
  background: blue;
  display: inline-block;
  margin: 5px;
}

.wrapper, .wrapper2 {
  width: 90%;
}
<h2>Attempt #1</h2>
<div class="outer">
  <div class="parent-wrap">
    <div class="wrapper">
      <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>
  </div>
</div>

<h2>Attempt #2</h2>
<div class="outer2">
  <div class="parent-wrap2">
    <div class="wrapper2">
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
      <div class="box2"></div>
    </div>
    </div>
</div>