CSS Flex 入门指南：10 分钟学会基本用法

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

生成一个简单的教学示例，展示 CSS Flex 的 5 个核心属性（如 display: flex, justify-content, align-items, flex-direction, flex-wrap）。每个属性配有一个可视化示例和简短说明，适合初学者理解。

1. 点击'项目生成'按钮，等待项目生成完整后预览效果

今天想和大家分享一下CSS Flex布局的入门知识。作为一个前端新手，刚开始接触页面布局时总是被各种浮动和定位搞得头大，直到发现了Flex布局这个神器，简直打开了新世界的大门。下面我就用最简单的例子，带大家快速掌握Flex的5个核心属性。

1. display: flex
   这是开启Flex布局的第一步。只需要在父容器上设置这个属性，里面的子元素就会自动变成Flex项目。比如我们有一排按钮，默认是垂直排列的，加上display: flex后就会神奇地变成水平排列。

2. flex-direction
   这个属性决定了Flex项目的排列方向。默认是row（横向排列），但也可以设置为column（纵向排列）、row-reverse（反向横向）或column-reverse（反向纵向）。我经常用它来快速调整移动端和PC端的布局差异。

3. justify-content
   控制主轴（默认是水平方向）上的对齐方式。space-between让项目均匀分布，space-around给每个项目两侧都留空间，center居中对齐。做导航栏时特别实用。

4. align-items
   控制交叉轴（默认是垂直方向）上的对齐方式。stretch会让项目拉伸填满容器高度，center垂直居中，flex-start顶部对齐。实现垂直居中再也不用写margin:auto了。

5. flex-wrap
   默认情况下Flex项目会挤在一行。设置flex-wrap: wrap后，当空间不足时项目会自动换行。做响应式布局时这个属性特别重要。

实际使用时，我建议先在InsCode(快马)平台上创建个HTML文件试试这些属性。这个平台最方便的是可以直接在浏览器里写代码并实时看到效果，不用配置任何环境。比如我测试flex-wrap属性时，就实时调整窗口大小观察换行效果，比在本地开发快多了。

刚开始学Flex时可能会觉得属性有点多，但实际用起来就会发现它比传统布局方式简单直观得多。记住这5个核心属性，80%的日常布局需求都能搞定。剩下的flex-grow、flex-shrink等属性，等基础用熟了再学也不迟。

建议大家可以先在InsCode(快马)平台上创建一个简单的demo，把上面这些属性都试一遍。我刚开始学的时候就是通过不断修改数值、实时预览效果来理解每个属性的作用的，比单纯看文档要直观得多。

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

生成一个简单的教学示例，展示 CSS Flex 的 5 个核心属性（如 display: flex, justify-content, align-items, flex-direction, flex-wrap）。每个属性配有一个可视化示例和简短说明，适合初学者理解。

1. 点击'项目生成'按钮，等待项目生成完整后预览效果