Flexbox：当一组项目位于页面的中心时，放在底部的单个项目中

时间：2018-06-03 08:59:59

标签： css flexbox bootstrap-4

我使用了 Bootstrap 4 和一些自定义CSS制作了包含所有项目的英雄部分，但其中一部分水平居中和。

例外情况是我要在页面底部对齐的一个项目，并且仍然保持水平居中。 

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline, a.nounderlie:hover {
  text-decoration: none;
}
.page-wrapper {
  min-height: 100%;
}
.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
}
.hero img {
  width: 100%;
}
.hero.type-text h1 {
  color: #000;
}
.hero.hero-short {
  max-height: 768px;
}
section.type-text h3 {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 0;
}
section.type-text h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 1.5rem;
}
section.type-text p {
  font-weight: 500;
}
.allcases {
  text-align: center;
  font-weight: 700;
  margin-top: auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
  <section class="container d-flex hero type-text">
    <div>
      <h4 class="text-center m-0">Next item</h4>
      <h1 class="display-1 text-center">
        <a class="inherit nounderlie" href="#">Lorem</a>
      </h1>
    </div>

    <p class="allcases">
      <a class="inherit" href="#">See all items</a>
    </p>
  </section>
</div>

“查看所有项目”确实停留在底部（感谢margin-top: auto），但未居中。从一行到另一列改变弹性方向会影响整个布局，因此不是这样。

什么是可行的解决方案？

3 个答案:

答案 0 :(得分：0)

您应该使用flex-direction: column。这是一个理想的用例。使用row布局来实现您想要的，即让项目水平居中是不可行的。你最好不要使用flex，而是使用边距。如果您真的希望使用flex-direction: row，那么我能想到的唯一解决方案是使用position: absolute或使用负边距。但是不会推荐它，因为只需使用flex-direction: column即可轻松完成您想要的内容。

这是我通过更改2个属性实现的结果。 enter image description here

将样式更新为

// Only added flex-direction: column to this
.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

// This is to target the first div, i.e. the div that contains next item and Lorem, since the div doesn't have a class.
.hero > div { 
  margin-top: auto;
}

答案 1 :(得分：0)

答案很简单。将容器的flex-flow更改为column。

flex-flow:column;

现在你有两个flex项：div，包含你的标题和其他链接以及页脚-p。第一个技巧是使你的div增长，而p-tag保持不变。所以分配

flex: 1 auto;

到你的div和

flex: 0 auto;

到您的p-tag。 完成后，您必须添加

display: flex; 
justify-content: center; 
flex-flow: column;

也是你的div。使它成为一个弹性盒本身。 您的p-tag不需要更多关注，您也可以删除不必要的边距。

这应该可以解决问题。

答案 2 :(得分：0)

您需要允许换行并将宽度设置为div，假设站在顶部

允许换行，使用类

 <section class="container d-flex hero type-text flex-wrap">

对于di，你可以这样做：

.hero>div {
  width:100%;
}


html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline, a.nounderlie:hover {
  text-decoration: none;
}

.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
}
.hero>div {
  width:100%;
}
.hero img {
  width: 100%;
}
.hero.type-text h1 {
  color: #000;
}
.hero.hero-short {
  max-height: 768px;
}
section.type-text h3 {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 0;
}
section.type-text h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 1.5rem;
}
section.type-text p {
  font-weight: 500;
}
.allcases {
  text-align: center;
  font-weight: 700;
  margin: auto auto 0 auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
  <section class="container d-flex hero type-text flex-wrap">
    <div>
      <h4 class="text-center m-0">Next item</h4>
      <h1 class="display-1 text-center">
        <a class="inherit nounderlie" href="#">Lorem</a>
      </h1>
    </div>

    <p class="allcases">
      <a class="inherit" href="#">See all items</a>
    </p>
  </section>
</div>

另一种选择是使用flex-column类

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline, a.nounderlie:hover {
  text-decoration: none;
}

.hero {
  height: 100vh;
  overflow-y: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
  justify-content: center;
  align-items: center;
}

.hero img {
  width: 100%;
}
.hero.type-text h1 {
  color: #000;
}
.hero.hero-short {
  max-height: 768px;
}
section.type-text h3 {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 0;
}
section.type-text h4 {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
  margin-top: 1.5rem;
}
section.type-text p {
  font-weight: 500;
}
.allcases {
  text-align: center;
  font-weight: 700;
  margin: auto auto 0 auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-wrapper">
  <section class="container d-flex flex-column hero type-text ">
    <div>
      <h4 class="text-center m-0">Next item</h4>
      <h1 class="display-1 text-center">
        <a class="inherit nounderlie" href="#">Lorem</a>
      </h1>
    </div>

    <p class="allcases">
      <a class="inherit" href="#">See all items</a>
    </p>
  </section>
</div>

在两个示例中，

都将所有情况的边距重置为：

  margin: auto auto 0 auto;

将其粘在容器底部，无论弯曲方向如何。

相关问题
最新问题