Flexbox ширина заголовка, выровненная с внешней частью содержимого

Ответ 1

Насколько я знаю, решение вашего вопроса отсутствует, используя только CSS и модель гибкой коробки.

Если вы хотите только выровнять фон заголовка, вы можете подделать его.

Вам нужен еще один контейнер 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 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>

Ответ 2

Задача № 1

При взгляде на ваш код у вас есть поле 10px, которое применяется к каждому ящику:

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

Итак, одна проблема, с которой вы столкнетесь при попытке выровнять края заголовка с краями окна, состоит в том, что есть дополнительные 10 пикселей прозрачного пространства за границей каждого окна. Но вы просите заголовок выравниваться с рамкой поля. Таким образом, мы можем либо удалить маржу из каждого окна, либо отрегулировать ширину заголовка. Я пошел с последним в моем решении ниже.

Задача № 2

Вы указали фиксированную ширину для каждого поля (300 пикселей). Это затрудняет совпадение ширины заголовка с рядом строк. Что происходит, когда экран имеет ширину 750 или 1150 пикселей? Ящики не растягиваются, чтобы заполнить ширину, в результате создается зазор, и строка ящика не выравнивается с заголовком.

Ширина строки окна равна 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 */
}

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

ПРИМЕЧАНИЕ. Этот ответ может быть или не быть именно тем, что вы ищете. Вопрос не касался всех деталей (например, "можно ли корректировать поля?", "Регулируются ли ширины коробки?", "Являются ли медиа-запросы не опцией или просто тем, чего вы надеетесь избежать?" ). Поэтому моя цель в этом ответе заключалась в том, чтобы предложить некоторые концепции, которые, надеюсь, доставят вас туда, куда вы хотите отправиться. AT MINIMUM, заголовок и поля выравниваются во всех размерах экрана: -)

Ответ 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 (сама фиксированная ширина) на строку, что будет происходить всякий раз, когда область просмотра достигает определенной ширины.

Ширина заголовка и ширина окна просмотра, в котором он изменяется, будут равны общей ширине разделов в одной полной строке плюс общая ширина полей между ними, а именно 300 пикселей, 620 пикселей, 940 пикселей, 1260px, 1580px и 1900px. Я использовал медиа-запросы для выполнения переключения в этих точках.

Примечание. Из-за проблем специфичности, возникающих при попытке переопределить свойство с помощью медиа-запросов, я разместил 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>

Ответ 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;

}