Flexboxを使ったWebページレイアウト：アイテム（コンテンツ）の位置を整えよう　その１解答

｜ 7852 PV ｜ 2019.10.13

favorite_border

解答例

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

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;
}