CSSの【display list-item・flex・その他編】プロパティでよく使うものをあつめてみた(第一回)
：今回はCSSの display: inline、display: block、display: inline-block をマスターしよう！で紹介していますdisplayプロパティの他の値を掘り下げてみようとおもいます。
CSSの【display】プロパティでよく使うものをあつめてみた。【第一回 list-item・flex・その他編】
みなさま、お久しぶりでございます。やのっぱでございます(´・ω・｀)ﾌﾞﾋｰ
今回はCSSの display: inline、display: block、display: inline-block をマスターしよう！で紹介していますdisplayプロパティの他の値を掘り下げてみようとおもいます。
displayはよくinlineやblock,inline-block,noneを使用しますが、他にもたくさんの値が用意されています。
たくさんありすぎるので、使用しなさそうなcompact、ran-inやテスト段階のgridなどは省いていますが、参考になれば幸いです。
ボリュームが大きくなったので、二回に分けて投稿しました。
第二回はこちら
目次からも移動できるようにしています。
では順番に見て行きましょう！
none
おなじみのdisplay:none;です。
この値をあたえると、その要素の表示を非表示にします。
レイアウトからも消えるので、表示上無かったことになります。
注意すべきは、与えた要素の子要素全てが非表示になることです。
block
こちらもおなじみのdisplay:block;です。
この値をあたえると、その要素はブロック要素になります。
ブロック要素？なにそれ？おいしいの？っという方はこちらCSSの display: inline、display: block、display: inline-block をマスターしよう！で詳しく説明されてますので、覗いてみてください
例
HTML
<div class="test01">
<p>ここはインライン<span class="block">ここはspanでブロックに変換</span>ここはインライン</p>
</div>
CSS
<style>
.test01 .block { display:block;}
</style>
ここはインラインここはspanでブロックに変換ここはインライン
このように元々inlineなどの要素を強制的にblockに変えることができます。
ブロック要素なので、paddingの上下やheightが有効になってきます。
よく使うのはaタグにdisplay:block;を与えて、CSSでボタンをつくったりですね。
こんな感じです。
HTML
<p class="testBtn"><a href="#">aタグでボタン</a></p>
CSS
<style>
.testBtn a {
display: block;
max-width: 200px;
padding: 10px;
margin: 0 auto;
background: #EC9608;
border-radius: 4px;
box-shadow: inset -2px -2px 2px #A26400, 1px 1px 2px #FFE6CC;
text-align: center;
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
text-shadow: -1px -1px #A07F1C;
}
.testBtn a:hover {
box-shadow: inset 2px 2px 2px #A26400,1px 1px 3px #F9F0DA;
background: #A07F1C;
}
</style>
inline
まいどおなじみのdisplay:inline;さんです
この値を与えると、強制的にインライン要素になります。
こちらもなんぞや？っという方はこちらCSSの display: inline、display: block、display: inline-block をマスターしよう！で確認してみてください。
こちらはよくリストの横並びなど、連続するブロック要素を横に並べるときなどに使用しています。
また、text-alignでブロック要素を左・右・中央に寄せる時などでも使用します。
注意なのは、inlineの場合改行が半角の空白として認識されるため(inlineは文章の文字扱いのため)、改行があると要素間に隙間ができることです。
解消法は改行をなくすか、要素と要素の間にコメントアウトを入れてあげると解消します。
例
HTML
<div class="test02">
<p>改行あり</p>
<ul class="testList">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>
<p>改行なし</p>
<ul class="testList">
<li>リスト1</li><li>リスト2</li><li>リスト3</li><li>リスト4</li><li>リスト5</li>
</ul>
<p>コメントアウト法</p>
<ul class="testList">
<li>リスト1</li><!--
--><li>リスト2</li><!--
--><li>リスト3</li><!--
--><li>リスト4</li><!--
--><li>リスト5</li>
</ul>
</div>
CSS
<style>
.test02 .testList li {
display:inline;
border: 1px solid #FF9B00;
padding: 8px;
}
</style>
改行あり
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
改行なし
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
コメントアウト法
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
inline-block
個人的によく使用するdisplay:inline-block;さんです
この値を与えるとインラインだけどブロックな要素になります。
詳しくはこちらCSSの display: inline、display: block、display: inline-block をマスターしよう！に記載されていますが、イメージとしてはimgタグのような挙動をします。
ブロック要素と同じプロパティが適応されるinline要素です。
たとえば、inlineにwidthやheight、上下のmarginなどが適応されませんが（ブロック、いわゆる箱として機能しないから）、inline-blockならばそれらが適応されます。
利点としてはinline扱いのblockなので、text-alignが適応される点などあります。
また、先のinlineのように横並びになりますが改行＝半角スペースなので、隙間に注意が必要です。
使用時注意して頂きたいのは、IE7以下では使えません、ので下記の例にあるIE7ハックをセットで使用することをオススメします。
では、例をあげてみます。
今回は、全体を右寄せ、中のメニューは左揃えの形をdisplay:inline-block;をつかってつくってみます。
例
HTML
<div class="test03">
<ul class="testList">
<li>メニュー01</li><li>メニュー02</li><li>メニュー03</li><li>メニュー04</li><li>メニュー05</li>
</ul>
</div>
CSS
<style>
.test03 {
max-width:700px;
margin:0 auto;
border:2px solid #B06715;
text-align:right;
}
.test03 .testList {
display:inline-block;
max-width:500px;
background:#E7F0D4;
text-align:left;
}
.test03 .testList li {
display:inline-block;
*display:inline; /* IE7ハック */
*zoom:1; /* IE7ハック この２つがないとIE7では縦並びになってしまいます */
max-width: 80px;
margin: 0 0 0 10px;
background: #FFF5EC;
text-decoration: underline;
text-align:center;
}
</style>
- メニュー01
- メニュー02
- メニュー03
- メニュー04
- メニュー05
list-item
未だ実際に使うことがまったくないdisplay:list-item;さんです
この値を与えると、liと同じ挙動になります。
list-styleが適用され、リスト項目として使うことができます。
使い所はよくわかりませんが、javaScriptで一定条件下ではリストとして扱うといったときに使えるかもしれません。
今回はpタグの文章の途中をインライン要素【span】で囲って、リスト化してみたいとおもいます。
例
HTML
<div class="test04">
<p class="testTxt">普通のテキスト普通のテキスト普通のテキスト普通のテキスト<span class="testList">無理やりリスト化</span><span class="testList">無理やりリスト化</span><span class="testList">無理やりリスト化</span><span class="testList">無理やりリスト化</span>普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト</p>
</div>
CSS
<style>
.test04 {
max-width: 580px;
padding:10px;
border:2px solid #B06715;
}
.test04 .testTxt .testList {
display:list-item;
margin-left:2em;
}
</style>
普通のテキスト普通のテキスト普通のテキスト普通のテキスト無理やりリスト化無理やりリスト化無理やりリスト化無理やりリスト化普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト普通のテキスト
このような感じで、強制的にリスト項目として使うことができます。
しかし、リストは文章構造的にulで組むのが良いので、特に理由がなければulでちゃんと作ることをおすすめします(´・ω・｀)ｂ
display:flex; or display:inline-flex;
さて、長くなってきましたがdisplay:flex;をご説明します。
これは、要素をフレキシブルなモデルに変えるという画期的なプロパティです。
まだ現在草案なので、仕様が変更されたり、ベンダープレフィックスが必要と色々面倒ですが、おもしろいので是非使ってみていただきたいです。
さて、いやゆるフレックスボックスは専用のプロパティや値が多いので、まずはそこからざっと見て行きましょう。
| プロパティ | 値 | 効果 |
|---|---|---|
| display | flex inline-flex |
Flexboxコンテナーを定義します。inline-flexはinline-blockと同じようにインラインボックスとして定義されます。 |
| flex-direction 子要素の配置の指定 |
row | 子要素を左から右へ配置する値です。基本HTMLの書いた順に並びます。（初期値） |
| column | 子要素を上から下へ配置する値です。同じく書いた順に並びます。 | |
| row-reverse | 子要素を右から左へ配置する値です。rowの逆になります。 | |
| column-reverse | 子要素を下から上へ配置する値です。columnの逆になります。 | |
| flex-wrap 折り返し方の指定 |
nowrap | 折り返しなし（初期値） |
| wrap | 折り返しあり floatの時のように下に落ちます | |
| wrap-reverse | 折り返しあり 折り返し地点が逆になります。 | |
| flex-flow まとめて記述 |
例 row wrap | flex-directionとflex-wrapの値をまとめて記述できます。 |
| justify-content 水平方向の揃えの指定 |
flex-start | 横方向は左、縦方向は上に揃えます。 |
| flex-end | 横方向は右、縦方向は下に揃えます。 | |
| center | 中央揃えです | |
| space-between | 均等間隔です。 | |
| space-around | 左右の端にも間隔がある均等間隔です | |
| align-items 垂直方向の揃えの指定 |
flex-start | 横配置の場合は上、縦配置の場合は左に揃えます。 |
| flex-end | 横配置の場合は下、縦配置の場合は右に揃えます。 | |
| center | 中央揃えです | |
| baseline | ベースラインです | |
| stretch | 自動で高さを合わせます | |
| align-content 複数行の揃え方の指定 |
flex-start | 複数行になったとき、横方向は上、縦方向は左 |
| flex-end | 複数行になったとき、横方向は下、縦方向は右 | |
| center | 中央揃えです | |
| space-between | 均等間隔です | |
| space-around | 上下端にも間隔がある均等揃えです | |
| flex 伸縮性の指定 |
flex-grow | 伸びの倍率、余ったスペースをこのプロパティの値に従って自動的に埋めます |
| flex-shrink | 縮みの倍率、コンテナに入りきらないアイテムを収まるように収縮する | |
| flex-basis | 元の長さを指定します。min-widthのような感じです。 | |
| 補足 | flexはflex: 1 1 auto;のように flex-grow flex-shrink flex-basisの順にまとめて記述できます | |
| align-self 垂直方向の揃えを個別指定 |
align-itemsと同じ | align-itemsと同じですが、全体ではなく個別の指定となります。 |
| order 順番の指定 |
数字 | 初期値は連番ですが、それを指定することで順番をかえることができます。 |
こんな感じです。
たくさん増えましたがそんなに難しくはないとおもいます。
基本は親要素にdisplay:flex;をあたえることで子要素がflexアイテムとして扱われます。
あとは各プロパティをあたえることで、子要素がフレキシブルなBOXになっていきます。
それでは、実際に作っていきますが、ブログ自体が幅を固定されているのでご自身で色々試していただいて掴んでいただければとおもいます(´・ω・｀)ｂ
基本形（リスト横並び）
HTML
<div class="reiBox01">
<ul class="boxList">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
CSS
<style>
.reiBox01 {
max-width: 700px;
padding: 10px;
margin: 0 auto 10px;
border: 1px solid #903813;
}
.reiBox01 .boxList {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
padding:10px 0;
background:#FFF4D1;
}
.reiBox01 .boxList li {
flex: 1 0 60px;
min-height: 40px;
padding-top: 10px;
background: #C5FEDD;
list-style: none;
font-size: 30px;
text-align: center;
line-height: 1;
}
.reiBox01 .boxList li.even {
background:#F6D990;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
固定されているとおもいますので、ブラウザの開発者ツールなどで、reiBox01のwidthを変えてみてください。(ブログ改修前に投稿しています)
デフォルトは折り返し無しなのでどんなに縮めてもはみ出ないようflexを設定しています。
それでは、少しずつ変えていきます。
まずはdirectionを変えてみます。初期値はrowです。
directionでは、配置の指定ができます。 寄せではなく、並び方に関する指定です。
flex-derection
HTML
<div class="reiBox01">
<p>row：左を起点に左から右へ順に並びます。</p>
<ul class="boxList direction row">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>column：上から下へ縦方向に順にならびます。</p>
<ul class="boxList direction column">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>row-reverse：右を起点に右から左へ順に並びます。</p>
<ul class="boxList direction row-reverse">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>culumn-reverse：下から上へ縦方向に順にならびます。</p>
<ul class="boxList direction culumn-reverse">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
CSS
<style>
.reiBox01 .boxList.direction li {
flex: 0 0 60px;
}
.reiBox01 .boxList.direction.row li {
flex-direction: row ;
}
.reiBox01 .boxList.direction.column {
flex-direction: column ;
}
.reiBox01 .boxList.direction.column li {
max-width:60px;
}
.reiBox01 .boxList.direction.row-reverse {
flex-direction:row-reverse;
}
.reiBox01 .boxList.direction.culumn-reverse {
flex-direction:column-reverse;
}
.reiBox01 .boxList.direction.culumn-reverse li {
max-width:60px;
}
</style>
row：左を起点に左から右へ順に並びます。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
column：上から下へ縦方向に順にならびます。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
row-reverse：右を起点に右から左へ順に並びます。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
culumn-reverse：下から上へ縦方向に順にならびます。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
次は折り返しの指定をかえてみます。
初期値はnowrap 折り返し無しになっています。
有りにするとfloatと同じ動きになります。
それぞれboxListのwidthを狭めて挙動をみていきます。liはwidthを80px以下には縮まないようにしておきます。
flex-wrap
HTML
<div class="reiBox01">
<p>nowrap：折り返し無しです。設定によっては子要素がフレックスコンテナをはみ出たり、無理やり収まるように伸縮したりします。</p>
<ul class="boxList Fwrap nowrap">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>wrap：折り返しするようになります。 floatのような感じですが、伸縮設定をしているとそれぞれが隙間をきっちり埋める動きをします。(伸縮設定は後ほど触れます)</p>
<ul class="boxList Fwrap wrap">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>wrap-reverse：同じく折り返しするようになりますが、折り返し地点が逆になります。</p>
<ul class="boxList Fwrap wrap-reverse">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
CSS
<style>
.reiBox01 .boxList.Fwrap {
width:60%;
margin:0 auto;
}
.reiBox01 .boxList.Fwrap li {
flex:0 0 80px;
}
.reiBox01 .boxList.Fwrap.nowrap {
flex-wrap: nowrap;
}
.reiBox01 .boxList.Fwrap.nowrap li {
}
.reiBox01 .boxList.Fwrap.wrap {
flex-wrap: wrap;
}
.reiBox01 .boxList.Fwrap.wrap-reverse {
flex-wrap:wrap-reverse;
}
</style>
nowrap：折り返し無しです。設定によっては子要素がフレックスコンテナをはみ出たり、無理やり収まるように伸縮したりします。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
wrap：折り返しするようになります。 floatのような感じですが、伸縮設定をしているとそれぞれが隙間をきっちり埋める動きをします。(伸縮設定は後ほど触れます)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
wrap-reverse：同じく折り返しするようになりますが、折り返し地点が逆になります。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
上記のflex-directionとflex-wrapはflex-flowを使うことでショートハンドで記入することができます
HTML
<div class="reiBox01">
<p>flow：flex-wrapとflex-flowを同時に設定します。今回はrow-reverseとwrap-reverseにしてみました。<br>右から始まって上へ折り返すようになってます。</p>
<ul class="boxList flow">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
CSS
<style>
.reiBox01 .boxList.flow {
width:60%;
margin:0 auto;
flex-flow:row-reverse wrap-reverse;
}
.reiBox01 .boxList.flow li {
flex:0 0 80px;
}
</style>
flow：flex-wrapとflex-flowを同時に設定します。今回はrow-reverseとwrap-reverseにしてみました。
右から始まって上へ折り返すようになってます。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
配置関係はこんなところです、組み合わせなどよく考えて使うといいと思います。
これまでなかった逆折り返しなど、一度やってみると新しい概念ができるので試しにやってみるのもいいかもです。
知っていれば幅は広がりますからね(´・ω・｀)v
次は揃え関係を触っていきます。
注意すべきは、親要素より子要素（固定ブロック）が小さいことです。
隙間がなければ、揃えを使う意味がなくなりますのでご注意です。
今回は子要素を伸縮なしの50pxにしてあります。
justify-content
HTML
<div class="reiBox01">
<p>flex-start：通常の左上揃えです。子要素が左上に向かって寄って行ってます。</p>
<ul class="boxList justify start">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>flex-end：右下揃えです。子要素が右下に向かって寄って行ってます。注意は右上ではないことです。</p>
<ul class="boxList justify end">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>center：中央揃えです。中央に向かって寄っていきます。</p>
<ul class="boxList justify center">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>space-between：子要素が両端を詰めた形での均等揃えです。このへんから、float組などでは若干手間なものが簡単に出来てきます。</p>
<ul class="boxList justify between">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>space-around：両端にも均等に左右の隙間ができる均等揃えです。<br>フレキシブルなので親要素が伸びれば均等に離れていくすぐれものです。<br>floatやinline-blockでも同じようなことができますが、こちらは要素が増えても問題ないところが優れています。</p>
<ul class="boxList justify around">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
CSS
<style>
.reiBox01 .boxList.justify li {
flex:0 0 50px;
}
.reiBox01 .boxList.justify.start{
justify-content: flex-start;
}
.reiBox01 .boxList.justify.end{
justify-content: flex-end;
}
.reiBox01 .boxList.justify.center{
justify-content: center;
}
.reiBox01 .boxList.justify.between{
justify-content: space-between;
}
.reiBox01 .boxList.justify.around{
justify-content: space-around;
}
</style>
flex-start：通常の左上揃えです。子要素が左上に向かって寄って行ってます。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
flex-end：右下揃えです。子要素が右下に向かって寄って行ってます。注意は右上ではないことです。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
center：中央揃えです。中央に向かって寄っていきます。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
space-between：子要素が両端を詰めた形での均等揃えです。このへんから、float組などでは若干手間なものが簡単に出来てきます。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
space-around：両端にも均等に左右の隙間ができる均等揃えです。
フレキシブルなので親要素が伸びれば均等に離れていくすぐれものです。
floatやinline-blockでも同じようなことができますが、こちらは要素が増えても問題ないところが優れています。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
この時点でも、たまに悩んでしまうような配置がラクラクとできてます。
次は垂直方向の揃えです。
このままだとわかりにくいので、evenのclassを振っている要素の高さをかえてやってみます。
align-items
HTML
<div class="reiBox01">
<p>flex-start：flex-directionが横配置の場合、上に揃います。<br>
縦配置の場合は左へ揃います。</p>
<ul class="boxList align start">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>flex-end：こちらは横配置の場合下揃え、縦配置だと右へ揃います</p>
<ul class="boxList align end">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>center：上下中央揃えです。わかりやすいよう親要素にheightを入れました。<br>
さて、お気づきになりましたでしょうか？・・・<br>
そう、これを使うと、上下左右中央揃えが簡単にできちゃいます。 (´・ω・｀)ｽｺﾞｸﾅｲ?</p>
<ul class="boxList align center">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>おまけ：上下中央揃え</p>
<ul class="boxList align justify center">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>baseline：ベースライン揃えです。ベースラインとは、中の文字を基準に揃える方法です。</p>
<ul class="boxList align base">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>stretch：自動で高さを合わせてくれます。<br>
ようは、上下の隙間を埋めてくれる感じです。ためしに親要素の高さを200pxにしてみました。</p>
<ul class="boxList align stretch">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
CSS
<style>
.reiBox01 .boxList.align {
}
.reiBox01 .boxList.align li {
height:50px;
}
.reiBox01 .boxList.align li.even{
height:100px;
}
.reiBox01 .boxList.align.start {
align-items:flex-start;
}
.reiBox01 .boxList.align.end {
align-items:flex-end;
}
.reiBox01 .boxList.align.center {
height:200px;
align-items:center;
}
.reiBox01 .boxList.align.base {
align-items:baseline;
}
.reiBox01 .boxList.align.stretch {
height:200px;
align-items:stretch;
}
.reiBox01 .boxList.align.stretch li{
height:auto;
}
</style>
flex-start：flex-directionが横配置の場合、上に揃います。
縦配置の場合は左へ揃います。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
flex-end：こちらは横配置の場合下揃え、縦配置だと右へ揃います
- 1
- 2
- 3
- 4
- 5
- 6
- 7
center：上下中央揃えです。わかりやすいよう親要素にheightを入れました。
さて、お気づきになりましたでしょうか？・・・
そう、これを使うと、上下左右中央揃えが簡単にできちゃいます。 (´・ω・｀)ｽｺﾞｸﾅｲ?
- 1
- 2
- 3
- 4
- 5
- 6
- 7
おまけ：上下中央揃え
- 1
- 2
- 3
- 4
- 5
- 6
- 7
baseline：ベースライン揃えです。ベースラインとは、中の文字を基準に揃える方法です。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
stretch：自動で高さを合わせてくれます。
ようは、上下の隙間を埋めてくれる感じです。ためしに親要素の高さを200pxにしてみました。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
と言った感じで、横にも縦にも臨機応変に設定可能です。
では、改行され複数行になったときの設定をしてみます。
align-content
HTML
<div class="reiBox01">
<p>flex-start：複数行のときの揃い方を設定します。<br>
flex-startはdirectionが横方向ならば上、縦ならば左揃えになります。</p>
<ul class="boxList aContent start">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>flex-end：こちらは複数行のとき横方向ならば下、縦方向なら右に揃います。</p>
<ul class="boxList aContent end">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>center：こちらは複数行のとき上下中央揃えになります。</p>
<ul class="boxList aContent center">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>space-between：こちらは複数行のとき上下均等揃えになります。</p>
<ul class="boxList aContent between">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>space-around：こちらは複数行のとき上下中央揃えになり、上下の端にも間隔がある均等揃えになります。</p>
<ul class="boxList aContent around">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
CSS
<style>
.reiBox01 .boxList.aContent {
flex-wrap:wrap;
}
.reiBox01 .boxList.aContent li {
flex:0 0 120px;
}
.reiBox01 .boxList.aContent.start {
align-content:flex-start;
}
.reiBox01 .boxList.aContent.end {
height:200px;
align-content:flex-end;
}
.reiBox01 .boxList.aContent.end li {
height:40px;
}
.reiBox01 .boxList.aContent.center {
height:200px;
align-content:center;
}
.reiBox01 .boxList.aContent.between {
height:300px;
padding:0;
align-content:space-between;
}
.reiBox01 .boxList.aContent.between li {
flex:0 0 300px;
}
.reiBox01 .boxList.aContent.around {
height:300px;
padding:0;
align-content:space-around;
}
.reiBox01 .boxList.aContent.around li {
flex:0 0 300px;
}
</style>
flex-start：複数行のときの揃い方を設定します。
flex-startはdirectionが横方向ならば上、縦ならば左揃えになります。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
flex-end：こちらは複数行のとき横方向ならば下、縦方向なら右に揃います。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
center：こちらは複数行のとき上下中央揃えになります。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
space-between：こちらは複数行のとき上下均等揃えになります。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
space-around：こちらは複数行のとき上下中央揃えになり、上下の端にも間隔がある均等揃えになります。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
これは複数行の時、という条件付きですがちゃんとつかえればレスポンシブなどのときに役立ちそうですね。
次は伸縮設定です。これがフレックスの大きな利点でしょうか。
さっそくやっていきます。
flex
ここまでで、ちょいちょい使用していましたが、flexのご紹介です。
こちらは今までのと違い、子要素へ設定するので気を付けてください。
HTML
<div class="reiBox01">
<p>flex-grow：伸びの倍率設定です、全てに1を設定すれば均等に割り振られます。<br>注意すべきは、余ったスペースを埋める性質なのをわすれずに</p>
<ul class="boxList flex grow">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>flex-growその2：evenだけ倍率を変えてみます。</p>
<ul class="boxList flex grow02">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>flex-shrink：縮みの倍率設定です。0だと縮まりませんので、折り返し設定をしてない場合コンテナからはみ出ます。1で均等に縮まります。<br>この場合元の長さが長く、子要素がの合計がコンテナより大きくないといけないので、次にご紹介するflex-basisも一緒に使用します。<br>
元の長さは200pxにしてあります。</p>
<ul class="boxList flex shrink">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>flex-basis：元の長さを設定します。<br>
伸縮倍率がかかってない場合、これが基本のwidthとなります。<br>
ためしに、倍率を0にして、40pxにしてみます。</p>
<ul class="boxList flex basis">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
<div class="reiBox01">
<p>flex：flex-grow、flex-shrink、flex-basisをまとめてショートハンド記入できます。<br>記入順はgrow shrink basisです。</p>
<ul class="boxList flex sHand">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
CSS
<style>
.reiBox01 .boxList.flex {
}
.reiBox01 .boxList.flex.grow {
}
.reiBox01 .boxList.flex.grow li {
flex-grow: 1;
}
.reiBox01 .boxList.flex.grow02 li.even {
flex-grow: 3;
}
.reiBox01 .boxList.flex.shrink li {
flex-shrink: 1;
flex-basis: 200px;
}
.reiBox01 .boxList.flex.basis li {
flex-grow: 0;
flex-shrink: 0;
flex-basis:40px;
}
.reiBox01 .boxList.flex.sHand li {
flex: 1 1 200px;
}
</style>
flex-grow：伸びの倍率設定です、全てに1を設定すれば均等に割り振られます。
注意すべきは、余ったスペースを埋める性質なのをわすれずに
- 1
- 2
- 3
- 4
- 5
- 6
- 7
flex-growその2：evenだけ倍率を変えてみます。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
flex-shrink：縮みの倍率設定です。0だと縮まりませんので、折り返し設定をしてない場合コンテナからはみ出ます。1で均等に縮まります。
この場合元の長さが長く、子要素がの合計がコンテナより大きくないといけないので、次にご紹介するflex-basisも一緒に使用します。
元の長さは200pxにしてあります。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
flex-basis：元の長さを設定します。
伸縮倍率がかかってない場合、これが基本のwidthとなります。
ためしに、倍率を0にして、40pxにしてみます。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
flex：flex-grow、flex-shrink、flex-basisをまとめてショートハンド記入できます。
記入順はgrow shrink basisです。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
最後におまけな値です。
align-self or order
alige-self
align-self：機能はalign-itemsと同じです。なのでプロパティも同じものを使います。ですが、こちらは個別指定です。
個別とはどういうことかといいますと、align-itemsは親要素（Flexコンテナ）に設定し全体を変えるのですが、align-selfは子要素（Flexアイテム）に直接効かせることができます。
HTML
<div class="reiBox01">
<ul class="boxList self">
<li>1</li>
<li class="even num02">2</li>
<li class="num03">3</li>
<li class="even num03">4</li>
<li class="num05">5</li>
<li class="even num06">6</li>
<li class="num07">7</li>
</ul>
</div>
alige-self CSS
<style>
.reiBox01 .boxList.self {
height:200px;
flex-wrap: wrap;
align-items: center;
}
.reiBox01 .boxList.self li{
flex:1 1 auto;
}
.reiBox01 .boxList.self li.num02 {
align-self:flex-start;
}
.reiBox01 .boxList.self li.num03 {
align-self:flex-end;
}
.reiBox01 .boxList.self li.num04 {
font-size:40px;
align-self:baseline;
}
.reiBox01 .boxList.self li.num05 {
align-self:stretch;
}
.reiBox01 .boxList.self li.num06 {
align-self:baseline;
}
.reiBox01 .boxList.self li.num07 {
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
order
order：最後にこちらは順番を指定することができるプロパティです。
初期値は当然0からの連番ですが、こちらで順番を指定することができます。
たとえば、レスポンシブでブレイクポイントに達した時並びを変えるなんてことが出来たりします。
今回nthを使っていますが、classを振るなど工夫して使用してみてください。
HTML
<div class="reiBox01">
<ul class="boxList flex order">
<li>1</li>
<li class="even">2</li>
<li>3</li>
<li class="even">4</li>
<li>5</li>
<li class="even">6</li>
<li>7</li>
</ul>
</div>
CSS
<style>
.reiBox01 .boxList.flex.order {
flex-wrap:wrap;
}
.reiBox01 .boxList.flex.order li {
flex:1 1 200px;
box-shadow: inset 0 0 5px rgba(27, 27, 27, 0.22);
}
.reiBox01 .boxList.flex.order li:nth-child(1) {
order:2;
}
.reiBox01 .boxList.flex.order li:nth-child(2) {
order:5;
}
.reiBox01 .boxList.flex.order li:nth-child(3) {
order:1;
}
.reiBox01 .boxList.flex.order li:nth-child(4) {
order:7;
}
.reiBox01 .boxList.flex.order li:nth-child(5) {
order:3;
}
.reiBox01 .boxList.flex.order li:nth-child(6) {
order:4;
}
.reiBox01 .boxList.flex.order li:nth-child(7) {
order:6;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
フレックスボックスは色々な可能性を秘めていますね。
それぞれの使い方ばかりになりましたが、組み合わせるとフレキシブルな組み方がたくさんできます。
IEとSafariが未対応なのと、ベンダープレフィックスが必要といろいろまだ制限がございますが、使える環境化ではとても有効で面白いプロパティです。
ぜひ、試してみてください。(´・ω・｀)ｖ
お次は無理やりdisplay:table;をつかって、tableレイアウトを再現したりします。
第二回はこちら