コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
flex-wrapプロパティで複数行にする
このレッスンでは flex-wrapプロパティを使って 要素、ボックスを 複数行に配置したいと思います。 もっとも今ボックスが 3つしかありませんので、 複数行にするにはちょっと足りないですね。 親のdiv要素を class box の中に div要素は今3つあるんですけれども もっと増やしましょう。 ではこの2と3ですね。 これをコピーして そしてペーストと。 もう1回ぐらいいきましょう。 ペーストというふうにして、 これでいったんどうなったか 確認しましょう。 ファイルを保存します。 こうなりました。 この黒い枠、黒いボーダーが 親の枠なんですけれども、 そこをはみ出てますね。 もっともはみ出るまで 頑張ってるんですけれども、 縦書きのようになってしまっていますが、 それでも頑張りきれないということで ついにあふれてしまっています。 これを複数行にするというのが flex-wrapプロパティです。 デフォルトでは nowrap、 つまり改行しないということで このようにはみ出てしまいます。 ではflex-wrapプロパティを使いましょう。 これが box のクラスに対する スタイルの設定なんですが、 ここで flex-wrap のプロパティですね。 nowrap がデフォルトなんですが、 wrap というふうにすると 改行するようになります。 一応ここ数字も変えておきましょうね。 3、4、 5、6、 7と、これで保存して確かめます。 無理して頑張らずに 3で改行して 4、5、6、7というふうになりました。 この flex-wrapプロパティにはもうひとつ 設定値がありまして wrap-reverse、 反対にということですね。 改行が反対になるということですので 試してみましょう。 では flex-wrap のプロパティの値を wrap-reverse ですね。 こちらに変更します。 保存してもう一度確認してみます。 こうなりました。 主軸の方向は左から右なんですけれども、 改行が下から上というふうに 反対になっています。 でもじゃあ方向も 右から左にしたいということであれば、 これは軸に対する 方向の変更ということになります。 軸と方向を変えるのは flex-direction のプロパティですね。 flex-direction ということで…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。