*

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

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

フレックスコンテナ内の主軸方向に余白ができるとき、フレックスアイテムと余白をどのように配置するのかを指定するのがjustify-contentプロパティです、このプロパティはフレックスコンテナに対して適用します。初期値は「flex-start」です。

justify-contentプロパティ
説明
flex-start フレックスアイテムはフレックスコンテナの始端側に寄せて配置されて、主軸方向の余白は全てフレックスアイテムの末尾に配置される。
flex-end フレックスアイテムはフレックスコンテナの終端側に寄せて配置されて、主軸方向の余白は全てフレックスアイテムの先頭に配置される。
center フレックスアイテムはフレックスボックスの中央に寄せられます。主軸方向の余白は均等に2分割されて、すべてのフレックスアイテムの先頭と末尾に配置される。
space-between 最初のフレックスアイテムの始端がフレックスボックスの始端に、
最後のフレックスアイテムの終端がフレックスボックスの終端に揃えて配置される。残りのフレックスアイテムは、主軸方向の余白が各フレックスアイテムの間で均等に分配されるように配置される。フレックスアイテムが1つだけのときは「flex-start」と同じです。IE10,webkit系ブラウザでは「justify」と指定すると同様の配置です。
space-around フレックスアイテムは、主軸方向の余白が各フレックスアイテムの間で均等に分配されるように配置されますが、先頭と末尾の余白は、他の余白の半分になり、フレックスアイテムが1つのときは、「center」で指定したときと同じ。

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

スポンサードリンク

関連記事

CSS

要素にフィルタをかけてみる

注意:今回書くfilterプロパティはChrome,Safari,Android,IOS7以降でない

記事を読む

cateCSSPage

要素の表示形式を変更するdisplayプロパティ

要素にはブロックレベル要素とインラインレベル要素というものが あります。 サンプルプログラム

記事を読む

CSS

子要素を透視図法で表示したり、要素の裏面の表示方法を指定する

視点の距離を指定することで子要素で透視図法で表示するときに利用するのがperspectiveプロパテ

記事を読む

cateCSSPage

背景色を変更する。

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

記事を読む

CSS

フレキシブルボックスレイアウトでアイテムの並び順を指定する

フレックスアイテムはソースコードに書かれた順番でフレックスコンテナ内に普通は配置されます。アイテムの

記事を読む

CSS

フレキシブルボックスレイアウトを使う

久しぶりにCSSの記事を書いていきます。タイトルの通りフレキシブルボックスレイアウトについて書きます

記事を読む

cateCSSPage

要素の親子関係を示す子孫セレクタ

特定の親要素に内包する子要素を指定する p{color:blue}、.test{font-size

記事を読む

CSS

トランジション効果を付けてみる

トランジション、遷移と言ったりします。トランジションとは、あるスタイルを別のスタイルへスムーズに変化

記事を読む

cateCSSPage

背景画像を表示させる位置を設定する。

背景画像の初めの表示位置を指定できれば、 ある要素の下部にだけ背景画像を設定したり、 テキストの

記事を読む

cateCSSPage

テキストの回り込みを設定するfloatプロパティ

通販サイトやニュースサイトを眺めていると 様々なコンテンツが横に並べて配置され、 それが複数あり

記事を読む

スポンサードリンク

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 ↑