flex布局的使用说明

Flex布局是一种用于构建灵活和响应式用户界面的布局模型。它由Flexbox CSS 模块提供支持，并允许在容器中对齐和分布子元素。以下是 Flex布局的使用说明：

1. display:flex;：将容器设置为 Flex 布局模式。这是使用 Flex 布局的基本要求。

2. 容器的属性：

• flex-direction：设置子元素的排列方向，可以是row（水平）、column（垂直）或row-reverse、column-reverse。
• flex-wrap：设置子元素是否换行，可以是nowrap（不换行）、wrap（换行）或wrap-reverse（换行反向）。
• justify-content：设置子元素在主轴方向上的对齐方式，可以是flex-start（起始）、flex-end（结束）、center（居中）、space-between（间隔相等）等。
• align-items：设置子元素在交叉轴方向上的对齐方式，可以是flex-start、flex-end、center、baseline等。
• align-content：设置多行子元素在交叉轴方向上的对齐方式，当flex-wrap为wrap时生效，可以是flex-start、flex-end、center、space-between等。

1. 子元素的属性：

• flex：设置子元素的伸缩比例，默认为 1 。
• flex-grow：设置子元素的伸展能力，默认为 0 。
• flex-shrink：设置子元素的收缩能力，默认为 1 。
• order：设置子元素的排列顺序，数值越小越靠前。