- 前言
- Flex 基本概念
- Flex 容器
- 1. flex-direction: 决定主轴的方向(即项目的排列方向)
- 2. flex-wrap: 决定容器内项目是否可换行
- 3. flex-flow: flex-direction 和 flex-wrap 的简写形式
- 4. justify-content：定义了项目在主轴的对齐方式。
- 5. align-items: 定义了项目在交叉轴上的对齐方式
- 6. align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用
- Flex 项目属性
- 1. order: 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0
- 2. flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
- 3. flex-grow: 定义项目的放大比例
- 4. flex-shrink: 定义了项目的缩小比例
- 5. flex: flex-grow, flex-shrink 和 flex-basis 的简写
- 6. align-self: 允许单个项目有与其他项目不一样的对齐方式
- 结语
前言
Flex 布局是一个用于页面布局的全新 CSS3 模块功能。它可以把列表放在同一个方向（从左到右或从上到下排列），并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩容器（flex container）来辅助实现。以前我在学习页面布局的时候我深受其 float、display、position 这些属性的困扰。然而学习 Flex 布局，你只要学习几个 CSS 属性，就可以写出简洁优雅复杂的页面布局。关于 flex 布局属性我也做了一个 Xmind 图，大家可以下载查阅，链接《flex 布局 Xmind 图整理个人笔记分享》
本教程适合人群：
- 前端小白，不太明白页面布局技巧，但想通过简单的学习学会如何进行页面布局；
- 学过但是不太熟悉 Flex 布局，需要教程来巩固回顾 Flex 布局的知识点
- 项目不考虑兼容 IE 低版本浏览器，想简单优雅地写出漂亮的页面布局
废话就不多说了，我将尽可能地用简洁明了的言语来描述 Flex 布局，看完你会收获的。
Flex 基本概念
容器 align-items 设置为 flex-start，而第三个项目的 align-self 值为 flex-end。
结语
关于 Flex 布局的语法基础就讲到这里，相信能看到这里的你一定会有挺多收获。
如果你看完还是一头雾水的话，没关系，过两天花半小时再看一遍，一定能够理解的。