html – 标题的Flexbox宽度与内容的外部部分对齐

前端之家收集整理的这篇文章主要介绍了html – 标题的Flexbox宽度与内容的外部部分对齐前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用flexBox来调整页面中间的内容块,现在我愿意将标题与外部内容块对齐

在图像中,您可以看到需要发生什么

这是我目前的结果:

这就是它需要的样子

因此,当缩放浏览器时,如果有空格,内容将进入第一行,那么标题需要随着时间的推移而增长.

这是一个带有flexBox的代号

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

http://codepen.io/Dirkandries/pen/XmpGzw

是否可以不使用媒体查询并保持内容框相同的大小?

*可以删除填充和边距

解决方法

据我所知,只有CSS和flex Box模型才能解决您的问题.

如果你想要的只是对齐标题的背景,你可以伪造它.

您需要另一个flex容器,这将为您提供与实际相同规则的背景. (而且这将只用于这个…不是真正的语义)

.flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}
header{
  width: 100%;
  background: lightblue;
  height: 50px;
  margin: 0px 170px;
  text-align: center;
}
section{
  background: red;
  width: 300px;
  height: 200px;
  margin: 10px;
}
.headerbkg {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: hidden;
  z-index: -1;
}

.headerbkg div {
  background: lightblue;
  width: 300px;
  height: 50px;
  margin: 0px 10px;
}
<article class="flex">
  <header>
    Header needs to be alignd with the container outer part
  </header>
  <div class="headerbkg">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
  </div>
  <section>content</section>
  <section>content</section>
  <section>content</section>
  <section>content</section>
  <section>content</section>
  <section>content</section>
</article>

真正的标题被赋予了一个边缘,这将保持它总是比背景更窄,这样不会影响效果.

为了使这一点不那么明显,我给了它一个中心文本

原文链接:https://www.f2er.com/html/229467.html

猜你在找的HTML相关文章