‘’Justify content‘属性不适用于Flex

Question

编辑:解决通过卡姆隆的建议。问题是，我将“主”元素的宽度设置为50%。

我试图让两个子div的‘主’元素是居中水平。

我将正确的父容器设置为我的"flex“类，其中包含两个子div。除了justify content之外，其他所有的属性似乎都正常工作。

在两个弯曲的方向上试过。还尝试在3种不同的浏览器中签入--相同的行为。内容保持与左对齐。

​

body {
  line-height: 1.5;
  min-height: 100vh;
  font-size: 1.6rem;
  max-width: 120rem;
  min-width: 60rem;
  margin: 0 auto;
}

.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main {
  min-height: 75vh;
  width: 50%;
}

<main class="main flex">
  <div class="main__description">
    <h2>Title</h2>
    <p>Paragraph</p>
  </div>
  <div class="main__hours">
    <h2>Title</h2>
    <p>Paragraph</p>
  </div>
</main>

​

Answer 1

在width: 50%;上有.main，它只指示这个容器使用屏幕的一半。要解决这个问题，请将margin: auto;添加到.main中，以使父服务器居中。

​

body {
  line-height: 1.5;
  min-height: 100vh;
  font-size: 1.6rem;
  max-width: 120rem;
  margin: 0 auto;
}

.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main {
  min-height: 75vh;
  width: 50%;
  margin: auto;
}

<main class="main flex">
  <div class="main__description">
    <h2>Title</h2>
    <p>Paragraph</p>
  </div>
  <div class="main__hours">
    <h2>Title</h2>
    <p>Paragraph</p>
  </div>
</main>

​

另一个选项：

将.main容器设置为width: 100%;，以便justify-content: center;将其放置在屏幕的中心，而不是屏幕的1/2中心。

​

body {
  line-height: 1.5;
  min-height: 100vh;
  font-size: 1.6rem;
  max-width: 120rem;
  margin: 0 auto;
}

.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main {
  min-height: 75vh;
  width: 100%;
}

<main class="main flex">
  <div class="main__description">
    <h2>Title</h2>
    <p>Paragraph</p>
  </div>
  <div class="main__hours">
    <h2>Title</h2>
    <p>Paragraph</p>
  </div>
</main>

​

侧注：如果您想要响应，请删除body上的min-width。

Answer 2

这两个div实际上对齐正确，但它们的内容(h2和p)却不对齐。一个简单的解决方案是将text-align: center设置为<main>元素，或者将display: flex添加到两个divs中：

.main__description,
.main__hours {
    display: flex;
    flex-direction: column;
    align-items: center;
}