Question

我正在尝试创建一个容器，顶部和每侧有两个div，底部有另一个内容。我用flexbox完成了这个。我可以根据需要调整底部内容，但顶部内容对齐顶部，但不是左右对齐。我认为使用

justify-content: space-between;

会点缀它。我也尝试将.social div与margin-left: auto;

放在一起

这是我的代码：

.boxes {
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: flex-end;
  background-color: red;
  width: 50%;
}

.branding {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 200px;
}

<div class="boxes">
  <div class="branding">
    <div class="logo">logo</div>
    <div class="social">social</div>
  </div>
  <div>
    <h2>Case Study Title</h2>
    <p>A catchy description for our case study. We worked hard.</p>
  </div>
</div>

我错过了什么？

-Thanks

Answer 1

我认为你只需要将方框弯曲成列：

.boxes {
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction:column;     /* add this */
  background-color: red;
  width: 50%;
}

.branding {
  width:100%;
  display: flex;
  flex-direction:row;
  justify-content: space-between;
  height: 200px;                  /* this seems to cause a big vertical gap that isn't in your original */
}

<div class="boxes">
  <div class="branding">
    <div class="logo">logo</div>
    <div class="social">social</div>
  </div>
  <div>
    <h2>Case Study Title</h2>
    <p>A catchy description for our case study. We worked hard.</p>
  </div>
</div>

Answer 2

您必须制作这两个元素display: flex;并删除容器上的display flex

.boxes {
  background-size: cover;
  background-position: center center;
  background-color: red;
  width: 50%;
}

.branding {
  display: flex;
  justify-content: space-between;
  height: 100px;
}

.content {
  display: flex;
  justify-content: center;
}

<div class="boxes">
  <div class="branding">
    <div class="logo">logo</div>
    <div class="social">social</div>
  </div>
  <div class="content">
    <div>
      <h2>Case Study Title</h2>
      <p>A catchy description for our case study. We worked hard.</p>
    </div>
  </div>
</div>

无法使用justify-content正确对齐flexbox

2 个答案: