Flexboxの右寄せはどうやればいい？

bootstrap4を使いページ模写の練習をしています
そこでためしにヘッダーをいくつか並べる前に画像の横並びギャラリーを作ろうと思いました

そこで一方は左端に、一方は右端にやりたかったんですがFlexboxが初めてでbootstrapでのやり方がわかりません
text-alignやフロートはまったくうごかなかったので別なやり口があると思うんですが･･･

<div class="container">
    <div class="row">
        <div class="col">
            <div class="container">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="..." alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="container">
                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

どなたかご教授お願いします！

s8_chu

2019/04/27 19:18

質問者さんの使用している Bootstrap 4 のバージョンを詳しく教えていただけませんか？

xjjojo

2019/04/27 19:44

お返事が送れて申し訳ありません! 4.1.3となっております

行動規範の内容に同意します

回答1件

ベストアンサー

Bootstrap 4.1.x を使用していることを前提に回答します。

flex アイテムに対して、floatプロパティやclearプロパティを適用したとしても、それらは無視されます(参考)。justify-content-betweenクラスとflex-grow-*クラスを使うことで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。

HTML
1<div class="container">
2  <div class="row justify-content-between">
3    <div class="col flex-grow-0">
4      <div class="container">
5        <div class="card" style="width: 18rem;">
6          <img class="card-img-top" src="..." alt="Card image cap">
7          <div class="card-body">
8            <h5 class="card-title">Card title</h5>
9            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
10            <a href="#" class="btn btn-primary">Go somewhere</a>
11          </div>
12        </div>
13      </div>
14    </div>
15    <div class="col flex-grow-0">
16      <div class="container">
17        <div class="card" style="width: 18rem;">
18          <div class="card-body">
19            <h5 class="card-title">Card title</h5>
20            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
21            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
22            <a href="#" class="card-link">Card link</a>
23            <a href="#" class="card-link">Another link</a>
24          </div>
25        </div>
26      </div>
27    </div>
28  </div>
29</div>

または、mr-autoクラス, flex-grow-*クラスを用いることでも、質問者さんの実現したいことは行えると思います(動作確認用リンク)。

HTML
1<div class="container">
2  <div class="row">
3    <div class="col mr-auto flex-grow-0">
4      <div class="container">
5        <div class="card" style="width: 18rem;">
6          <img class="card-img-top" src="..." alt="Card image cap">
7          <div class="card-body">
8            <h5 class="card-title">Card title</h5>
9            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
10            <a href="#" class="btn btn-primary">Go somewhere</a>
11          </div>
12        </div>
13      </div>
14    </div>
15    <div class="col flex-grow-0">
16      <div class="container">
17        <div class="card" style="width: 18rem;">
18          <div class="card-body">
19            <h5 class="card-title">Card title</h5>
20            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
21            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
22            <a href="#" class="card-link">Card link</a>
23            <a href="#" class="card-link">Another link</a>
24          </div>
25        </div>
26      </div>
27    </div>
28  </div>
29</div>