0

このHTMLを検討してください

<div class="container">
  <div class="element">
    <div class="top">
      <div>A</div>
      <div>B</div>
    </div>
    <hr/>
    <div class="bottom">
      <div>C</div>
    </div>
  </div>
  <div class="element">
    <div class="top">
      <div>A</div>
    </div>
    <hr/>
    <div class="bottom">
      <div>B</div>
      <div>C</div>
    </div>
  </div>
    <div class="element">
    <div class="top">
      <div>A</div>
    </div>
    <hr/>
    <div class="bottom">
      <div>B</div>
    </div>
  </div>
</div>

水平方向のルールが整列するように、フレックスボックスを使用して要素を水平方向に並べたいと思います。要素のベースラインが水平バーalign-items: baselineにあることを確認できれば、それは正しいことのようです。div

何かをいじるには、この codepen リンクを参照してください。

このようなブロック要素のベースラインを制御するにはどうすればよいですか?

4

2 に答える 2

0

水平方向のルールが整列するように、フレックスボックスを使用して要素を水平方向に並べたいと思います。align-items:baseline は正しいことを行うようです

align-items: baseline異なる要素を別の要素に対して整列させたいため (テキストのベースラインに基づいて同じ要素を整列させるのhrではなく)、ここでは役に立ちません。

s の高さを固定して作業できる場合は.element、マークアップを変更せずに、次のようにネストしてandflexを均等化できます。.top.bottom

.top, .bottom { 
    height: 49%; 
    display: flex; flex-direction: column;
    align-items: center;
}
.top > div, .bottom > div { flex: 0 0 auto; }

そして、.top1 つを下 (つまり の近くhr) に揃えるには、次のように を実行しますmargin-top: auto。

.top > div { margin-top: auto; }

これはまた、あなたのflex-wrap: wrap. 以下の例で、フィドル ペインの幅またはウィンドウ サイズを変更してみてください。

完全なサンプル スニペット:

* { box-sizing: border-box; padding: 0; margin: 0; }
.container {
    height: 320px; border: 1px solid #ddd;
    display: flex; flex-wrap: wrap;
    align-items: center;
}
.element {
    flex: 1 1 auto;
    height: 120px; width: 200px;
    padding: 0.5em;
}
.top, .bottom { 
    height: 49%; 
    display: flex; flex-direction: column;
    align-items: center;
}
.top > div, .bottom > div { flex: 0 0 auto; }
.top > div { margin-top: auto; }
<div class="container">
  <div class="element">
    <div class="top">
      <div>A</div>
      <div>B</div>
    </div>
    <hr/>
    <div class="bottom">
      <div>C</div>
    </div>
  </div>
  <div class="element">
    <div class="top">
      <div>A</div>
    </div>
    <hr/>
    <div class="bottom">
      <div>B</div>
      <div>C</div>
    </div>
  </div>
    <div class="element">
    <div class="top">
      <div>A</div>
    </div>
    <hr/>
    <div class="bottom">
      <div>B</div>
    </div>
  </div>
</div>

フィドル: http://jsfiddle.net/abhitalks/vym76nyn/

コードペン: http://codepen.io/anon/pen/ZbOyzE

.

于 2015-09-21T10:23:05.483 に答える