読者です 読者をやめる 読者になる 読者になる

メモを揉め

お勉強の覚書。

Flexbox

flexbox-grow, flex-shrink, flex-basis について

flex-grow CSS プロパティは、flex アイテムの flex grow factor を指定します。これは、アイテムが flex コンテナ内のスペースをどれだけ占有するかを指定します。 MDN: flex-grow MDN の説明がシンプルすぎてよく分からなかったので、もう少し詳しく調べた…

Case Studies in Flexbox - flex-grow, flex-shrink, flex-basis

flexboxのプロパティの組み合わせを比較できるカタログが欲しいなーと思ったので作ってみました。 各プロパティーの値がどのように解釈されるか、ブラウザ間での違いなどが分かります。 あれもこれもと入れていたら無駄に長くなりました。 See the Pen Case …

flexアイテム内のスクロールを有効にする

やりたいこと display: flex内の各要素(以下flexアイテム)は、自分の中のコンテンツに合わせて大きさが変わります*1。 そのため、コンテンツが画面からはみ出すような大きさの時はスクロール表示になって欲しいなーって時でも、そのままではスクロール表示…

width、heightがautoの要素にtransitionを適用する

CSS3のtransition。 一般的なウェブアプリのUIで動きが必要になる時って、始点と終点がある程度決まっていて、animationの@keyframeを駆使するような動きは限定的なことが多いと思うのだけど。 このtransitionを使っていていつも悩ましいのが、widthやheight…

button要素にはflexboxを使わないほうが良さそうです

<button>要素にflexboxを適用したところ、Chrome、Safari、FireFoxでそれぞれ表示が違った。 IEではまだ試していない。 調べてみるとどうやらこういう事らしい。 stackoverflow: Flexbox not working on <button> element in some browsers The problem is that the <button> element</button></button></button>…