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

【问题标题】：Flexbox width of header aligned with outer part of content标题的 Flexbox 宽度与内容的外部部分对齐
【发布时间】：2015-10-14 08:08:59
【问题描述】：

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

在图片中你可以看到需要发生的事情

这是我目前的结果：

这就是它需要的样子

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

这是一个带有 flexbox 的 codepen

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

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

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

*可以去除内边距和边距

【问题讨论】：

没有边距和对齐内容：空格之间？这对你有用吗？
不，我需要周围的空间

标签： html css flexbox

【解决方案1】：

挑战#1

在查看您的代码时，每个框都有 10 像素的边距：

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

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

挑战#2

您已为每个框指定了固定宽度（300 像素）。这使得很难将标题宽度与框的行匹配。当屏幕为 750px 或 1150px 宽时会发生什么？框不会拉伸以填充宽度，因此会产生间隙，并且框行与标题不对齐。

框的行宽是 960 像素，而表头的宽度是 1150 像素。

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

将 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

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

【讨论】：

我确实喜欢您的回答，但这并不是我真正想要的，就像您已经说过的那样。内容框的宽度需要始终保持不变

【解决方案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>

真正的页眉有一个边距，使它总是比背景更窄，这样就不会影响效果。

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

【讨论】：

【解决方案3】：

以下是我的问题的地址。

<!DOCTYPE html>

<html>
    <head>
        <meta charset = "utf-8">

        <meta name    = "viewport"
              content = "width = device-width, initial-scale = 1.0"
        >

        <link href = "CSS/Example.css"
              rel  = "stylesheet"
              type = "text/css"
        >
    </head>

    <body>
        <header>
            Header needs to be alignd with the container outer part
        </header>

        <div class="flex">
            <section>content</section>
            <section>content</section>
            <section>content</section>
            <section>content</section>
            <section>content</section>
            <section>content</section>
        </div>
    </body>
</html>

CSS

html,
*
{
    border     : 0;
    box-sizing : border-box;
    margin     : 0;
    padding    : 0;
}

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

header
{
    background : blue;
    display    : block;
    height     : 50px;
    margin     : auto;
    width      : 300px;
}

@media only screen and (min-width : 620px)
{
    body header
    {
        width : 620px;
    }
}

@media only screen and (min-width : 940px)
{
    body header
    {
        width : 940px;
    }
}

@media only screen and (min-width : 1260px)
{
    body header
    {
        width : 1260px;
    }
}

@media only screen and (min-width : 1580px)
{
    body header
    {
        width : 1580px;
    }
}

@media only screen and (min-width : 1900px)
{
    body header
    {
        width : 1900px;
    }
}

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

首先，在 CSS 文件中有段...

*
{
    border     : 0;
    box-sizing : border-box;
    margin     : 0;
    padding    : 0;
}

通过将所有元素的border、margin 和padding 设置为0，您可以消除某些或所有浏览器可能为元素显示的那些属性的任何默认设置。通过添加box-sizing : border-box;，您所做的任何border 或padding 设置都将包含在元素的width 中而不是没有，从而使页面布局更加简单。

我倾向于包含这个 sn-p 作为预防措施。

至于设置header 的宽度，需要设置为固定宽度，只要视口达到特定宽度，就会发生这种情况。

标题的宽度，以及更改它的视口的宽度，将等于一整行中各部分的总宽度加上它们之间的边距的总宽度，即 300px、620px、940px、 1260 像素、1580 像素和 1900 像素。我已经使用媒体查询在这些点执行转换。

注意：由于在尝试使用媒体查询覆盖属性时引起的特殊性问题，我已将 body 放在每个媒体查询中 header 的定义前面。

由于header 的宽度不灵活且flex 主要用于分配section 的宽度，因此我将header 放置在flex 之外。

如果您对我的回答有任何疑问或意见，请随时回复。

【讨论】：

【解决方案4】：

这比看起来要容易得多。这是 CodePen：http://codepen.io/mikestratton/pen/PPmpKQ

将以下两个类添加到您的 CSS：

.sleft {
  background: red;
  width: 50%;
  height: 200px;
  margin: 0;
  float: left;
}
.sright{
  background: red;
  width: 50%;
  height: 200px;
  margin: 0;
  float: left;
}

然后将您的 HTML 更改为：

<article class="flex">
  <header>
    Header needs to be alignd with the container outer part
  </header>
  <section class="sleft">content</section>
  <section class="sright">content</section>
  <section class="sleft">content</section>
  <section class="sright">content</section>
  <section class="sleft">content</section>
  <section class="sright">content</section>
</article>

【讨论】：

我愿意保持内容框的大小相同，因此当其中 3 个适合 1 行时，您将获得其中 3 个并与周围的空格相结合
我不确定我是否理解您的要求。您将正确的图像显示为在每行中与标题对齐的两个内容框。如果您要求每行 3 个内容框，我可以这样做。
另外，您是否有所需的宽度（流体或定义）来执行此操作？您可以使用 100% 或以像素为单位设置，例如 900px。
标题必须是 100% 宽度

【解决方案5】：

它和你想要的不一样，但我试着做一些小技巧和 tweeks

http://codepen.io/anon/pen/GpEdKq

检查是否可以，或者您可以使用网格代替，它也会响应，对不起，如果它没有帮助你谢谢

HTML代码：

<article class="flex">
  <div class="wrapper">
  <header>
    Header needs to be alignd with the container outer part
  </header>


  <section>content</section>
  <section>content</section>
  <section>content</section>
  <section>content</section>
  <section>content</section>
  <section>content</section>
  </div>
</article>

css代码：

    body{
  margin: 0;
}
.wrapper{width:80%; margin-left:10%;margin-right:15%;}
.flex{
  display: flex;
  flex-wrap: wrap;
justify-content: center;
}
header{

  width: 100%;
  background: blue;
  height: 50px;
}
section{
  background: red;
  width: 300px;
  height: 200px;
  margin: 10px;
  float:left;

}

【讨论】：