wordpress

css3のdisplay:flexをコピペするための覚書

  • このエントリーをはてなブックマークに追加
css3でdisplay:flex

css3で新しく追加された機能display:flex、Flexboxと呼ぶのですね、webサイトの配置をする際、とても便利で使用頻度が高くなりましたので、コピペをしやすくしたページです。

基本のdisplay:flex

ここが基本

インラインにdisplay:flex

折り返しの設定

横の設定

中央に揃える設定

両サイドにも間隔をあける

横の幅を割合で指定

横並びのスペースの中で任意のスペースに他のスペース1に対しての割合で横幅(width)を指定します。

縦の設定

縦に並べる

display:flexで縦に並べたい場合の記述はこちらになります。

縦の中央揃え

与えられたスペースの縦に対して中央揃えをします。

縦の均等配置

最初と最後に空間をあけた均等配置

細かい指定

指定のwidthをつける

使用例まとめ

使い勝手の良い基本例

並び順
横並び正順
折り返し
折り返しあり
横配置
左詰め
縦配置(行の中での配置)
中央
縦配置(行の配置)
中央

スポンサーリンク

リンク

スカッとする話やDQN返し、修羅場まとめ話