我正在使用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>
真正的标题被赋予了一个边缘,这将保持它总是比背景更窄,这样不会影响效果.
为了使这一点不那么明显,我给了它一个中心文本
