2015.11.10

【業務の小窓】

【業務の小窓】
システム開発部松原です。現在htmlのコーディングの真っ最中です。そこでcss3について少し書いていこうと思います。

題して
「display:Flexboxをご存知ですか?」

かなり前からでているにも関わらずあまり浸透していないFlexboxについて書いていこうと思います。
これを使うと色々と使いまわしが捗ります。

何なのか?という説明をしているとそれだけで長文になってしまいますので省きます。
サムネイルの形のレイアウトのコードはこれだけ。

textextextext

textextextext

htmlのレイアウトは今一般的に使われている
float:left,
display: inline-block;
と同じような書き方になります。
良い点としては
・tableを使わずに垂直方向の配置の位置を指定、均等配置ができること
・使い回すことでcssを量を減らせること
になります。

詳しい説明は「flex css3」で調べたほうが良い先駆者さんの記事を見つけることができます。

5ae6b69d1230b2c0236f

Facebookページへ