web-dev-qa-db-ja.com

列の高さをブルマ（フレックスボックス）の最長の列に等しく設定する方法は？

私はBulma 0.4.0を使用していますが、答えはBulma自体に関連付けられていない可能性があります。

列の高さを他の列の高さに等しく設定するにはどうすればよいですか？ （下のスクリーンショットを参照）

編集：実際の動作を示すより多くのテキストを含むcodepen： https://codepen.io/anon/pen/vmKVbx

予想される行動：

expected behavior

実際の動作：

actual behavior

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<div class="columns">
  <div class="column">
    <p class="notification is-info">First column</p>
  </div>
  <div class="column">
    <p class="notification is-success">Second column</p>
  </div>
  <div class="column">
    <p class="notification is-warning">Third column</p>
  </div>
  <div class="column">
    <p class="notification is-danger">Fourth</p>
  </div>
</div>
cssflexboxbulma
10
curious

これは、このCSSルールを追加することによる簡単な解決策であり、Bulma CSSをafterにロードすることを確認します

.column {
  display: flex;
}

更新されたコードペン

スタックスニペット

<html>
  <head>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
  
    <style>
      .column {
        display: flex;
      }
    </style>

</head>
<body>
<div class="columns">
  <div class="column">
    <p class="notification is-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu consectetur lorem, nec facilisis dolor. Morbi rhoncus, mi sit amet ornare tincidunt, augue sem aliquet mauris, non pretium orci nisl at est. Curabitur placerat pharetra augue. Etiam non eros nulla. Praesent aliquet sem dui, id varius enim convallis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis mauris felis, sit amet consectetur augue sollicitudin id.</p>
  </div>
  <div class="column">
    <p class="notification is-success">Nulla a mauris vel erat elementum scelerisque. Cras mollis consequat neque, vitae sagittis nisl dapibus porttitor. Donec et rutrum ligula. Donec luctus iaculis orci, nec imperdiet felis semper quis. Nulla a convallis eros, facilisis hendrerit risus. Nulla sit amet porta quam. Nullam maximus tempus sem, dapibus dapibus purus sollicitudin vel. Phasellus at rhoncus odio. Quisque sit amet ornare dolor. Maecenas accumsan viverra tristique. Etiam vulputate nibh ipsum, at rutrum lacus hendrerit ut. Nunc sodales diam purus, in ultricies nulla consectetur sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ut tincidunt mauris.</p>
  </div>
  <div class="column">
    <p class="notification is-warning">Pellentesque eros tortor, pharetra in lorem quis, maximus hendrerit ex. Praesent nunc ante, elementum at congue ut, ultricies quis lectus. Aenean vel elementum risus. Vestibulum aliquet justo in ligula dictum commodo. Nullam condimentum ante vitae nulla dignissim, vitae interdum neque dapibus. Aenean nec quam egestas, viverra ex vel, tempus lectus. Quisque eu euismod neque. Mauris aliquam neque a porta condimentum. Cras eget nisi turpis. Aenean lacus velit, dapibus eu aliquam eget, aliquet id quam. Integer ultricies est quis erat facilisis congue vel efficitur ipsum. Nunc id varius orci, consequat vehicula libero. Morbi maximus, orci in efficitur feugiat, quam lacus lobortis elit, in blandit mauris dolor sit amet mauris.
</p>
  </div>
  <div class="column">
    <p class="notification is-danger">Morbi turpis nunc, porttitor ut bibendum et, tincidunt vel nisi. Ut magna massa, placerat id nunc at, venenatis sodales leo. Nunc dapibus, lacus ac molestie vestibulum, tortor mauris posuere turpis, at pretium orci orci in justo.</p>
  </div>
</div>
</body>
</html>

ブルマでは、クラス.is-flex同じことを達成します。

11
LGSon

少し遅れていることは承知していますが、同様の解決策を探している誰かが私の答えを参考にしてくれるでしょう。

BulmaのTileシステムを使用して、高さが同じ列のように動作するものを取得できます。

<div class="tile is-ancestor">
  <div class="tile is-horizontal">
    <div class="tile is-parent">
      <div class="tile is-child">
        <!--Content here-->
      </div>
    </div>
    <div class="tile is-parent">
      <div class="tile is-child box">
        <!--Content here-->
      </div>
    </div>
  </div>
</div>

追加のCSSは必要ありません。 is-1-is-12クラスを使用して、列の水平サイズを指定することもできます。 このペンをチェックして、動作を確認してください

3
Michał S.

これは私にトリックをしました。

<div class="column">
    <section class="section1">
    ...
    </section>
</div>

.section {
  height: 100%;
}
1
Jin Lim

これは私にとってこのコードでうまくいきます：

<div class="columns">
    <div class="column my-class">
        one thing
    </div>
    <div class="column my-class">
        many other <br><br><br> etc. things
    </div>
</div>

<style>
.column.my-class {
    display: inline-flex; 
}

.column.my-class > div {
    width: 100%; // only Edge needed this nonsense
}
</style>

Chrome 61.0.3163.100（もちろん）、Edge 40.15063.674.0、Firefox 57.0で作業しました。

0
Rory Jarrard

align-items: stretchhttp://cssreference.io/flexbox/

.columns {
    flex-wrap: wrap;
    align-items: stretch;
}

参照： https://github.com/jgthms/bulma/issues/696

0
mythicalcoder