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

Question

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

在图片中你可以看到需要发生什么

这是我目前的结果:

这就是它需要的样子

因此，当缩放浏览器时，如果有空间，内容将转到第一行，此时标题需要随之增长。

这是一个带有 flexbox 的代码笔

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

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

这是否可以在不使用媒体查询和保持内容框大小相同的情况下实现？

*padding和margin可以去掉

Answer 1

挑战 #1

在查看您的代码时，您对每个框应用了 10 像素的边距:

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

因此，您在尝试将页眉边缘与框边缘对齐时会遇到的一个问题是，在每个框的边界之外还有一个额外的 10px 透明空间。但是您要求页眉与框的边框 对齐。所以我们可以删除每个框的边距，或者调整标题的宽度。我在下面的解决方案中选择了后者。

挑战 #2

您为每个框指定了固定宽度 (300px)。这使得标题宽度与框行匹配变得困难。当屏幕为 750px 或 1150px 宽时会发生什么？框不会拉伸(stretch)以填充宽度，结果会产生间隙，并且框行不会与标题对齐。

框行宽度为 960px，但标题宽度为 1150px。

---

一种可能的解决方案(或朝着正确方向迈出的一步)

• 在 column 方向对齐 flexbox 以垂直堆叠 header 和 boxes(它们被包裹在一个新容器中)
• 使用嵌套的 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

注意:这个答案可能正是您要找的，也可能不是。这个问题并没有解决所有的细节(比如“边距可以调整吗？”，“框的宽度可以调整吗？”，“媒体查询不是一个选项还是你希望避免的事情？”)。所以我在这个答案中的目标是提供一些概念，希望能带你去你想去的地方。至少，标题和框在所有屏幕尺寸中对齐:-)