CSSで区切り線を実装するのは、flexboxが簡単で便利！ レスポンシブ対応の区切り線を実装するテクニック

要素間の区切り線をレスポンシブ対応にする時、どのように実装していますか？ flexboxで実装すると、1つのコードでコンテンツに合わせて伸縮し、デスクトップもスマホにも対応、スクリーンサイズに合わせて垂直・水平にも切り替えるのにも対応できます。さらに、区切り線をグラデーションや破線にするのも簡単です。 CSS flexboxでレスポンシブ対応の区切り線を実装する巧妙で素晴らしいテクニックを紹介します。 Flexbox Dynamic Line Separator by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 区切り線の実装 なぜ区切り線が小さい四角になるのか 区切り線の太さ グラデーションの区切り線 破線の区切り線 これを行う別の方法 終わりに はじめに UIをデザインしているときに

[coliss]

CSS flexboxでレスポンシブ対応の区切り線を実装するテクニック。

[tmayuko312]

ちゃんとsectionで区切ってて偉い。/ よく見たら違った、子要素と子要素の間だからdivで区切ってるのでこれは区切り線ではなく飾り線なのでは？(細かい)

[nelpesica]

[][css][区切り線][flex]

[kijtra]

2本までしか区切れないから限定的だね

[kvx]

なるほどねーorderとselfか。