今日現在のスクリーンショットを撮ってみた。
まだレスポンシブのMediaクエリをほとんど書いていない。
元のテーマ「TwentySeventeen」がFlexboxで書かれいるかどうかも確認せず、シンプルなネストのFlexboxに改変したく、とっとと外箱を置換えて、さっさとアップロードして、まだこれから手を加えるところは山ほどある時点。・・・の、つもりだった。


<a name=”continue”>
ブログによくある横column有りのデザインをし、スマホ対応で縦に積むケースを想定すると、Flexboxほど便利なものはない。

<body>
<article class="branding" role="banner">
ブランドトップのポリゴンが動いているロゴ部分
</article>
<header class="nav" role="navigation">
サイト共通メニュー(1000px以下でハンバーガーメニュー)
</header>
<article class="blog-container">
<main id="main" class="content-box" role="main">
Singleページではここにポストやポストフッター、ページャーが入る。
</main>
<section class="side-navigation">
デフォルトのwidgetをそのまま並べている。
</section>
</article>
<footer class="blog-footer">サイト共通フッター(front-page以外)</footer>
</body>

構成はいたって単純で、9-16行の「blog-container」がFlexbox、中にある「main:content-box」と「nav:side-navigation」がワイドビューでは横に並び、モバイルビューでは縦に積まれる。・・・の、つもりだった。

Sassの変数には
$vertical-stacking: 800px;
$side-by-side: 200px;
を用意してあって、横に並べる時には
flex-basis: $vertical-stacking; を、Mediaクエリで flex-basis: $side-by-side; と使い分ければ良いと、ポンチ絵だけ2種類は描いて、まぁ・・・いわば素描のままテーマ・カスタマイズに入り、記事を書いてプレビューなど繰り返してると、サイドバー目に入らない方がいい・・・断然いい。

どうしよう、困ったな(笑)

横に並べる場合がないなら、Flexboxである必要がなかったし、左右を入れ替え自在にしないならFlexboxである必要が、あはははは。

なんというか、「先生ホワイトボードが見えませーん」と絶対に言われそうにないフォントサイズとか、楽だ。
しかも800widthといっても、左右余白20pxずつ入れてるんで実質760pxでの折り返し。

どうしよう、困ったな。
投稿タイプによって横並びと縦積みと使い分けるようにしよう。いずれそうしよう。
だからFlexboxは便利!と言いたいが為に。そうしよう。