Flexboxを使ったWebページレイアウト:アイテム(コンテンツ)の位置を整えよう その1 解答

13日 10月

解答例

ご紹介するのはあくまで解答例です。

boxの背景色やmarginの設定がことなっていてもかまいません。

大切なのは3つのboxをA→C→Bの順番に並び替えることができているかという点です。

.container {
    border: solid 6px #abcf3e;
    max-width: 600px;
    display: flex;
    }

.boxA {
    background-color: #CDDC39 ;
    flex: 0 1 200px;
    margin:0 10px;
}

.boxB {
    background-color: #FFA000 ;
    flex: 0 1 200px;
    margin-right: 10px;
    order: 1;
}


.boxC {
    background-color: #673AB7;
    flex: 0 1 200px;
    margin-right: 10px;
}

Web制作のプロになろう!スキルハブの無料ビデオ

無料ビデオ13講座/91レッスンが受け放題!

わかりやすい動画レッスンHTML/CSS, JS, デザイン, WordPress, Railsなどがなんと無料。 募集人数には制限があります。サインアップはお早めに。

無料申し込み期限: 9月20日 まで
募集人数: 100名(残りわずか)

今すぐ13講座を受講する(無料)




×