Welcome to ほんっとに! INDEX をご利用ください

はじめての人にもわかりやすくHTMLの組み方を書いています。CSSも基本からやってみましょう。
サイトの編集ができるようになる手助けになれば…と思っています。HTML5+CSS3ベースです。

はじめてのHTML INDEX
HTMLについて [1]から順に読みたい、特定の記事を読みたいってときは、このINDEXからGO!
CSS3レイアウトも時々登場します。
HTML要素 索引
HTML要素のアルファベット別INDEXです。
特定のHTML要素について調べたいときには、わりと便利です。
はじめてのCSS INDEX
CSSについて【1】から読みたい、CSSの特定の記事を読みたいときは、こちらからGO!
(はじめてのHTML での CSSの使用例も、ここでINDEXにまとめました。ご利用ください)

サイト内検索はこちらからどうぞ

【18-2】Flexbox内のボックスの配置方法を指定しよう

前回に引き続き、Flexbox について。
今回は、flex-wrapプロパティ、flex-directionプロパティを使ってみましょう。
この2つのプロパティの値を一括でまとめるショートハンドプロパティ flex-flow もあります。

本日のINDEX
  1. flex-wrap で Flexアイテムを折り返す
  2. flex-direction で Flexアイテムの配置方向を決める
  3. 2つのプロパティのショートハンドプロパティ flex-flow

Flexbox に関しては、記事を分けています。

【18-1】Flexbox を使おう!(display:flexでFlexboxを作る)
display: flex で「Flexコンテナ」を作ります。
flex-basis、flex-grow、flex-shrink、justify-contentプロパティを使ってみます。
【18-2】Flexbox内のボックスの配置方法を指定しよう ←今日はココ
flex-wrap、flex-directionプロパティを使います。
【18-3】Flexbox内の縦(垂直)方向を揃えよう
align-items、align-self、align-contentプロパティを使います。
【18-4】Flexboxの orderプロパティで表示順を自由に変えよう
orderプロパティを使います。
【18-5】Flexboxの古い仕様とベンダープレフィックスまとめ
Flexboxの各ブラウザの対応やベンダープレフィックスについて。

参考資料:W3C CSS Flexible Box Layout Module Level 1

flex-wrap で Flexアイテムを折り返す

flex-wrapプロパティは、Flexアイテムを折り返すか折り返さないか指定できます。

デフォルトは nowrap(折り返さない)なので、Flexコンテナの中で Flexアイテムは 一行で連なり、親コンテナの中のスペースが足りなくてもそのまま。収まりきらなければ、はみ出します。
これを、flex-wrap: wrap と指定することで、スペース内で折り返して表示させられます。

文章で読んでいるより、サンプルを見たほうがわかりやすいですね。
サンプルのウィンドウサイズを小さくしていくと、順次改行しながら表示されます。

サンプルでは、Flexコンテナに flex-wrap: wrap と指定しただけ。たったこれだけで Flexアイテムが折り返すようになるんですね。これは便利。

div#container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between}
div#container section {flex:1 0 100px}

flex-wrapプロパティの値は、キーワード3つだけです。

flex-wrap の値
nowrap 折り返さずシングルラインで表示します。これがデフォルト
wrap Flexコンテナに合わせて折り返してマルチラインにします
wrap-reverse wrap と同じく改行しますが、折り返しが逆に(上側に)向かいます。
サンプルのウィンドウサイズを小さくしていって確認してください。

最後の「wrap-reverse」のサンプルでは、1行あたりでの並び方は「3」「4」「5」や、「1」「2」などと、左から右へになります。
これは次に出てくる「flex-direction」プロパティの値がデフォルトの「row」のままだから。
「flex-direction : row-reverse」も組み合わせて使えば、
「6」
「5」「4」「3」
「2」「1」
といったかんじで、完全に逆順(HTML上の記述が新しいものから古いものへ)に表示できます。
こちらは最後の「ショートハンドプロパティ flex-flow」のサンプルで確認してください。

値の継承 なし 適用できる要素 Flexコンテナ な要素

flex-direction で Flexアイテムの配置方向を決める

これまでのサンプルで Flexアイテムが左から右への並び方だったのは、flex-directionプロパティの指定が無くて、これがデフォルトの row だったからです。
flex-directionプロパティは、Flexアイテムの配置の方向を決めます。

デフォルトの row は「横に並ぶ」指定で、並び順は、そのHTML文書の「書字方向」に従います。
日本語や英語などの場合は、左から右(ltr)の順番です。(アラビア語などなら右から左(rtl)になります)
下の↓値の一覧では、日本語表示での解説です。

flex-directionプロパティの値は、キーワード4つです。

flex-direction の値
row ltr(left to right 左から右)に水平方向に。これがデフォルト
row-reverse rtl(right to left 右から左)に水平方向に
column ブロックレベル要素のように、垂直方向に上から下へ
column-reverse 垂直方向に下から上へ
値の継承 なし 適用できる要素 Flexコンテナ な要素

サンプルは、ビューポートが幅400px以下の時、flex-direction: column に指定しています。
PCでご覧のかたはウィンドウサイズを小さくして確認してみてください。

サンプルにもソースを表示していますが、400px以下のときに flex-direction: column になるよう切り替えるためには、CSSのメディアクエリを使っています(7行目以降)
それ以前の指定に flex-direction: row を指定していないのはデフォだから(省略しても row)

div#container {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between}
div#container section {flex:1 0 100px}
 
@media only screen and (max-width: 400px){
    div#container {flex-direction:column} /*親のFlexboxコンテナに*/
    div#container section {min-height:200px}
}

2つのプロパティのショートハンドプロパティ flex-flow

上記の2つのプロパティflex-wrap と flex-direction を1つにまとめるショートハンドプロパティ flex-flow があります。

flex-flow値は1〜2個で、順番は自由。値は半角スペースで区切ります。
値が1コで flex-flow: wrap としても、flex-flow: column としてもイイんですね。省略したほうのプロパティの値はデフォルトになります。

でも、flex-direction が「column」だったら、アイテムはブロックレベル風になるので、flex-wrap が「nowrap」だろうが「wrap」だろうが関係ないよね。ですので、flex-flow: column nowrap と書いても、nowrapのほう(flex-wrapプロパティ)は無視されます。

「flex-flow: wrap-reverse row-reverse」と指定したサンプルを作ってみました。
「flex-wrap:wrap-reverse」で、折り返しが下から上に、
「flex-direction:row-reverse」で、水平方向に右から左に配置されるという指定の組み合わせです。
PCのかたはサンプルをウィンドウ幅を狭くしてみてください。

Flexボックス内のスペースに余裕があるときは、折り返さず右から左方向に並びます。Flexボックス内に余裕が無いときは、折り返しつつ下から上方向に向かう順番で並びます。
HTML文書で後に(下に)書かれたものほど上に表示するので「最新情報」などの表示に使えますね。

これが「flex-flow: wrap row-reverse」と指定すると、1行あたりの並び方が「row-reverse」なだけなので、
「2」「1」
「4」「3」
「6」「5」
という並び方になるのね。これはちょっと使い道が思いつきませんね。
(こうやって文章で説明するとややこしいけど、実際使ってみると簡単。ぜひいろいろテストしてみてください)

次回予告

次回は、Flexアイテムの Flexボックス内での縦(垂直)方向を揃えるプロパティ
align-items、align-self、align-content を使ってみましょう。
Flexアイテムを上揃えや下揃えにしたり、上下のセンターに置いたり、いろいろやってみましょう。

この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

関連記事

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2016/09 | 10
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.