webは基本、コンテンツを横並びにして出来ている。

CSS3の最も革命的なのはflexboxだと思います。

その前はfloatを使って要素を浮かせて～など、そこそこ面倒なものでした。

flexboxは画像や文字コンテンツなどを簡単に、かつ並べ方も含めて指定できるのでとても便利で、コンテンツ作成はこれを基本に組み立てて間違いありません。

また画像、文字だけと、同じ要素だけ横並びするだけではなく、画像と文字組（タイトルと本文、specなど）を並べて表示するのにも使えます。こちらの方法をご紹介していきます。

画像と文字組を並べて表示するコード

まず全体の括りをarticleとします。

figureで囲んだ画像とsectionでまとめた文字組みを並べます。

HTML

<article class=”column”>
　<figure class=”news”> <img src=”images/news/news.jpg” width=”340″ height=”230″ alt=”コラム１”/> </figure>

<section class=”newsArea”>
　<h3 class=“title”>タイトルです。< /h3>
　<p class=”tex”>本文です。本文です。本文です。本文です。本文です。本文です。</p>
　<p class=”spec”>スペックです。スペックです。スペックです。スペックです。</p>
</section>
</article>

CSS

.column{
display: flex;
display: -webkit-flex;
align-items: center;
width: 95%;
height: 330px;
overflow: hidden;
}

.news {
width: 340px;
height: 230px;
overflow: hidden;
}

.newsArea {
width: 60%;
overflow: hidden;
padding-left:3%;
}

.title{
font-size: 18px;
margin: 15px 0 10px;
line-height: 1.3em;
}

.tex {
font-size: 14px;
margin: 5px 0 10px;
}

.spec{
font-size: 12px;
line-height: 1.5em;
}

align-itemsは中のコンテンツの縦軸の配置指定

display：flexで横並びを指定。

align-itemsはコンテンツの縦軸の配置の指定です。centerにしているので、画像と文字組みが真ん中で揃うようにしています。

中のコンテンツの横方向の位置指定にはjustify-content

あとよく使うのはjustify-contentがありますが、これは３つ以上のコンテンツを横並びに表示したい場合に中のコンテンツの横方向の位置を指定するものです。

centerですと中央寄せ、space-betweenで両端を揃えます。

space-aroundでは中のコンテンツに平等に空きを作って両橋のコンテンツを表示します。全てのコンテンツに平等なスペースを作る場合はspace-evenlyを使います。

なお、レスポンシブでメディアクエリを使ってflex-direction:column;にすれば、縦表示にできますから、これも楽ですよね。もちろんそれぞれの数値は任意のものですので自由に書き換えてみてください。

10年以上前にfloatで組んでいて、何かの拍子にレイアウト崩れを起こして、ハマってしまったことがありましたが、それを考えればflecboxは革命的であったと思います。