ページ作成
ソースリスト
CSS
FlexBox
WEBページ作成方法CSS:FlexBox
html の文書の内容 (content: 図や文字など) はボックスと呼ばれる大きさを持った箱に入れられます．そして，それをブラウザが指定通りに配置することにより html 文書が出来上がります．FlexBox は，このボックスの配置の仕方を決めます．
目次
FlexBox とは
古くからある WEB サイトでは，<table>タグを使ってページをレイアウトしたものがあります．私のページもそうでした．サイトを作り始めた当時 (2003年)，CSS ではレイアウトのような高度なことができなかったからです．ここにきて (2016年)，CSS を使ったレイアウトに変更する決意をしました．
CSS3 の FlexBox を使うと，簡単にレイアウトができます．ここでは，FlexBox を使ったレイアウトの方法を示します．
FlexBox を使ったレイアウト
使い方
FLEXBOX を使ったレイアウトは，CSS に「display: flex;」と指定するだけです．
水平レイアウト
オブジェクト A
オブジェクト B
オブジェクト C
オブジェクト D
垂直レイアウト
オブジェクト A
オブジェクト B
オブジェクト C
オブジェクト D
メモ
ページ作成情報
参考資料
- Flexbox については「Flexboxレイアウトまとめ」を参考にしました．
- Flexboxのプロパティは「【Flexbox】並び順を指定するflexboxのプロパティ」が詳しいです．
更新履歴
| 2016年12月27日 | ページの新規作成 |