摘要：目前，它已经得到了大部分浏览器的支持。它的所有子元素自动成为容器成员，称为项目，简称项目。容器默认存在两根轴水平的主轴和垂直的交叉轴。如果项目未设置高度或设为，将占满整个容器的高度。
距离新建这篇文章已经好几个月了，今天有终于有时间来完善这篇文章了...
flexbox即弹性布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了大部分浏览器的支持。
flexbox共经历了三个阶段的变化：
(1)W3C 2009年第1次草案：display:box
(2)W3C 2011年第2次草案：display:flexbox
(3)W3C 2012年第3次草案：display:flex(当前阶段版本)
首先来看张图了解下几个基本的概念：
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
任何一个元素都可以只能为flex布局，其可以水平布局也可以垂直布局(通过设置flex-direction：row／columnl来设置)，设置元素为flex 布局后我们还可以根据不同的需求在该元素上设置一下几种属性(容器属性)：
(1)flex-direction属性决定主轴的方向（即项目的排列方向）
值范围：flex-direction:
row （默认值）：主轴为水平方向，起点在左端
row-reverse 主轴为水平方向，起点在右端
column 主轴为垂直方向，起点在上沿
column-reverse; 主轴为垂直方向，起点在下沿
(2)flex-wrap属性决定了如果一条轴线排不下，如何换行
值范围：flex-wrap:
nowrap 不换行
wrap 换行，从第二行的左侧开始
wrap-reverse 换行，从第二行的右侧开始
(3)justify-content属性决定了项目在主轴上的对齐方式
值范围：justify-conten:
flex-start 左对齐
flex-end 右对齐
center 居中对齐
space-between 两端对齐，项目之间的间隔都相等
space-around 每个项目两侧的间隔相等
(4)align-items属性决定了项目在交叉轴上如何对齐方式
值范围：align-items:
flex-start 交叉轴的起点对齐。
flex-end 交叉轴的终点对齐。
center 交叉轴的中点对齐。
baseline 项目的第一行文字的基线对齐。
stretch 如果项目未设置高度或设为auto，将占满整个容
器的高度。
(5)align-content属性决定了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
值范围：align-content:
flex-start 与交叉轴的起点对齐。
flex-end 与交叉轴的终点对齐。
center 与交叉轴的中点对齐。
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的
间隔比轴线与边框的间隔大一倍。
stretch 轴线占满整个交叉轴。
**以上就是flex布局时容器上比较重要的属性，需理解透彻。**
说完容器的布局属性再来说说容器下各个项目的布局属性
以下6个属性设置在项目上：
1. order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
2. flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
3. flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
4. flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏
览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即
项目的本来大小
5. align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属
性。默认值为auto，表示继承父元素的align-items属性，如果没有
父元素，则等同于stretch
**以上就是flex布局时项目上比较重要的属性，需理解透彻。**
几点注意事项
flex布局其实就是将父类的元素实现了流式布局，我们只需要在父类定位好的情况下给子类“添砖
加瓦”就可以了
justify-content：center + align-content：center 结合使用可以很方便的实现元素水
平和垂直居中，相比之前用position来实现要高效很多
由于经历了3个阶段的演变，所有在个别浏览器下会存在兼容性问题(如uc的低版本、QQ浏览器)，
所以建议使用"autoprefixer"这类工具自动补全各类写法已避免该问题的出现
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111674.html
阅读 4289·2021-09-24 09:47
阅读 1183·2021-09-03 10:33
阅读 2061·2019-08-30 11:13
阅读 1028·2019-08-30 10:49
阅读 1751·2019-08-29 16:13
阅读 2045·2019-08-29 11:28
阅读 3087·2019-08-26 13:31
阅读 3630·2019-08-23 17:14
