フレックスコンテナ内の同じ高さの行

Question 1

ご覧のとおりlist-items、最初のrowは同じheightです。しかし、2番目のアイテムrowは異なりheightsます。すべてのアイテムにユニフォームを付けてほしいheight。

固定の高さを与えずにフレックスボックスのみを使用してこれを達成する方法はありますか？

これが私の code

.list {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

スニペットを展開

Question 2

答えはいいえだ。

その理由は、フレックスボックスの仕様に記載されています。

6.フレックスライン

複数行のフレックスコンテナでは、各行のクロスサイズは、行にフレックスアイテムを含めるために必要な最小サイズです。

言い換えると、行ベースのフレックスコンテナに複数の行がある場合、各行の高さ（「クロスサイズ」）は、行にフレックスアイテムを含めるために必要な最小の高さです。

ただし、CSSグリッドレイアウトでは同じ高さの行が可能です。

CSSグリッドレイアウトの同じ高さの行

それ以外の場合は、JavaScriptの代替案を検討してください。

Question 3

あなたは今それを達成することができますdisplay: grid：

.list {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

スニペットを展開

グリッド自体はフレックスボックスではありませんが、フレックスボックスコンテナと非常によく似た動作をし、グリッド内のアイテムはフレックスにすることができます。

レスポンシブグリッドが必要な場合は、グリッドレイアウトも非常に便利です。つまり、グリッドに行ごとに異なる列数を設定する場合は、次のように変更できますgrid-template-columns。

grid-template-columns: repeat(1, 1fr); // 1 column
grid-template-columns: repeat(2, 1fr); // 2 columns
grid-template-columns: repeat(3, 1fr); // 3 columns

等々...

メディアクエリと組み合わせて、ページのサイズに応じて変更できます。

残念ながら、ブラウザでは（箱から出して）コンテナクエリ/要素クエリがまだサポートされていないため、ページサイズではなく、コンテナサイズに応じて列数を変更できます（これを使用すると便利です）再利用可能なWebコンポーネントを使用）。

グリッドレイアウトの詳細：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

ブラウザ間でのグリッドレイアウトのサポート：

https://caniuse.com/#feat=css-grid

Question 4

いいえ、固定の高さを設定する（またはスクリプトを使用する）ことなしにそれを達成することはできません。

これが私の2つの答えで、スクリプトを使用してそのようなことを実現する方法を示しています。

Question 5

これは、親の高さが固定されている場合に機能しているようです（ChromeとFirefoxでテスト済み）。

.child {
        height    : 100%;
        overflow  : hidden;
}

.parent {
        display: flex;
        flex-direction: column;
        height: 70vh; // ! won't work unless parent container height is set
        position: relative;
}

何らかの理由でグリッドを使用できない場合は、それが解決策である可能性があります。

Question 6

マッピングしているアイテムがわかっている場合は、一度に1行ずつ実行することでこれを実現できます。回避策であることはわかっていますが、機能します。

私の場合、行ごとに4つのアイテムがあったので、各行で4つの2つの行に分割しheight: 50%、削除しflex-grow、持っていて<RowOne />、<RowTwo />を使用し<div>ましたflex-column。これはトリックを行います

<div class='flexbox flex-column height-100-percent'>
   <RowOne class='flex height-50-percent' />
   <RowTwo class='flex height-50-percent' />
</div>

Question 7

あなたの場合、高さは自動的に計算されるので、これを
使用して高さを提供する必要があります

.list-content{
  width: 100%;
  height:150px;
}

Question 8

あなたはflexboxでできます：

ul.list {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: stretch;
    justify-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
li {
    width: 100px;
    padding: .5rem;
    border-radius: 1rem;
    background: yellow;
    margin: 0 5px;
}

<ul class="list">
  <li>title 1</li>
  <li>title 2<br>new line</li>
  <li>title 3<br>new<br>line</li>
</ul>

スニペットを展開

Question 9

「P」タグの高さを固定するか、「list-item」の高さを固定することでそれを行うことができます。

「P」の高さを固定してやった

オーバーフローは非表示にする必要があります。

.list{
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}
p{height:100px;overflow:hidden;}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Question 10

同じ高さの場合は、cssの「表示」プロパティを変更する必要があります。詳細については、所定の例を参照してください。

.list{
  display: table;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: table-cell;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>