css常用布局之flex布局

 

Flexbox 是一个一维的布局模式，它可以轻松地在不同的方向上排列子元素（称为 flex 项），即使它们的大小是未知或者是动态变化的。以下是 Flexbox 的一些关键概念：

1. 容器和项：

   • 启用 Flexbox 布局的容器称为 flex 容器。
   • 容器内的所有子元素自动成为 flex 项。

2. 主要轴和交叉轴：

   • 主要轴是 flex 容器的主轴，定义了 flex 项的排列方向。
   • 交叉轴是与主要轴垂直的轴，定义了对齐方式。

3. 属性：

   • display: flex; 将容器设置为 flex 容器。
   • flex-direction 属性定义了主要轴的方向（行或列）。
   • justify-content 属性定义了沿主要轴的对齐方式。
   • align-items 属性定义了沿交叉轴的对齐方式。
   • flex-wrap 属性允许 flex 项换行。
   • flex 属性是 flex 项的简写属性，用于设置 flex-grow（放大比例）、flex-shrink（缩小比例）和 flex-basis（基础大小）。

4. Flex 项的属性：

   • order 属性定义了 flex 项的顺序。
   • flex-grow 属性定义了 flex 项的放大比例。
   • flex-shrink 属性定义了 flex 项的缩小比例。
   • align-self 属性允许单个 flex 项有与其他项不同的对齐方式。