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

Question

我正在使用flexbox在页面中间对齐我的内容块,现在我愿意将标题与外部内容块对齐

在图像中,您可以看到需要发生的事情

这是我目前的结果:

这就是它需要的样子

因此,当缩放浏览器时,如果有空间,内容将转到第一行,那么标题需要在此时增长.

这是一个带有flexbox的codepen

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

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

如果不使用媒体查询并保持内容框大小相同,这是否可行？

*可以删除填充和边距

Answer 1

挑战#1

在查看代码时,每个框都应用10px的边距:

section {
    background: red;
    width: 300px;
    height: 200px;
    margin: 10px;
}

因此,在尝试将标题边缘与框边缘对齐时会遇到的一个问题是,每个框的边框之外还有10px的透明空间.但是你要求标题与盒子的边框对齐.因此,我们可以从每个框中删除边距,或者调整标题的宽度.我已经在下面的解决方案中使用了后者.

挑战#2

您已为每个框指定了固定宽度(300px).这使得标题宽度与框行匹配变得困难.屏幕宽度为750px或1150px时会发生什么？这些框不会拉伸以填充宽度,因此会创建间隙,并且框行不会与标题对齐.

框行宽为960px,但标题宽度为1150px.

一种可能的解决方案(或正确方向的步骤)

• 将flexbox对齐column方向以垂直堆叠标题和框(包装在新容器中)
• 使用嵌套的flexbox对齐行中的框
• 使用calc的宽度值
• 使用媒体查询进行屏幕调整

HTML

<article class="flex">
    <header>
        Header needs to be alignd with the container outer part
    </header>
    <div id="nested-inner-container"><!-- new container for nested flexbox -->
        <section>content</section>
        <section>content</section>
        <section>content</section>
        <section>content</section>
        <section>content</section>
        <section>content</section>
    </div>
</article>

CSS

body {  margin: 0; }

.flex {
    display: flex;
    flex-direction: column; /* main groups (header and div) in column direction */
    align-items: center;
}

header {
    height: 50px;
    width: calc(100% - 20px); /* width accounts for left and right box margins */
    background-color: blue;  
}

#nested-inner-container {
    display: flex; /* box group (flex item) becomes flex container, as well */
    justify-content: center;
    flex-wrap: wrap;
    width: 100%; /* width equal to header width */
}

section {
    flex: 1 1 calc(25% - 80px); /* flex basis equals four boxes per row less margins */
    height: 200px;
    margin: 10px;
    background: red;
}

@media screen and (max-width: 1500px) {
  section { flex-basis: calc(33.33% - 60px); } /* three boxes per row less margins */
}    
@media screen and (max-width: 1250px) {
  section { flex-basis: calc(50% - 40px); } /* two boxes per row less margins */
}
@media screen and (max-width: 1000px) {
  section { flex-basis: calc(100% - 20px); } /* one box per row less margins */
}

演示:http://codepen.io/anon/pen/wKgVYb

注意:这个答案可能正是您正在寻找的,也可能不是.这个问题没有解决所有细节问题(例如"可以调整边距吗？","框宽度是否可调？","媒体查询不是一种选择,还是只是你希望避免的东西？").所以我在这个答案中的目标是提供一些概念,希望能够让你到达目的地.在最小值,标题和框对齐所有屏幕尺寸:-)

Answer 2

据我所知，仅使用 CSS 和弹性盒模型无法解决您的问题。

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

您需要另一个弹性容器，它将为您提供与真实规则相同的背景。（这将仅用于此......不是真正的语义）

.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>

真正的标题有一个边距，使其始终比背景窄，这样就不会破坏效果。

为了让这一点不那么明显，我给了它一个居中的文本