skillup

技術ブログ

デザイン

flexショートハンドに関して

投稿日:

実務でflexをちょこちょこ使うようになりました。

やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・

んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関して。

別々に書いてもいいんですが、一緒に書いた方がスマートでしょう。

大事なことはwidthを設定するプロパティだということ。

以下下記 URLを参考に。

https://github.com/umanari145/css/flex/flex2

flex-basicに関して

そのカラムが持っている基本の幅です。基本的にはこの幅を元に計算します。

ちなみにautoだと内包する要素に依存することになります。0でも中が潰れることはないようです。

flex-growに関して

余白が会った時にその分配比率です。なので余白がない時には意味がありません。

余白があっても0だと余白が分配されず、basisの値のままになります。

詳細な計算式はソースやリンクなどを参照。つっても簡単で単純に比率で分配するだけです。

flex-shrinkに関して

こちらは親要素に対して幅が足りない時の縮む割合です。なので子要素の幅が親要素を超過していないと、意味がありません。

growと違い計算方法がかなり複雑だと思われます。子要素の幅がまちまちなので通常の割合で縮むと幅が広いブロックの方が不利になるからです。

子要素が同じ幅だったり、違っていても伸縮率が1:1なら楽なんですけどね・・・

詳細な計算方法はネットを探しても出てきませんでした。要調査です。

参考リンク

大変わかりやすいです。流行っている技術はこういうのを見つけるのが楽だからありがたいですね・・

Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法

【Flexbox】幅・伸縮率を指定するflexboxのプロパティ

 

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

vertical-alignの挙動に関して

cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。 css中央ぞろえ ざっとまとめると以下のようなかんじでしょうか。 テキストのみの1行タイプであればli …

no image

css中央ぞろえ

よく出る中央ぞろえテクに関して 横センタリング   [CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ 中央センタリング たった4行! CSS3 Flex …

no image

BrowserSyncを使ったホットリロードに関して

BrowserSyncを使ったブラウザのホットリロードに関して。 ホットリロードとは「エディタなどで更新があった際にブラウザがすぐに検知して、最新の状態に自動更新してくれる」状態にブラウザをすることで …

no image

backgroundやbox系のプロパティ

cssのbackground-imageについてちょっとまとめ。urlとかrepeatとかはとりあえずぬきで Contents1 背景画像の位置 background-postion2 背景画像のサイ …

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

アーカイブ