*

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

公開日: : 最終更新日: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に設定されるので、調整の割合がそのまま幅に適用されます。

スポンサードリンク

関連記事

cateCSSPage

ボックスに影をつける

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

記事を読む

cateCSSPage

物の重なりの順番を設定するz-indexプロパティ

コンテンツの重なりの順番を設定するときに使用するプロパティは z-indexプロパティです。pos

記事を読む

CSS

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

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

記事を読む

CSS

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

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

記事を読む

cateCSSPage

style属性を使いCSSを書く、CSS内にコメントつける

HTMLファイル内の開始タグに、style属性を使い直接スタイルを 適用させることができます。st

記事を読む

cateCSSPage

枠線の形、太さを指定したい。

今回、触れるのは「border」プロパティです。コンテンツ領域と 前回の記事で紹介した「paddi

記事を読む

CSS

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

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

記事を読む

CSS

アニメーションのキーフレームとアニメーション時間を設定する

トランジションの機能を拡張したもので、CSS3アニメーションという物があります。トランジションと同じ

記事を読む

cateCSSPage

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

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

記事を読む

CSS

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

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

記事を読む

スポンサードリンク

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 ↑