等しい高さカラム

あなたが私自身のような古い学校の人であるならば、あなたはばかなデザインに苦労している日を覚えているかもしれません.
特に等しい必要がある列;場合によっては、同じ高さの列を作るためにJavaScriptを使用していました.
今日、幸いにも、我々はflexboxと格子オプションを持ちます.
今日は、Flexboxを使用して等しい高さのカードにクールなソリューションを示すつもりです.
我々が直面している闘争を説明するために、私はこの3列レイアウトを作りました.
下の画像で見ることができるように、タイトル、段落、ボタンがあります.私たちが理想的には、すべての列は、高さと等しいとボタンを下にすることです.

HTML構造

この例では、CSSのアスペクトにフォーカスする簡単なセットアップを使用します.

<div class="container">
  <div class="col">
    <h3>Title 1</h3>
    <p>I'm baby kickstarter subway tile man bun, pitchfork etsy YOLO pork belly biodiesel banjo. Succulents hell of green juice art party normcore meh poutine venmo aesthetic raclette tbh tousled. Polaroid ennui iceland raclette, ugh mustache subway tile glossier gluten-free tacos tilde. Asymmetrical tumblr farm-to-table, DIY 3 wolf moon vape next level flexitarian gastropub health goth raw denim. Hella cliche franzen poutine readymade everyday carry man bun. Raw denim offal you probably haven't heard of them four dollar toast bitters tbh glossier readymade pitchfork.</p>
    <a href="#">Button</a>
  </div>
  <div class="col">
    <h3>Title 2</h3>
    <p>I'm super short</p>
    <a href="#">Button</a>
  </div>
  <div class="col">
    <h3>Title 2</h3>
    <p>Asymmetrical tumblr farm-to-table, DIY 3 wolf moon vape next level flexitarian gastropub health goth raw denim. Hella cliche franzen poutine readymade everyday carry man bun. Raw denim offal you probably haven't heard of them four dollar toast bitters tbh glossier readymade pitchfork.</p>
    <a href="#">Button</a>
  </div>
</div>

等しい高さカラム

まず基本的なスタイルを追加してみましょう.

.col {
  background: #efefef;
  padding: 2rem;
}
h3 {
  margin-bottom: 1rem;
}
a {
  display: block;
  background: teal;
  padding: 1rem;
  text-align: center;
  color: #fff;
  text-decoration: none;
  margin-top: 1rem;
}

今、どのように、我々は互いと等しい高さの隣にこれらのコラムを得ますか?

.container {
  display: flex;
}
.col {
  width: 33.33333%;
}

待ってください.
このコードを実行し、何が起こるかを見ましょう.

おお、すごい!我々は等しい高さの列を得たが、どのように我々は今、常に下にあるボタンを強制することができますか?

.col {
  display: flex;
  flex-direction: column;
}
p {
  flex: 1 1 auto;
}

我々は、同様にフレックス項目である列を設定し、方向は、列(一番下に)する必要があります.
次に、段落にフレックスルールを追加し、1を縮小し、縮小する必要があります.
これにより、この要素は、スペースが列内に残っている領域を占有します.
あなたがこのcodepenで見ることができる結果.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、Facebook