Flexboxで要素を配置する - Bootstrapのチュートリアル

このレッスンでは、 Flex Box により要素を配置します。 Flex Box は Flexible Box とも呼ばれます。 CSS の比較的新しいレイアウトの機能です。 今、開いているのは MDN モジラデベロッパーネットワークの略ですが そのリファレンスのページです。 ここを開くには MDN そして今回 FlexBox を調べたいので FlexBox ということで検索をすれば 上の方に出てくると思います。 ページレイアウトが柔軟にできるという機能で 比較的新しいブラウザで対応しています。 Bootstrap ４はこの FlexBox を使った 配置ができます。 今開いているページには container の div 要素が３つあります。 そして container の div 要素には 背景色に スカイブルーを設定してありますので この部分が container の領域だと いうことがわかりますね。 後、高さも設定してあります。 それぞれの container の中には div 要素が３つあって その中にテキストが入っています。 いずれも Flex item 1,2,3 という div 要素がいれられてあります。 これを Flex で 配置してみることにしましょう。 まずは、 Flex で配置するには 今回はこの container を Flex の配置に対応させるのですけど ここに d-flex ディスプレイのモードを Flex にするという設定ですね。 これが必要になります。 こちらも入れましょう。 d−flex と。 ３つ目 d-flex そうすると、デフォルトでは div 要素が横並びになりますね。 この並び方を変える事ができます。 ではこの真ん中の container に対して 設定をしますけど 今度は Flex の中の機能を使いますので class は flex− です。 そして今横並びになっていますけれども 縦に並べたい、つまり列方向に 並べたいという場合には flex−column とすると 縦の並び方になります。 そして横に並びというのは これはデフォルトですので class はありますけれども flex−row ですね。 デフォルトですから、変化はありません。 ただ、flex-row に対しては もう１つオプションがありまして…