HTML の最新の flex レイアウトを理解する

フロントエンド ページをレイアウトするたびに、float、position、margin などの属性を使用します。これらの属性は使用するのが少し面倒で、レンダリング時にブラウザーは多くのパフォーマンスを消費します

今日は、エラスティック レイアウトとも呼ばれる、最新のフレックス レイアウトについて説明します。

どのコンテナも flex レイアウトとして指定できますが、float、clear、vertical-align はすべて flex レイアウトでは無効になることに注意してください。

主軸の方向

フレックスコンテナは、x 軸と y 軸に分割されており、x 軸の正の方向はデフォルトで左から右、y 軸の正の方向はデフォルトで上から下です。

コンテナをフレキシブル レイアウトとして定義します。にはそれぞれ 4 つの属性値があります。それぞれ、左から右、右から左、上から下、下から上に、行、行反転、列、列反転です。

主軸方向の整列

justify-content:flex-start则主轴为左对齐
justify-content:flex-end 则主轴为右对齐
justify-content:center 则主轴为居中
justify-content:space-between则每个子项目之间等距离，前提是有剩余空间
justify-content:space-around则每个子项目会平分剩余空间，子项目与父元素边界处也会存在距离

垂直一直線整列！

align-item:flex-start纵向从上到下
align-item:flex-end纵向从下到上
align-item:center纵向居中对齐
align-item:baseline以基线对齐
align-item:strech这是默认方式

サブアイテム行の折り返し

flex-wrap:wrap超出父元素会换行
flex-wrap:wrap-reverse反向换行
flex-wrap:no wrap这是默认方式,不换行

垂直複数行配置!

align-content:flex-start上对齐
align-content:flex-end下对齐
align-content:center上下居中
align-content:space-between
align-content:space-around

上記は親要素に追加される属性です

サブプロジェクトの一部の属性

order:0,定义子项目的排序位置，数值越小越靠前，默认为0
flex-grow:0;定义子项目的放大比例，默认为0不放大
flex-shrink:1;定义子项目的缩小比例，默认为1，空间不足将等比缩小，0则不缩小，负值无效
flex-basis:1;定义子项目占据空间，默认为auto，可以设置百分比，也可以是固定值

上記の3つの属性は、上記の順序で flex: 1,1,1 のように省略できます

If間違いがあるので修正してください、一緒に頑張りましょう！

以上がHTML の最新の flex レイアウトを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。