【CSS】flex-growを使おう - Qiita
はじめに 問題 早速ですが、こんな時どう実装しますか？ 少し前までの私 Headerは、height: 100pxでpadding: 10pxということは上下のpaddingを足して120px Footerがheight: 50pxでpadding: 5pxだから同様に考えて、60px 合わせるとMain以外の部分が、180pxで、 Mainのpaddingが10pxだから、上下で20px必要で、 ふう... 問題点 HeaderとFooterの高さが変わると計算し直す必要がある HeaderやFooterが動的に高さが変わる場合、JSで高さを適用しないといけない etc... そこでflex-growを紹介します。 flex-growの紹介に入る前に、**Flexbox(フレックスボックス)**について語ります Flexbox Flexboxは、主に次の2つの部分から成り立っています f
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
