「floatを書かなくても横並びになります。」

その一言を、誰も信じられなかった。

長い戦いの終わり

長い間、Web制作の世界はfloatを中心に回っていました。

横並び。

clearfix。

clear。

overflow。

親要素の高さ。

誰もが一度は悩みました。

そして、ある日。

新しいCSSが現れます。

display: flex;

たった一行でした。

「……本当に？」

最初にサンプルを見た開発者は思いました。

「これだけ？」

 display: flex;

保存。

更新。

横並び。

「……。」

「え？」

「終わり？」

高さが揃っている

今までは画像の高さが違えば、

レイアウトが崩れました。

調整。

微修正。

clearfix。

そんな日々でした。

しかしFlexは違いました。

気付くと、

高さが揃っている。

「なんで？」

今度は、

便利すぎて理由が分からない。

真ん中に配置したい

昔。

「上下中央にしてください。」

現場。

「……。」

試行錯誤。

position。

margin。

line-height。

そして祈る。

しかしFlexでは、

 display: flex;
 align-items: center;
 justify-content: center;

終わり。

全国のWeb制作者は思いました。

「もっと早く来てくれ。」

clearfixとの別れ

ある日。

古いテンプレートを修正していた開発者。

.clearfix::after{
 content:"";
 display:block;
 clear:both;
 }

画面を見つめる。

静かにコメントアウトする。

「ありがとう。」

「長い間、お疲れさまでした。」

それは一つの技術との別れでした。

floatは消えなかった

もちろん、Flexが登場しても、翌日からすべてが変わったわけではありません。

古いサイト。

保守案件。

昔のテンプレート。

そこには今日も、

float:left;

が残っています。

だから今でも、Web制作者は二つの時代を知っています。

floatの時代。

そして、Flexの時代。

あとがき

Flexboxは、単なる新しいCSSではありませんでした。

それは、Web制作という仕事そのものを少しだけ優しくしてくれた技術でした。

今では新人エンジニアが何気なく書く

display:flex;

その一行の裏側には、長年floatと戦ってきた開発者たちの歴史があります。

だからFlexを書くたびに、少しだけ思い出してください。

昔は、これだけのことを実現するために、何倍ものコードを書いていた時代があったことを。

昔のコードを笑わないでください。

そこには、Flexbox革命があります。

次回予告
第八世代 Grid連邦の成立

横だけでは足りなかった。

Web制作の世界は、

ついに「二次元」を手に入れる。

 display: grid;

レイアウトは、

もう芸術ではなく設計になり始めていた。