web-dev-qa-db-ja.com

flex-growの使用方法は？

ドキュメントとBootstrap v4 （here） の問題では、flex-grow、たとえば次のような構文を持つもの：

<div class="d-flex">
      <div  class="flex-grow">
        I use all the space left
      </div>
      <div>
        I am a small text on the right
      </div>
</div>

ここで作成したいレイアウトのサンプル：

image

エクスポートボタンは常に右側にあり、ナビゲーションボタンは左側のすべてのスペースを使用するため、きれいに見えます。

そのようなレイアウトをすでに構築することは可能ですか？たぶんそれはお勧めできませんか？もちろん、CSSを使用する回避策はありますが、理想的には一貫性を保証するためにBootstrapクラス名のみを使用するクリーンなソリューションを探しています。

csslayoutflexboxbootstrap-4
28
Eric Burel

つかいます .col単純なflex-grow: 1;。ここで説明されています https://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col">
      I use all the space left
    </div>
    <div class="col-sm col-sm-auto">
      I am a small text on the right
    </div>
  </div>
</div>
32
Michael Coker

Google検索からここに来る人（私のような人）に。

Bootstrap v v 4.1以降、flex-growおよびflex-shrinkユーティリティがあります。 documentation は次のように使用できると述べています。

.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1

ここに小さな例があります

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex flex-row">
  <div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
    Grow 1
  </div>
  <div class="d-flex flex-grow-0 text-white justify-content-center bg-success">
    Grow 0
  </div>
  <div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
    Grow 1
  </div>
</div>
26
KacosPro

このためにクラスを作成しました。Bootstrap docsを確認しましたが、何も見つかりませんでした。

.flex-2 { flex-grow: 2 }

col-autoは残りのスペースを使用しますが、複数の行がある場合、スペースは均等に分配されません。それが理由です flex-growトリックを行います。

0
LTroya