要使用Flex布局（Flexible Box），首先需要在HTML中為容器元素設定`display: flex;`，這將使該元素成為flex容器，其所有直接子元素將自動成為flex項目。Flex布局提供了以下主要屬性來控制元素的排列和對齊：
flex-direction。決定主軸的方向，從而影響項目的排列方式。可選值有row（默認，主軸水平，起點在左）、row-reverse（主軸水平，起點在右）、column（主軸垂直，起點在上）、column-reverse（主軸垂直，起點在下）。
flex-wrap。定義當flex子項超出主軸寬度時是否換行。可選值有nowrap（默認，不換行）、wrap（換行）、wrap-reverse（換行，但按逆交叉軸方向）。
justify-content。定義flex子項在主軸上的對齊方式。可選值有flex-start（靠主軸起點）、flex-end（靠主軸終點）、center（居中）、space-between（子項間等距）、space-around（子項兩側各有等距空間）、space-evenly（等量空間分布在子項之間和周圍）。
align-items。定義flex子項在交叉軸上的對齊方式。
align-content。當flex子項超過一行時，定義各行之間的空間分布。
此外，還有以下屬性用於控制flex子項之間的空間和flex子項的伸展：
flex-grow。定義flex子項的伸展比例。
flex-shrink。定義flex子項的收縮比例。
flex-basis。定義flex子項的基本尺寸。
通過這些屬性的組合使用，可以實現複雜的頁面布局和對齊需求。