代码之家 › 专栏 › 技术社区 › user2371684

无法将flexbox与justify content正确对齐

flexbox css html

user2371684 · 技术社区 · 7 年前

我用flexbox完成了这项工作。我可以根据需要对齐底部内容,但顶部内容会对齐顶部,但不会左右对齐。我认为使用

justify-content: space-between;

会给它点颜色。我也试过推杆。社交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>

-谢谢

2 回复 | 直到 7 年前

Pete Irfan TahirKheli 7 年前

我认为您只需要将框的方向弯曲到列中:

.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>

Victor Allegret 7 年前

你必须把这两个元素 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>