*

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

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

フレックスアイテムを配置したとき、フレックスコンテナの主軸方向に余白ができてしまうときや、逆に入りきらずはみ出してしまうときがあります。そんなときに、アイテムの幅を調整することで、コンテナ内にぴったり収めることができます。

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

flex-growプロパティ

フレックスアイテムの幅の合計値がフレックスコンテナのサイズより小さいときに余白が発生します。このプロパティは、この余白を各アイテムに分配して幅を広げて調整します。他の割り当てる余白の量を、他のフレックスアイテムに割り当てる量との比率で指定します。
比率を指定するので、負の値は指定できません。初期値は0です。

flex-shrinkプロパティ

フレックスアイテムの合計値がフレックスコンテナのサイズより大きいとき、フレックスアイテムがはみ出します。このプロパティは、アイテムがはみ出さないように幅を縮小して調整します。これも負の値を指定できません。このプロパティは後述のflex-basisプロパティの値により、縮小方法が変わります。初期値は1です。

flex-basisプロパティ

フレックスアイテムが調整される前の基本の幅を指定するプロパティです。値の指定方法はwidthプロパティ(主軸の方向によりheightプロパティ)と同じで、負の値は指定できません。
「flex-basis:0;」と指定すると、調整の割合がそのまま幅に適用されます。
「flex-basis:auto;」と書くと、アイテムの持つ幅が基本の幅となり、この幅に対して余白の割り当てや縮小が行われます。このプロパティの設定値は「auto」、「パーセント値+%」、「実数値+単位」です。初期値は「auto」です。

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

フレックスアイテムの大きさと可変にすると同時に、そのときの増減の割合やサイズを一括して指定するプロパティです。それぞれの値を半角スペースで区切って指定します。
「flex:flex-growの値 flex-shrinkの値 flex-basisの値;」

ちなみに、flexプロパティには以下のように指定することもできます。
flex:0 auto;
flex:initial;
上記の2つは「flex:0 1 auto」と同じです。アイテムのサイズはwidth,heightプロパティを基本とします。コンテナの主軸方向に余白が生じてもアイテムの幅は広げられませんが余白不足(はみ出したとき)が生じた場合は、縮小してきっちり格納されます。

flex:auto
上記は「flex:1 1 auto;」と同じです。アイテムのサイズはwidth,height1プロパティを基本としますが、アイテムは可変となり、コンテナの主軸方向に余白・余白不足が生じたとき増減して調整されます。

flex:none;
「flex:0 0 auto」と同じです。アイテムのサイズは、width,heightプロパティにより決まり、コンテナの主軸方向に余白や余白不足が生じたときは、アイテムの幅は調整されません。

flex:正の実数値
上記は「flex:正の実数値 1 0px;」と同じで、アイテムは可変となって、flex-basisプロパティの値が0に設定されるので、調整の割合がそのまま幅に適用されます。

スポンサードリンク

関連記事

CSS

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

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

記事を読む

cateCSSPage

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

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

記事を読む

CSS

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

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

記事を読む

cateCSSPage

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

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

記事を読む

cateCSSPage

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

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

記事を読む

CSS

擬似クラスってなに?

簡単に言うと、状況に合わせてスタイルを変える クラスのことです。 CSSで要素をしてい、何か

記事を読む

cateCSSPage

ボックスに影をつける

ボックスに影を付ける時に使用するのが 「box-shadow」プロパティです。 これの値に影の距

記事を読む

CSS

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

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

記事を読む

cateCSSPage

CSSって何?

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

記事を読む

CSS

要素に2次元の変形効果を付けてみる

transformプロパティを利用すると、要素のボックスに2次元、3次元の変形効果を適用できます。2

記事を読む

スポンサードリンク

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 ↑