flex布局

一、flex布局

1.1 flex布局是什么？

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。简单来说，弹性布局就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

1.2 flex布局与传统布局的优缺点

flex布局：操作方便，布局极其简单，移动端使用比较广泛
pc端浏览器支持情况比较差
IE11或更低版本不支持flex或仅支持部分
传统布局： 兼容性好
布局繁琐
局限性，不能在移动端很好的布局
因此，如果是pc端页面布局，还是采用传统方式，如果是移动端或者是不考虑兼容的pc则采用flex。

2.flex布局的常见属性

2.1 父元素常见属性

flex-direction:
在 flex 布局中，是分为主轴和侧轴两个方向，默认主轴方向就是 x 轴方向，水平向右，默认侧轴方向就是 y 轴方向，水平向下，我们通过在父元素设置flex-direction属性来控制，它的默认值是从左到右row，row-reverse表示从右到左，也可以利用这个属性实现翻转效果，column从上到下，column-reverse从下到上
justify-content:
设置主轴上子元素的排列方式，一样是在父元素上设置，
align-items：
设置侧轴上子元素排列方式（用于单行）
align-content：
设置侧轴上的子元素排列方式（用于多行）

2.2 子元素常见属性

flex：定义子元素占剩余空间的几份
align-self:当子元素设置了这个属性，它就会覆盖掉align-items,与其他的项目可以有不一样的排列方式
order：值为数字，数值越小子元素所在位置越靠前

总结

flex布局为我们制作移动端网页提供了特别大的便利，因为在使用flex的时候一定要注意它的兼容性问题。