CSS-сетка как дочерний элемент flexbox не ведет себя так, как ожидалось

Я часто создавал гибкую сетку с тремя столбцами с display: grid CSS display: grid. Моя разметка HTML внутри сетки имеет 3 элемента div, поэтому сетка создает 3 столбца

display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

enter image description here

и при изменении размера окна он обрушивается на 1 столбец, как и ожидалось:

https://codepen.io/smlombardi/pen/oqMjrd?editors=1100

.hero-modules {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.hero-modules .hero-item {
  border: 1px solid #000;
  text-align: center;
}

.hero-modules .hero-item h3 {
  font-size: 22px;
  text-align: center;
}
<div class="hero-modules">
  <div class="hero-item">
    <div>
      <h3>Title of Item</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
    </div>
    <div>
      <a class="hero-read-more">Read more</a>
    </div>
  </div>

  <div class="hero-item">
    <div>
      <h3>Title of Item</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
    </div>
    <div>
      <a class="hero-read-more">Read more</a>
    </div>
  </div>

  <div class="hero-item">
    <div>
      <h3>Title of Item</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
    </div>
    <div>
      <a class="hero-read-more">Read more</a>
    </div>
  </div>
</div>

ОТВЕТЫ

Ответ 1

Простой ответ:

Автоматическая ширина контейнера сетки - это то, что было бы, если бы оно не было контейнером сетки.

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

Во втором примере ширина контейнера сетки представляет собой ширину элемента гибкого предка с поведением по умолчанию, который зависит от ширины его содержимого, текст "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae". (Чтобы сделать это более прямо, ширина контейнера сетки - это ширина предыдущего, цитируемого предложения.)

Расширенный ответ:

Контейнер сетки (.hero-modules) имеет width: auto (по умолчанию). Per https://drafts.csswg.org/css-grid/#grid-container:

В качестве блока уровня блока в контексте форматирования блока он имеет размер как блок-блок, который устанавливает контекст форматирования с автоматическим встроенным размером, рассчитанным как для необработанных блоков блоков.

Термин "auto inline size" - это еще один способ сказать width: auto в этом случае. ("Автострочный размер" - height: auto в вертикальном тексте.)

"Блок-блок, который устанавливает контекст форматирования", совпадает с полем с display: flow-root. Изменение display: grid для display: flow-root продемонстрирует, какая ширина используется для вычисления ширины контейнера сетки в результате width: auto.

Итак, теперь мы знаем, откуда берется размер сетевого контейнера.

Размер гибкого элемента исходит из flex-grow: 0 и flex-shrink: 1 (по умолчанию), что уменьшает его ширину и не растет. Основой для ширины элемента flex является flex-basis: auto (по умолчанию), который разрешает flex-basis: content. Содержание - это текст "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae".

Итак, теперь мы знаем, почему элемент flex не расширяется и на чем основана его ширина.

Фиксация этого макета:

Этот гибкий макет не должен быть основан на столбцах; он должен быть основан на строке. Столбцы находятся внутри единственного элемента гибкости, но не сами гибкие элементы, а гибкость размеров требуется по оси x, а не по оси y.

Итак, flex-direction: column должен стать flex-direction: row.

Гибкая компоновка должна расти (по оси x), чтобы соответствовать доступному пространству, поэтому flex-grow: 1 необходимо указать в элементе flex (.box).

Наконец, значение grid-template-columns должно использовать auto-fit, а не auto-fill если желательно горизонтальное центрирование. Элементы сетки могут быть центрированы с помощью justify-content: center примененного к элементу контейнера сетки.

(С auto-fill для размещения макета будут помещены невидимые элементы сетки-заполнителя, что приведет к выравниванию трех текущих элементов сетки слева с помощью пучка невидимых элементов-заполнителей, заполняющих оставшееся пустое пространство справа. При auto-fit эти элементы сетки заполнителя просто отбрасываются и пространство освобождается для горизонтального выравнивания.)

.hero {
  background-color: pink;
  display: flex;
  min-height: 600px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
}

.box {
  border: 1px dotted #000;
  flex-grow: 1;
  text-align: center;
}

.button-unit {
  text-align: center;
  margin-top: 20px;
}

.hero-modules {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: center;
}

.hero-modules .hero-item {
  border: 1px solid #000;
  text-align: center;
}

.hero-modules .hero-item h3 {
  font-size: 22px;
  text-align: center;
}
<div class="hero">
  <div class="box">
    <div>
      <h1 class="hero-heading">Check out these new features</h1>
    </div>

    <div class="hero-modules">
      <div class="hero-item">
        <div>
          <h3>Title of Item</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
        </div>
        <div>
          <a class="hero-read-more">Read more</a>
        </div>
      </div>

      <div class="hero-item">
        <div>
          <h3>Title of Item</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
        </div>
        <div>
          <a class="hero-read-more">Read more</a>
        </div>
      </div>

      <div class="hero-item">
        <div>
          <h3>Title of Item</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
        </div>
        <div>
          <a class="hero-read-more">Read more</a>
        </div>
      </div>
    </div>

    <div class="button-unit">
      <button class="btn btn-secondary mb-3">Got It</button>
      <p>
        <a class="remind-me-later" href="">Remind me later</a>
      </p>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestias earum beatae, minima provident sunt a et? Voluptatibus sequi ipsum ad asperiores soluta odio, nam nobis quas non totam ut officiis itaque eveniet, maiores saepe id cum consequuntur.
      Molestias suscipit quia laudantium laborum nemo ab officia, nihil esse mollitia sunt!
    </div>
  </div>
</div>

Ответ 2

Add **display:flex** property to your main container.

 .Main {
     display:flex;
  }
 div {
   flex: 1;
 }

Затем все div будут действовать как сетка для получения дополнительной информации, см. Ссылку ниже. https://www.w3schools.com/css/css3_flexbox.asp

Ответ 3

Вы можете сделать это, используя display: flex property. Ниже приведен код для него.

.hero-modules {
  display: flex;
}

.hero-modules .hero-item {
  flex: 1;
  margin: 10px;
  border: 1px solid #000;
  text-align: center;
}

.hero-modules .hero-item h3 {
  font-size: 22px;
  text-align: center;
}
<div class="hero-modules">
  <div class="hero-item">
    <div>
      <h3>Title of Item</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
    </div>
    <div>
      <a class="hero-read-more">Read more</a>
    </div>
  </div>

  <div class="hero-item">
    <div>
      <h3>Title of Item</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
    </div>
    <div>
      <a class="hero-read-more">Read more</a>
    </div>
  </div>

  <div class="hero-item">
    <div>
      <h3>Title of Item</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta est ipsa recusandae.</p>
    </div>
    <div>
      <a class="hero-read-more">Read more</a>
    </div>
  </div>
</div>