タグ

関連タグで絞り込む (2)

タグの絞り込みを解除

flexboxに関するakiyoshi83のブックマーク (2)

  • CSS3 の可変ボックス ( Flexbox ) レイアウトが超絶便利そう!

    Flexbox モデルを使うには、Flexbox コンテナが必要です。 CSS3 で [ display:flex ] と指定した要素が Flexbox コンテナとなります。 [ Flexbox コンテナ ] で指定できるプロパティ ———————————————————————- flex-direction : 子要素の配置方向 flex-wrap : 子要素を折り返すかどうか justify-content : 子要素の揃え方。 : flex-direction = 水平方向の場合、右揃え・中央揃え・左揃えなど。 : 均等に間隔を空ける設定もできます。 align-items : 子要素の揃え方。 : flex-direction = 水平方向の場合、上揃え・中央揃え・下揃えなど。 : 親要素の高さいっぱいに伸ばす設定もできます。 align-content : 複数行になった時の子

    CSS3 の可変ボックス ( Flexbox ) レイアウトが超絶便利そう!
  • CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム

    どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案(Editor’s Draft)を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案(Last Call Working Draft)が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「

    CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム
    akiyoshi83
    akiyoshi83 2014/11/08
    大変分かりやすい。
  • 1