*

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

公開日: : 最終更新日: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

円形グラデーションを設定する。

円形グラデーションは、ボックスの中心から外へ広がる グラデーションで、値は「radial-grad

記事を読む

CSS

フレックスアイテムの幅の増減を個別指定

フレックスアイテムを配置したとき、フレックスコンテナの主軸方向に余白ができてしまうときや、逆に入りき

記事を読む

CSS

円形・放射状のグラデーションを指定する

radial-gradient()関数を利用すると、1点から放射状に広がる円形のグラデーションを表示

記事を読む

cateCSSPage

CSSの書き方を覚える。

CSSの書き方 CSSはどの「要素」の「もの」を「どんな風」に するかを指定するものであり、半角

記事を読む

CSS

フレックスコンテナ内の主軸方向の配置方法を指定する

フレックスコンテナ内の主軸方向に余白ができるとき、フレックスアイテムと余白をどのように配置するのかを

記事を読む

CSS

3次元上で子要素の描画方法を指定する

3次元の変形効果においうて、親要素と子要素をどのような関係で表示するかを指定するときに、使用するのが

記事を読む

cateCSSPage

線形グラデーションを設定する。

CSS3から背景やボーダーにグラデーションを付すことが できるようになっています。 表現でき

記事を読む

cateCSSPage

CSSって何?

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

記事を読む

CSS

アニメーションの速度のパターンを設定する

animation-timing-functionプロパティを使うと、アニメーションを実行する速度の

記事を読む

cateCSSPage

id名,class名をCSSでセレクタにする。

CSSでid名,class名をセレクタに指定する場合、 id名の前には「#(イゲタ)」、class

記事を読む

スポンサードリンク

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 ↑