Проблема с распределением пространства во вложенном flexbox и CSS сетке - PullRequest
Новая
       13

Проблема с распределением пространства во вложенном flexbox и CSS сетке

1 голос
/ 11 мая 2019

Мой aside элемент и div.content должны, насколько я знаю, занять половину доступного пространства в div.container. Кроме того, сетка в div.content должна занимать все доступное вертикальное пространство.

Проблема заключается в том, что элементы сетки не могут иметь любую высоту (если не жестко заданы). Кроме того, все вертикальное пространство, занимаемое сеткой (из-за grid-gap), берется как из элемента aside, так и из div.content, что означает, что div.content ворует вертикальное пространство aside, и эти два элемента больше не являются такой же высоты.

Высота aside равна высоте div.content минус высота сетки.

В заключение отметим, что использование flexbox для div.content запрещено. Дочерние элементы, добавленные в div.content, ведут себя больше как его братья и сестры. 

* {
  box-sizing: border-box;
}

body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

html {
  height: 100%;
}

header,
footer {
  background-color: #1A1C22;
  height: 100px;
}

.container {
  flex: 1 0 400px;
  display: flex;
  flex-direction: column;
  padding-top: 12px;
}

aside {
  background-color: #6C757D;
  flex: 1 1 auto;
}

.content {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 20px;
  border: 2px solid blue;
}

section {
  background-color: #343A40;
  border: 1px solid red;
}
<body>
  <header></header>
  <div class="container">
    <aside></aside>
    <div class="content">
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
    </div>
  </div>
  <footer></footer>
</body>

1 Ответ

0 голосов
/ 15 мая 2019

Вы можете просто заставить его работать как в Chrome, так и в Firefox, явно , указав height вместо flex-basis и установив flex: 1 0 auto в .container. Также используйте flex: 1 вместо flex: 1 1 auto для content и aside (устанавливает flex-basis: 0 вместо auto ) - см. Демонстрацию ниже и fiddle: 

* {
  box-sizing: border-box;
}

body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

html {
  height: 100%;
}

header,
footer {
  background-color: #1A1C22;
  height: 100px;
}

.container {
  /* flex: 1 0 400px; */
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  height: 400px; /* added */
  flex: 1 0 auto; /* added */
}

aside {
  background-color: #6C757D;
  flex: 1; /* changed */
}

.content {
  flex: 1; /* changed */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 20px;
  border: 2px solid blue;
}

section {
  background-color: #343A40;
  border: 1px solid red;
}
<header></header>
<div class="container">
  <aside></aside>
  <div class="content">
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
  </div>
</div>
<footer></footer>

Есть несколько проблем с вышеуказанным решением:

  • это не так интуитивно понятно, что для flexbox для столбцов высота указана для правильного поведения,

  • обратите внимание, что разница между высотой aside и content составляет 4 пикселя, что явно является границей контента в 2 пикселя.

Использование CSS Grid для разметки

Сетка решает эти проблемы легко - флексбоксы хорошо подходят для одномерного решения, но в некоторых макетах, таких как этот, не соответствуют требованиям. Здесь я бы удалил оболочку container и использовал 4-рядный макет (grid-template-rows: 100px minmax(200px, 1fr) minmax(200px, 1fr) 100px;): 

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: 100px minmax(200px, 1fr) minmax(200px, 1fr) 100px;
}

aside {
  background-color: #6C757D;
}

.content {
  display: grid;
  grid-auto-rows: 1fr;
  grid-gap: 10px;
  border: 2px solid blue;
}

.content section {
  background-color: #343A40;
  border: 1px solid red;
}

header,
footer {
  background-color: #1A1C22;
}
<header></header>
<aside></aside>
<article class="content">
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>
<footer></footer>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...