FlexBoxとピボットでバランスをとる

この記事では、複雑なHTMLまたは高度なCSSを避けて、「ピボット」ポイントを中心に要素を中心にするための巧妙なフレックスボックス技術を紹介します。著者は、クロスワードパズルの類推を使用して問題を説明します。これは、必ずしも中間文字ではない中央の文字を中心とする言葉を中心にしています。

ハードコーディングされたオフセットの最初のアプローチは、柔軟性があり、冗長であるとみなされます。代わりに、「分裂と征服」戦略が採用されています。単語は、「ヘッド」（ピボットの前）と「テール」（ピボットと後）の2つの部分に分割されます。

コアソリューションは、FlexBoxのorderプロパティを活用して、ヘッドとテールの順序を逆転させます。 CSSスタイルはポジショニングを操作します：

• margin-right: auto頭を右に押します。
• position: relative 、 left: 50% 、およびright: 50%頭と尾の両方をピボットの周りに完全に中心にするために使用されます。

これが簡潔なCSSソリューションです：

 。容器 {
  ディスプレイ：Flex;
}
.item：last-child {
  マージン右：自動;
}
。アイテム {
  注文：2;
  位置：相対;
  右：50％;
}
.pivot、.pivot〜.item {
  注文：1;
  左：50％;
}

この方法はflex-directionをcolumnに変更することにより、垂直レイアウトに適応できます。また、頭と尾を別々の容器に包むよりも効率的です。重要なことに、このアプローチはセマンティックHTMLの注文を維持し、スクリーンリーダーのアクセシビリティを確保することです。

著者は、このコーディングチャレンジと、最適なソリューションを見つける際に、より広範なバランスをとるACT開発者が直面する類似点を強調することで締めくくります。 Codepenの例は、実践的なデモンストレーションのために提供されています。

以上がFlexBoxとピボットでバランスをとるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。