うさぎのイラスト

ネットアンサー55備忘録

ワードプレス技術を色々とお試しするサイトです。

flexboxを使ってみよう。

-2016年12月23日-
●まずは基本の設定
.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}
●横並びの設定
.flex-container {
  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
}
●縦並びの設定
.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items:         center;
}
●横軸縦軸変更の設定
.flex-container {
  -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}
参考サイト
参考サイト2
demoページその1 demoページその2
4カラム構成その1


3カラム構成(IE11 windows7対応ver)

aaabbb
1ドリームウィーバー