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

概述我正在使用flexbox来调整页面中间的内容块,现在我愿意将标题与外部内容块对齐 在图像中,您可以看到需要发生什么 这是我目前的结果： 这就是它需要的样子 因此,当缩放浏览器时,如果有空格,内容将进入第一行,那么标题需要随着时间的推移而增长. 这是一个带有flexbox的代号 .flex { display: flex; flex-wrap: wrap; justify-content 我正在使用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 >  <header>    header needs to be alignd with the container outer part  </header>  <div >      <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>

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

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

总结

以上是内存溢出为你收集整理的html – 标题的Flexbox宽度与内容的外部部分对齐全部内容，希望文章能够帮你解决html – 标题的Flexbox宽度与内容的外部部分对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。