*

フレックスコンテナでアイテムを複数行に配置する

公開日: : 最終更新日:2016/03/28 CSS , , ,

フレックスコンテナ内の全てのフレックスアイテムは、1行で配置されますが、flex-wrapプロパティを利用すると、コンテナ内のアイテムを、複数行に配置できます。
フレックスアイテムが複数の行に分割されると、それぞれの行は独立して配置されます。

flex-wrapプロパティ
設定値 説明
nowrap フレックスコンテナ内は一行になります。フレックスアイテムは、flex-directionプロパティの値で指定されたレイアウト方向に1行で配置されます。
wrap フレックスコンテナ内に複数行配置できるようにします。フレックスアイテムは、flex-directionプロパティの値で指定されたレイアウト方向で配置し、交差軸の終端の方向へ折り返されていきます。
wrap-reverse フレックスコンテナ内の複数行配置できるようにしますが、折り返しが「wrap」とは逆になります。フレックスアイテムは、flex-directionプロパティの値で指定されたレイアウト方向で配置されながら、交差軸の始端方向へ折り返されます。

始端と終端

フレックスコンテナやフレックスアイテムには、レイアウトの方向に応じた始端と終端というものがあります。私が学習した知識で説明すると、始端は1番初めにフレックスアイテムが置かれたところで、終端は、フレックスアイテムが最後に置かれたところです。

サンプルコードの実行結果はこちら

レイアウトの方向と行数を一括指定

したいときは、flex-flowプロパティを使います。
「flex-flow:flex-directionの値 flex-wrapの値;」と指定します。

スポンサードリンク

関連記事

cateCSSPage

HTMLファイルにCSSファイルを読み込ませる

CSSを適用するファイルを開きます。 そこで、適用したいスタイルを下記のサンプルコードの ように

記事を読む

cateCSSPage

文字の大きさを設定する。

文字の大きさを設定するにはプロパティ「font-size」を使います。 サンプルコードのように指定

記事を読む

cateCSSPage

CSSって何?

HTMLでマークアップした文章を、そのままブラウザで 黒い文字、背景白でタグの初期設定のまま表示さ

記事を読む

cateCSSPage

背景色を変更する。

タイトルの通り文背景の色を変更していきます。 背景を変更するときに使用するプロパティは ba

記事を読む

cateCSSPage

物の角を丸くするborder-radiusプロパティ

<div><section>などブロックレベル要素に 背景色をつけたとき、

記事を読む

cateCSSPage

overflowプロパティを使い表示領域を設定する

width,heightを使って高さを設定したコンテンツを入れる箱に、 サイズを超えるもの、画像や

記事を読む

CSS

グラデーションの繰り返しを指定する

グラデーションは繰り返して表示することができます。線形グラデーションを表示たいなら、repeatin

記事を読む

cateCSSPage

コンテンツを透明にしたいときに使うopacityプロパティ

このプロパティはコンテンツの透明度を設定することができます。 透明度の表す数値は0~1.0で、0は

記事を読む

cateCSSPage

行間を設定したいときに使う line-heightプロパティ

行間を設定して文字を読みやすくする。 行数の多いリストや文字数が多い段落は文字が詰まっていて 読

記事を読む

cateCSSPage

文字を斜体にしたり、文字を装飾する

文字を斜体にするfont-styleプロパティ CSSのfont-styleプロパティを使用するこ

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑