Flex

Flexbox を少しだけ

基本 Grid で作っているんだけど、本文中にちょこっとだけ画像などを横並びにしたいことがある。そういう時は、全体のレイアウトに使う的な印象の強い Grid より Flex を使った方が似合う感じがする（あくまで個人の意見）。

で、あまり複雑な仕組みは要らないので、ちょっと書くと横並びみたいなふうにできないか。

ただここでも Box と Card の時に出会った問題があって、markdown の中では HTML をごりごり書かないと入れ子のエレメントにならないということ。なのでまたblockquoteを使う。

見た目は Card や Box に似ているが、普通の文の段落でも ブロック状にして横並びにする。

親要素のblockquoteを Flex にして、２つ Pタグで囲まれた文を横に並べた例。

Nested paragraph 1. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nested paragraph 1. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.

同じようにして３つ並べた例

Nested paragraph 1. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nested paragraph 1. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nested paragraph 1. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[markdown: ２つ並べた例]

> Nested paragraph 1. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> {: .wd-45 .bg-lightblue .align-c .mgn-r05 .pad-10}
> Nested paragraph 1. John Smith @johnsmith 31m Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
> {: .wd-45 .bg-lemonchiffon .align-c .pad-10}
{: .to-flex}

.to-flexで Flex 指定されるようにした。内側の Pブロックに渡す設定と、外のblockquoteに渡す設定をどこに書くかがミソ。

空きや幅、高さの指示を柔軟に

.wd

前につくった width を指定するクラス.wdは1〜100％まで1％刻みで指定できる。

.wd-32クラスを追加して、width:32%のボックスを3つ並べた例。さすがに小数点以下までは指定できないが、これで横幅いっぱい100％を３つに割ったサイズで並べられる。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

幅が33％より少し小さいので、外側を Flex なblockquoteにすることで横にボックスが３つ並ぶ。実際の markdown は下記のような感じになる。

[markdown]

> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
> {: .wd-32 .bg-oldlace .align-j .mgn-r05 .pad-10}
> 
> `.wd`クラスを付けただけで何も指定しなかったら、ただの`width:100%;`がデフォルト値。`{: style="--wd:数値"}`と指定するとその数値が渡される。これで width が32％ の背景付き段落になった。
> {: .wd-32 .bg-honeydew .align-j .mgn-r05 .pad-10}
> 
> 幅が33％より少し小さいので、外側を Flex な`blockquote`にすることで横にボックスが３つ並ぶ。実際の markdown は下記のような感じになる。
> {: .wd-32 .bg-lavender .align-j .pad-10}
{: .to-flex}

ただCSS変数を渡す仕組みをここでもつくってある。.wdクラスを指定し、style="--wd:X%;"で width の微調整をすることができる。.wdクラスを付けただけで何も指定しなかったら、ただのwidth:100%;がデフォルト値。{: style="--wd:数値"}と指定するとその数値が渡される。

[SCSS]

.wd {
  width: var(--wd, 100%);
  box-sizing: border-box;
}

次の例では、45％、30.3％、22.2％幅のボックスで合計100％よりほんの少し短い幅にして並べてみた。ただしスマートフォンサイズの画面では縦並びになるため、幅は横いっぱいになり数値とは関係なくなる。

幅が45％
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

幅が30.3％
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

幅が22.2％
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.ht

height の調整。説明は同じようなことなので省略するが、下記の例は右のボックスに.ht-80pxクラスを指定。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

右のボックスは.ht-80pxクラスを指定