flexbox 子・孫 要素の高さを揃える方法
CSSのflexboxは子要素の高さを揃えますが、孫要素の高さは揃えてくれません。 このページでは、子・孫 要素の高さを揃える方法を紹介します。 デモ 子要素の高さを揃える 孫要素の高さを揃える 孫要素の高さを揃える + ボタンを下に設置 複数の孫要素の高さを揃える + ボタンを下に設置（強引） デモ See the Pen flexbox sample by kura (@kuranopen) on CodePen. 子要素の高さを揃える Flexboxを使えば、通常子要素の高さは揃います。 HTML <div class="flex1"> <div class="item"> <p class="text">テキストテキストテキストテキスト</p> </div> <div class="item"> <p class="text">テキストテキストテキストテキストテキストテキストテキス
Understanding the CSS3 Flexbox (Flexible Box Layout Module)
4182 days since last revision. Details are possibly out of date. Update 17th August 2012: The original version of this post was based on the Editor’s Draft, 20 April 2012. Since then, the specification has undergone further changes. The article has now been updated and is based on the Editor’s Draft, 13th August 2012. The current Editor’s draft can be found at http://dev.w3.org/csswg/css3-flexbox/
CSS3 Writing Modes
CSS3 Writing Modesの新しいWDが出たので初めてまともに読んだ。Writing Modesは名前の通り書字方向の制御を行うプロパティーを定義するものなんだけど、それ以外にもブロックのフロー方向の制御を行うものもある。つまり縦書きとかの需要も増えていくだろうからそういう意味でも重要なんだけど、それだけではなくてレイアウトにも大きな影響を与えるのでFlexboxなんかとの兼ね合いからも重要。 .test { flex-flow: column wrap-reverse; writing-mode: vertical-rl; } これで右下から左上へ積み重なっていくカラムとか作れる(ようになる)という話。 Flexboxを始めここらへんのは既存のCSSの知識がまったく役に立たないので、CSS知らない人の方がすぐに覚えてうまく使えそう。CSSに限らず積み重ねた知識というのは移り変わ
Flexbox、おもしろいですよ？
Translation of: Learn You a Flexbox for Great Good! | The Haystack. written by Stephen Hay Flexboxについて知っていますか？ 多分、名前は聞いたことがあるでしょう。もしかしたらチュートリアルくらいは読んだことがあるかもしれません。既に試していたりしますか？ Flexboxという代物についてあまり聞いたことがなかったり、前に試してから随分と経つなら、そのFlexboxに関する知識のことは一旦全て忘れてしまいましょう！ 現時点での最新版である2011年11月29日にリリースされた仕様では完全に別物になっています。 訳注 2012年3月22日に新しく公開されたWorking Draftでもまた大きな変更が加わり、この文書の一部はそのWDにそぐわないものになっています。大筋は変わりませんし、2012年3
Learn You a Flexbox for Great Good!を訳した
おもしろい！Stephen Hayの書いたLearn You a Flexbox for Great Good!というCSS Flexible Box Layout Moduleについての記事がとても良かったので「Flexbox、おもしろいですよ？」というタイトルで日本語に訳した。もう一回言うけど、おもしろい！ まぁ細かくは翻訳の方を読んでもらうとして、ざっとさわりというか読むにあたって知っとくと良さそうなことだけちょっと結構書く。 Flexbox？ Flexboxはリサイズされたりとかした時に、それに合わせて並んだボックスをそれぞれ割合でリサイズさせたり、あるものだけリサイズするようにしたり、リサイズはしないけど位置をずらしたり(右や中央寄せとかだけでなく均等割付とかも)とかするもの。FirefoxのUIやアドオンでは既に普通に使われている(Web標準を目指しているものとはちょっと違うけ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デベロッパーツールがさらに便利に！Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載
