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

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

基本のdisplay:flex

ここが基本

.flex-container {
    display: -webkit-flex; /* Safari */
    display: flex;
}

インラインにdisplay:flex

.flex-container {
    display: -webkit-inline-flex; /* Safari */
    display: inline-flex;
}

折り返しの設定

.flex-container {
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap: wrap;
}

横の設定

中央に揃える設定

.flex-container {
    -webkit-justify-content: center; /* Safari */
    justify-content: center;
}

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

.flex-container {
    -webkit-justify-content: space-around; /* Safari */
    justify-content: space-around;
}

横の幅を割合で指定

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

.flex-item {
    -webkit-flex-grow: <number>; /* Safari */
    flex-grow: <number>;
}

縦の設定

縦に並べる

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

.flex-container {
    -webkit-flex-direction: column; /* Safari */
    flex-direction: column;
}

縦の中央揃え

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

.flex-container {
    -webkit-align-items: center; /* Safari */
    align-items: center;
}

縦の均等配置

.flex-container {
    -webkit-align-content: space-between; /* Safari */
    align-content: space-between;
}

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

.flex-container {
    -webkit-align-content: space-around; /* Safari */
    align-content: space-around;
}

細かい指定

指定のwidthをつける

.flex-item {
    -webkit-flex-basis: auto | <width>; /* Safari */
    flex-basis: auto | <width>;
}

使用例まとめ

使い勝手の良い基本例

並び順

横並び正順

折り返し

折り返しあり

横配置

左詰め

縦配置（行の中での配置）

中央

縦配置（行の配置）

中央

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    }

使用例２

黄金比を使用して三分割の配置とその下に一列を作成しました。

flex-basisで高さに単位vhを使用して画面に対しての高さで検証しています。

<style type="text/css">
.section1 {
display: flex;
flex-direction: column;
}
.flexbox1 {
display: flex;
flex-basis: 61.8vh;
}
.yokonarabi {
flex-basis: 33vw;
}
.yokonarabi:nth-child(1) {
background-color: #f3f4f5;
}
.yokonarabi:nth-child(2) {
background-color: #d9daf3;
}
.yokonarabi:nth-child(3) {
background-color: #e3fff6;
}
.gedan {
flex-basis: 38.2vh;
background-color: #b4bfca;
}
</style>


<div class="section1">
<div class="flexbox1">
<div class="yokonarabi"></div>
<div class="yokonarabi"></div>
<div class="yokonarabi"></div>
</div><!--flexbox-->
<div class="gedan"></div><!--gedan-->
</div><!--section1-->
<?php endif; ?>