Movatterモバイル変換

petite_blue id:petite_blue

flexboxに関するpetite_blueのブックマーク (3)

CSSで区切り線を実装するのは、flexboxが簡単で便利！レスポンシブ対応の区切り線を実装するテクニック
要素間の区切り線をレスポンシブ対応にする時、どのように実装していますか？ flexboxで実装すると、1つのコードでコンテンツに合わせて伸縮し、デスクトップもスマホにも対応、スクリーンサイズに合わせて垂直・水平にも切り替えるのにも対応できます。さらに、区切り線をグラデーションや破線にするのも簡単です。CSS flexboxでレスポンシブ対応の区切り線を実装する巧妙で素晴らしいテクニックを紹介します。 Flexbox DynamicLine Separator by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに区切り線の実装なぜ区切り線が小さい四角になるのか区切り線の太さグラデーションの区切り線破線の区切り線これを行う別の方法終わりにはじめにUIをデザインしているときに
petite_blue2022/03/09
css
flexbox
リンク
🐛よくハマったFlexboxのバグまとめ｜たかもそ／Web Creator.
Flexbox はレイアウトを組むのに非常に便利ですが、バグがとても多いことでも有名です。最新のブラウザでも次々と新しいバグが報告されており、すベてを紹介するのは大変なので、自分がよくハマったバグをまとめます。なお、ベンダープレフィックスは省略しているので注意してください。 flex-flow: column wrap; がはみ出るdisplay プロパティに inline-flex を指定していたり、position プロパティに absolute を指定して絶対配置している場合、flex-flow プロパティに column wrap を指定すると Flex コンテナからはみ出てしまいます。バグが発生するブラウザ・Chromium Edge ・Firefox ・Chrome ・Safari ・Opera ・iOS Safari ・Android 30 以降 <div class=
petite_blue2020/03/26
css
flexbox
リンク
独学の人でも大丈夫！CSS Flexboxの使い方を基礎から学べるチュートリアル
CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです！ 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思います。 Flexbox30 -GitHub by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1日目: Flexboxとは Flexboxの前は、レイアウトをするためにfloatを主に使用していました。CSSのデベロッパーは、floatは古い方法で限界があり、フラストレーションが貯まることをよく知っています。しかし、現在は違います！レスポンシブ対応の柔軟なレイアウトはもちろ
petite_blue2019/12/05
css
flexbox
リンク
1