[プログラミングの課題] HTMLとCSS #1 Flexで横並び

はじめに

HTMLとCSSでどのようにして、横並びにするのでしょうか。
今まではFloatが主流でしたが、回り込み問題などいろいろややこしかったですが、
Flexbox Layoutというものが出てきて、Floatを使用することなく簡単に横並びが出来るようになりました。

Container と Item

参照: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexを使用するとき、containerとitemsがあります。図とその名の通りの関係ですが、今回の例ではクラス名でそれぞれ .container と .item と名付けます。

それぞれに指定のプロパティを使うことでflexを使いこなせるようになります。

課題

上記のような画像をHTMLとCSSを使用して作成してみましょう。

回答: https://jsfiddle.net/NaggiGoishi/6urw2qsb/

=====使用した色========
header: #008B8B
footer: #B8860B
container: #9932CC
item: #8B0000
=====================

=====WidthとHeight===
header height: 50px
footer height: 50px
item width: 200px
item height: 200px
====================