🕒 阅读时间：1 分钟 📝 字数：307 👀 阅读量： Loading...
有趣的学习网站
Learn CSS, HTML and JavaScript by Playing Coding Games
flex:重要的布局格式
flex作为现代web中重要的css3模型，在布局排版上起到了重要作用，这个网站可以带你快速学习flex.
选择难度
可以选择easy,这样会有提示，适合初学者。
开始练习
有了提示，还算简单，如果你看不懂英文的话(我想你应该能看懂)，浏览器一般都会有翻译的。
Flexbox 属性及参数表格
容器属性（应用于 flex 容器）
| 属性 | 参数 | 默认值 | 描述 |
|---|---|---|---|
display | flex / inline-flex | - | 定义容器为 flex 容器。 |
flex-direction | row / row-reverse / column / column-reverse | row | 定义主轴的方向。 |
flex-wrap | nowrap / wrap / wrap-reverse | nowrap | 定义项目是否换行。 |
justify-content | flex-start / flex-end / center / space-between / space-around / space-evenly / stretch | flex-start | 定义项目在主轴上的对齐方式。 |
align-items | flex-start / flex-end / center / baseline / stretch | stretch | 定义项目在交叉轴上的对齐方式。 |
align-content | flex-start / flex-end / center / space-between / space-around / stretch | stretch | 定义多行项目在交叉轴上的分布。 |
项目属性（应用于 flex 项目）
| 属性 | 参数 | 默认值 | 描述 |
|---|---|---|---|
order | 整数（默认为 0） | 0 | 定义项目的顺序。数值越小，排列越靠前。 |
flex-grow | 无单位的数（默认为 0） | 0 | 定义项目放大的比例。 |
flex-shrink | 无单位的数（默认为 1） | 1 | 定义项目缩小的比例。 |
flex-basis | auto / content / 长度值 | auto | 定义项目在主轴上的初始大小。 |
flex | flex-grow flex-shrink flex-basis 的简写形式 | - | 定义项目的放大、缩小和基础大小。 |
align-self | auto / flex-start / flex-end / center / baseline / stretch | auto | 覆盖容器的 align-items 属性，单独定义单个项目的对齐方式。 |