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时会发生什么？这些框不会拉伸以填充宽度，因此会创建间隙，并且框行不会与标题对齐。

框行宽为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 */
}

DEMO：http://codepen.io/anon/pen/wKgVYb

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

Answer 2

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

真正的标题会有一个边距，使其始终比背景更窄，因此不会产生效果。

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

Answer 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中，而不是没有，从而使页面布局更加简单。

我倾向于将此代码段作为预防措施。

至于设置header的宽度，需要将其设置为固定宽度，只要section的浓度（固定宽度），就需要更改固定宽度线条发生变化，只要视口达到特定宽度就会发生。

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

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

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

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

Answer 4

It is much easier then it looks. Here is the CodePen: http://codepen.io/mikestratton/pen/PPmpKQ

Add the following two classes to your CSS:

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

Then change your HTML to:

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

Answer 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;

}

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

5 个答案:

一种可能的解决方案（或正确方向的步骤）