note自由帳

HOME > note(お知らせ等) >  今日の朝活(css3のflexboxを使ってコーディングを時短)

今日の朝活(css3のflexboxを使ってコーディングを時短)


おはようございます。
湘南・茅ヶ崎のホームページ制作オフィス VIVIBOND(ヴィヴィボンド)のミナベです。
flexboxを使ったレイアウトが時短コーディングに欠かせなくなりそうなのでメモです。

HTML

<div class="parent parent01">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

space-betweenプロパティ

先頭と末尾の要素が端に寄り、間の要素は均等割りで配置される。

space-aroundプロパティ

均等割りで配置されるが、端に要素はくっつかない。

今回参考にさせていただいた元記事

Flexboxを利用してよくあるレイアウトを実装したサンプル集

感想

レイアウトの際、floatを使うとclearでfloatを解除する必要がありますが、flexboxはfloat(浮かせる)という考え方ではないので、そもそも解除の必要がありません。clearをうっかりつけ忘れがちな私にぴったりなテクニックとも言えますね!どんどん使っていこうと思います。
ひと手間減るので時短になりますし、当然コードもすっきりします。あと、パフォーマンスにもちょっとだけよい影響がでるみたいですね。なんだかいいことだらけのflexbox!

お読みいただき、ありがとうございました!

   VIVIBOND 三鍋 忍 (代表/WEBディレクター)

2005年よりフリーランスでWEB制作業をスタート。
丁寧なヒアリングと確かなプランニングで、エンドユーザーを意識したwebサイトの制作をモットーとする。

【対応領域】
WEBサイト(ホームページ)のプランニング、ディレクション、デザイン、コーディング(XHTML/CSS)WordPressサイト構築、ネットショッピングサイト構築、ブログ構築、IT顧問、パソコン教室運営

【経歴】
2005年
趣味が高じてフリーランスWEBデザイナーに転身。

2010年
男児を出産。生後6か月で仕事復帰。
理想のワークライフバランスの実現を目指して、育児と仕事に日々奮闘。

2016年
企業のIT顧問サービスをスタート。 実務向けパソコンスクール「FLEX web」をスタート。

2017年
子どもが通う学校の長期休業に合わせた働き方を試験実施。

【参加団体】
Chigasaki-Guild.NET

PAGE TOP