前端flex布局最全文档，工作学习中复习必备

常用布局第二篇 —— flex布局

回顾

在上一篇中我们结束了流式布局，流式布局中主要是说了理论的知识比较多，最主要的还是移动端中的二倍图效果是非常重要。还有对于视口的效果，末尾之后我们又说了背景缩放的问题background-size，和特殊的样式例如兼容-webkit-等效果。基础还是需要好好学习。

flex布局原理

flex 是 flexble Box 的缩写，意为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局，值得一提的是在现在大部分的工作中用flex布局的占比是非常大的，基本上现在较为基础的页面都是使用的flex布局。

• 当我们为父盒子设为flex布局以后，子元素的fkiat、clear和vertical-align 属性将无效
• 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
• 采用 flex 布局的元素，称为 flex 容器（flex container），简称“容器”。它的所有子元素自动称为容器成员，称为 flex 项目（flex item）
• 例如：一个div包裹了若干个 span，那么对于div来说就是 flex的父容器，对于 span 来说就是 flex 的子容器。
• 子容器可以横向排列 也可以纵向排列

总结：flex布局原理 就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式

flex布局父项常见属性

flex-direction：设置主轴的方向

• flex-direction：row —— 默认从左到右
• flex-direction：row-reverse —— 从右到左 如下图
• flex-direction：column —— 从上到下
• flex-direction：column-reverse —— 从下到上

// 默认从左到右
flex-direction：row;

// 从右到左 如下图
flex-direction：row-reverse;

// 从上到下
flex-direction：column;

// 从下到上
flex-direction：column-r