flex 布局完整功能介绍和示例演示

Flex布局（弹性布局）是一种高效的CSS布局模式，用于创建响应式和灵活的页面布局。以下是其完整功能介绍和示例演示：

基本概念

• 弹性容器（Flex Container）：设置display: flex或display: inline-flex的元素成为弹性容器。
• 弹性项目（Flex Item）：弹性容器的直接子元素。

容器属性

1. flex-direction

   • 功能：定义主轴方向，决定弹性项目的排列方向。
   • 示例：

     .container {flex-direction: row; /* 默认值，水平从左到右 *//* 其他值：row-reverse（从右到左）、column（垂直从上到下）、column-reverse（从下到上） */
     }
     

2. flex-wrap

   • 功能：控制弹性项目是否换行。
   • 示例：

     .container {flex-wrap: nowrap; /* 默认值，不换行 *//* 其他值：wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方） */
     }
     

3. justify-content

   • 功能：定义弹性项目在主轴上的对齐方式。
   • 示例：

     .container {justify-content: flex-start; /* 默认值，靠主轴起点对齐 *//* 其他值：flex-end（靠主轴终点对齐）、center（居中对齐）、space-between（两端对齐，项目间等距）、space-around（每个项目周围等距）、space-evenly（项目间及首尾等距） */
     }
     

4. align-items

   • 功能：定义弹性项目在交叉轴上的对齐方式。
   • 示例：

     .container {align-items: stretch; /* 默认值，拉伸填满交叉轴 *//* 其他值：flex-start（靠交叉轴起点对齐）、flex-end（靠交叉轴终点对齐）、center（居中对齐）、baseline（基线对齐） */
     }
     

5. align-content

   • 功能：定义多行弹性项目在交叉轴上的对齐方式（仅在有多行时有效）。
   • 示例：

     .container {align-content: stretch; /* 默认值，拉伸填满交叉轴 *//* 其他值：flex-start（靠交叉轴起点对齐）、flex-end（靠交叉轴终点对齐）、center（居中对齐）、space-between（行间等距）、space-around（每行周围等距） */
     }
     

项目属性

1. order

   • 功能：控制弹性项目的排列顺序，值越小越靠前。
   • 示例：

     .item {order: 1; /* 默认值 */
     }
     

2. flex-grow

   • 功能：定义弹性项目的放大比例。
   • 示例：

     .item {flex-grow: 1; /* 默认值0，不放大 */
     }
     

3. flex-shrink

   • 功能：定义弹性项目的缩小比例。
   • 示例：

     .item {flex-shrink: 1; /* 默认值，可缩小 */
     }
     

4. flex-basis

   • 功能：设置弹性项目的初始尺寸。
   • 示例：

     .item {flex-basis: auto; /* 默认值，根据内容决定尺寸 *//* 其他值：具体像素值、百分比等 */
     }
     

5. flex

   • 功能：flex-grow、flex-shrink、flex-basis的缩写。
   • 示例：

     .item {flex: 1 1 auto; /* 默认值 *//* 示例：flex: 2 0 200px; */
     }
     

6. align-self

   • 功能：单独设置某个弹性项目在交叉轴上的对齐方式，覆盖align-items。
   • 示例：

     .item {align-self: auto; /* 默认值，继承align-items *//* 其他值与align-items相同 */
     }
     

示例演示

1. 水平居中

   .container {display: flex;justify-content: center;
   }
   

2. 垂直居中

   .container {display: flex;align-items: center;
   }
   

3. 等分布局

   .container {display: flex;justify-content: space-between;
   }
   

4. 多列自适应

   .container {display: flex;flex-wrap: wrap;
   }
   .item {flex: 1 0 200px;
   }
   

总结

Flex布局通过简单的属性设置，实现了灵活的页面布局，适用于各种响应式设计需求。掌握Flex布局，可以大大提高前端开发的效率。