掌握CSS Flexbox，打造完美响应式布局，适配各种设备！

 📘  文章引言

CSS Flexbox（弹性盒子）是一种现代的布局模式，它提供了一种更加灵活和高效的方式来对页面元素进行布局。本文将详细介绍CSS Flexbox的基本概念、属性和用法。

基本概念
Flexbox 是一种新的 CSS 布局模式，它可以轻松地实现各种复杂的布局。与传统的布局方式（如浮动、定位等）相比，Flexbox 具有更高的灵活性和性能。

Flexbox 的核心思想是将容器划分为多个项目（item），这些项目可以在容器中自由地调整大小和位置。通过设置容器和项目的样式属性，可以实现各种复杂的布局效果。

基本属性

以下是 Flexbox 的一些基本属性：

•  display: 用于将一个容器定义为弹性盒子容器。默认值为 inline-flex，也可以设置为 flex。

.container { display: flex; }

• flex-direction: 用于设置项目的排列方向。可选值有 row（默认值，水平排列）、row-reverse （水平排列，反向）、column（垂直排列）和 column-reverse（垂直排列，反向）。

.container { flex-direction: row; }

1. flex-wrap: 用于设置项目是否换行。可选值有 nowrap（默认值，不换行）、wrap（换行）和 wrap-reverse（换行，反向）。

.container { flex-wrap: wrap; }

justify-content: 用于设置项目在主轴上的对齐方式。可选值有 flex-start（默认值， 起始位置对齐）、flex-end（结束位置对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）和 space-around（平均分布，项目之间的间隔相等）。

.container { justify-content: center; }

align-items: 用于设置项目在交叉轴上的对齐方式。可选值有 stretch（默认值，拉伸以填充交叉轴）、flex-start（起始位置对齐）、flex-end（结束位置对齐）、center（居中对齐）和 baseline（基线对齐）。

.container { align-items: center; }

align-content: 用于设置多行项目在交叉轴上的对齐方式。可选值有 stretch（默认值，拉伸以填充交叉轴）、flex-start（起始位置对齐）、flex-end（结束位置对齐 ）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）和 space-around（平均分布，项目之间的间隔相等）。

.container { align-content: space-between; }

 flex-grow, flex-shrink, flex-basis: 这三个属性用于控制项目的尺寸。其中，flex-grow 定义了项目的放大比例，flex-shrink 定义了项目的缩小比例，flex-basis 定义了项目的初始尺寸。默认情况下，所有项目的 flex-grow、flex-shrink 和 flex-basis 都为 0 1 auto。

.item { 
flex-grow: 1; 
/* 放大比例 */ 
flex-shrink: 1; 
/* 缩小比例 */ 
flex-basis: auto; 
/* 初始尺寸 */
 }

• order : 用于改变项目的排列顺序。数值越小，排列越靠前。默认值为 0。

.item { order: -1; /* 排在最后 */ }