Вопрос по css, flexbox, css3, html, grid-layout – Равный рост детей из гибких предметов

8

У меня возникла проблема с созданием адаптивной сетки flexbox, и я надеялся, что кто-то может указать мне правильное направление.

Я хочу, чтобы все.block div должен быть равной высоты, а.bottom div абсолютно позиционируется снизу. Это на самом деле работает в текущем решении, нокогдаh2 заголовок слишком длинный и достигает 2 строк, я хочу, чтобы всеh2 заголовки ряда должны быть одинаковой высоты.

Возможно ли это как-то?

Я сделал Codepen, чтобы проиллюстрировать проблему:http://codepen.io/kenvdbroek/pen/eZKdEQ

h1,
h2,
h3 {
  margin: 0;
}
body {
  margin: 0;
  padding: 0;
}
ul.clean-list {
  margin: 0;
  padding: 0;
}
ul.clean-list li {
  list-style: none;
  margin-bottom: 5px;
}
li:last-child {
  margin-bottom: 0;
}
.container {
  padding-top: 50px;
}
.block {
  margin-bottom: 30px;
  border: 1px solid red;
}
.block > .bottom {
  border: 1px solid blue;
}
@media only screen and (min-width: 480px) {
  .row.row-flex-wrapper::before,
  .row.row-flex-wrapper::after {
    content: none !important;
  }
  .row.row-flex-wrapper::after {
    clear: none;
  }
  .row.row-flex-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
  }
  .row.row-flex-wrapper .column {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    float: none;
    border: 1px solid orange;
  }
  .row.row-flex-wrapper .column > .block {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
  }
  .row.row-flex-wrapper .column > .block > .block-list {
    flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
  }
  .row.row-flex-wrapper .column > .block > h2 {}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container .row .column {
    width: 50%;
  }
}
<div class="container">
  <div class="row row-flex-wrapper">
    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>Title 1</h2>
        <div class="block-list">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/button">Some link</a>
            </li>
            <li><a href="/button">Some link 2</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>Another very long title which is actually toooo long...</h2>
        <div class="block-list">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer...</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/another-button">Another button</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="column col-sm-6 col-md-4,">
      <div class="block">
        <h2>Title</h2>
        <div class="block-list">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard dummy text...</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/button">Very nice link</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>This block is cool!</h2>
        <div class="block-list">
          <p>Some text here. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard dummy
            text...</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/button">Another link</a>
            </li>
            <li><a href="/button">Check this item</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>Title Block</h2>
        <div class="block-list">
          <p>Go check out this item... Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard
            dummy text...</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/button">Button</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>Buttonssssss</h2>
        <div class="block-list">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="#button">Button</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>Title</h2>
        <div class="block-list">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/button">Link to item</a>
            </li>
            <li><a href="/button">Link to item</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>Title</h2>
        <div class="block-list">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/button">Link to item</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="column col-sm-6 col-md-4">
      <div class="block">
        <h2>Another very very very very very very very long title</h2>
        <div class="block-list">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
            with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="bottom">
          <ul class="clean-list">
            <li><a href="/button">Button to item</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Работает ли это (с Zurb Foundation XY Grid):codepen.io/iamrobert/pen/eyeyBB iamrobert

Ваш Ответ

1   ответ
11

В целом это невозможно с flexbox или CSS.

Начальная настройка гибкого контейнераalign-items: stretch, Это заставляет гибкие элементы расширяться на всю длинупоперечная ось, Это то, что известно как"изгиб столбцов равной высоты".

Вот несколько заметок, которые нужно иметь в виду:

Столбцы равной высоты применяются только кдети гибкого контейнера. Другими словами, элементы flex должны иметь одного и того же родителя. В противном случае функция равной высоты не применяется.

Ваш вопрос:

Я хочу, чтобы всеh2 заголовки ряда должны быть одинаковой высоты. Возможно ли это как-то?

Не с CSS. Посколькуh2существуют в разных контейнерах, они не братья и сестры (они больше похожи на двоюродных братьев), поэтому равные высоты не применяются.

Столбцы одинаковой высоты в flexbox применяются только к одной линии flex. Элементы на других линиях, создаваемые переносом, устанавливают свою собственную линию равной высоты. Это означает, чтостолбцы одинаковой высотыне делайте работать в многострочном гибком контейнере.

align-self свойство может использоваться для отдельных элементов flex для переопределенияalign-items, который может сломать функцию равной высоты.

Указав высоту на гибком элементе (например,height: 300px), и то и другоеalign-items а такжеalign-self переопределяются для этого элемента, а настройка равной высоты игнорируется.

Этот пост посвящен контейнеру сflex-direction: row, Если контейнерflex-direction: column, затемравная высота становитсяравная ширина, Вот подробный обзор:Заставьте flex-элементы принимать ширину содержимого, а не ширину родительского контейнера.

Связанные с:

Строки одинаковой высоты в гибком контейнереКак отключить столбцы одинаковой высоты в Flexbox?

Похожие вопросы