こんにちは、セブンシックスのダイチです。今回は、コーダーさんのための、Flexboxについてのお話です。実は、リストを横並びにするCSSについての考察をまとめようと思ったのですが、ぐだぐだと長くなったので、今回はFlexboxについてのみ書くことにしました。 最終行が、思い通りにいかない！ Flexboxは、CSS3で追加されたレイアウトモジュールです。これまでfloatなどを駆使してレイアウトしていた箇所を、シンプルに記述できることから注目されていますが、なかなか思い通りにいかない点もあります。 そのうちのひとつが、justify-contentで両端揃えにしたときの最終行。子要素の数が半端になったときに、中央がぽかっと空いてしまう問題があります。 これは、正常な振る舞いなのですが、実際にこんな並べ方をしたデザインを作るデザイナーさんはいないと思います。最終行は、左揃えにしたいケースが多
普通にレイアウトするのであれば、FlexboxでもFloatでもそんなに変わりなく利用できます。Flexboxは、flex（収縮する）の名の通り、収縮してサイズ変更できることが大きな特徴です。 Flexboxを使ってレイアウトを作成する時に役立つ、Flexboxのプロパティがどのように収縮して機能するかアニメーションで分かりやすく解説します。 Even more about how Flexbox works — explained in big, colorful, animated gifs 前編（翻訳版: Flexboxでどのようにレイアウトをつくるのか、アニメーションで分かりやすく解説）では、主にコンテナ要素に適用されるプロパティを解説しました。今回は子要素に適用されるサイズ変更のプロパティについて解説します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
