Blog

HOME > Web > css > 【CSS】フレックスボックスの使い方

【CSS】フレックスボックスの使い方

2016/02/08

css

備忘録です。

参考サイト
CSSフレックスボックス(display:flex)の使い方
要素の横並び＋複数行ならflex-wrapが便利

実例1-1 シンプルな並列
ul {
    display: -webkit-flex;
    display: flex;
}
  • サンプル1
  • サンプル2
  • サンプル3

実例1-2 シンプルな並列（中央寄せ）
ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    height: 100px;
}　
  • サンプル1
  • サンプル2
  • サンプル3

実例1-3 右下寄せ
ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    height: 100px;
}　
  • サンプル1
  • サンプル2
  • サンプル3

実例2-2 縦列で順番逆転
ul {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
  • サンプル1
  • サンプル2
  • サンプル3

実例2-3 順番指定
ul.flx13 {
    display: -webkit-flex;
    display: flex;
}
ul.flx13 li:nth-of-type(3) {
    -webkit-order: -1;
    order: -1;
}　
  • サンプル1
  • サンプル2
  • サンプル3

実例3-1 並列で均等配置（左右隙間なし=space-between）
ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
  • サンプル1
  • サンプル2
  • サンプル3

実例3-2 並列で均等配置（左右隙間あり=space-around）
ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}
  • サンプル1
  • サンプル2
  • サンプル3

実例3-3 縦列で均等配置（上下隙間なし=space-between）
ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column;
    flex-direction: column;
}
  • サンプル1
  • サンプル2
  • サンプル3

実例3-4 縦列で均等配置（上下隙間あり=space-around）
ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 200px;
}
  • サンプル1
  • サンプル2
  • サンプル3

実例4-1 最後の要素だけ右寄せ
ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
ul li:last-of-type {
    margin-left: auto;
}
  • サンプル1
  • サンプル2
  • サンプル3

実例4-2 2・3番目の要素だけ右寄せ
ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
ul li:nth-of-type(2) {
    margin-left: auto;
    background-color: #ffc;
}　
  • サンプル1
  • サンプル2
  • サンプル3

実例4-4 組み合わせてみる
ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 200px;
}
ul li:nth-of-type(1) {
    margin: 0 auto auto 0;
}
ul li:nth-of-type(2) {
    margin: auto;
}
ul li:nth-of-type(3) {
    margin: auto 0 0 auto;
}　　
  • サンプル1
  • サンプル2
  • サンプル3

実例5-1 均等に隙間を埋める
ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
ul li {
    -webkit-flex-grow: 1;
    flex-grow: 1;
}　
  • サンプル1
  • サンプル2
  • サンプル3

実例5-2 ある要素を引き伸ばして隙間を埋める
ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
ul li:nth-of-type(2) {
    -webkit-flex-grow: 1;
    flex-grow: 1;
}　
  • サンプル1
  • サンプル2
  • サンプル3

実例5-3 ある要素を固定して隙間を埋める
ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
ul li:nth-of-type(1) {
    -webkit-flex-basis: 50px;
    flex-basis: 50px;
}
ul li:nth-of-type(2) {
    -webkit-flex-grow: 1;
    flex-grow: 1;
}
ul li:nth-of-type(3) {
    -webkit-flex-grow: 1;
    flex-grow: 1;
}　
  • サンプル1
  • サンプル2
  • サンプル3

複数行の場合

flex-wrap: wrap;を指定します。

高さを揃えない
.example {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ