web-dev-qa-db-ja.com

フレックスアイテムの同じ高さの子

flexboxレスポンシブグリッドの作成に問題があり、誰かが私を正しい方向に向けることができることを望んでいました。

すべての.blockdivを同じ高さにし、.bottomdivを絶対的に一番下に配置したいと思います。これは実際には現在のソリューションで機能していますが、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>
htmlcssflexboxgrid-layout
10
KennyDope

これは、一般的にflexboxまたはCSSでは不可能です。

フレックスコンテナの初期設定はalign-items: stretchです。これにより、フレックスアイテムは 交差軸 の全長に拡張されます。これは、「フレックス等高列」として知られているものです。

覚えておくべきいくつかの注意事項は次のとおりです。

  • 等しい高さの列は、フレックスコンテナのchildrenにのみ適用されます。つまり、フレックスアイテムは同じ親を持っている必要があります。それ以外の場合、同じ高さの機能は適用されません。

    あなたの質問：

    行のすべてのh2見出しを同じ高さにしたいと思います。これは何らかの方法で可能ですか？

    CSSではありません。 h2は異なるコンテナに存在するため、兄弟ではなく（従兄弟に似ています）、同じ高さは適用されません。

  • flexboxの等しい高さの列は1つのフレックスラインにのみ適用されます。折り返しによって作成された他のラインのアイテムは、独自の等しい高さのラインを確立します。つまり、 等しい高さの列複数行のフレックスコンテナでは機能しません 。

  • align-selfプロパティを個々のフレックスアイテムで使用して、align-itemsをオーバーライドできます。これにより、同じ高さの機能が機能しなくなる可能性があります。

  • フレックスアイテムの高さを指定すると（例：height: 300px）、そのアイテムのalign-itemsとalign-selfの両方が上書きされ、同じ高さの設定は無視されます。

  • この投稿では、flex-direction: rowのコンテナに焦点を当てています。コンテナがflex-direction: columnの場合、等しい高さは等しい幅になります-）。詳細なレビューは次のとおりです。 フレックスアイテムが親コンテナの幅ではなくコンテンツの幅を取るようにする

関連：

13
Michael_B

私はあなたの例に基づいてjQueryソリューションを考案しました。

一部の（サブ）子を整列させる各親要素と、子要素のセレクターを含むdata-eh要素にクラス「eh」（等しい高さ）を追加します。

<div class="row eh" data-eh='["h2",".block-list",".bottom"]'>

次に、この関数を使用します。

$('.eh').each(function(){  
  var $this = $(this);
  var equalHeightSelectors = $this.data('eh');  
  $.each(equalHeightSelectors, function( index, value ) { 
    var min_height = 0;
    var $children = $this.find(value);
    $children.each(function(){
      var $el = $(this);
      if($el.height() > min_height){  
        min_height = $el.height();
      }
    });
    $children.height(min_height);
  });
});

https://codepen.io/pwkip/pen/oNvxNYZ

1
Jules Colle