flex布局(弹性盒子)总结

flex布局优势

• 操作方便，布局极为简单，移动端应用很广泛
• pc端浏览器支持情况较差
• IE 11或更低版本，不支持或仅部分支持。

flex布局原理

flex 是 flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

• 当我们为父盒子设为flex布局以后，子元素的float、 clear 和vertical-align属性将失效。
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局元素，称为flex容器(flex container) ,简称“容器”。它的所有子元素自动成为容器成员,成为flex项目(flex item), 简称“项目”。

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

flex布局父项常见属性

• flex-direction: 设置主轴的方向
• justify-content: 设置主轴上的子元素排列方式
• flex-wrap: 设置子元素是否换行
• align-content: 设置侧轴上的子元素的排列方式(多行)
• align-item: 设置侧轴上的子元素排列方式(单行)
• flex-flow: 复合属性，相当于同时设置了 flex-direction 和flex-wrap

flex-direction 设置主轴的方向

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有： 行和列 x轴和 y轴

• 默认主轴方向就是x轴方向 ，水平向右 row
• 默认侧轴方向就是y轴方向，水平向下 column

justify-content 设置主轴上的子元素排列方式

• flex-start 默认值从头部开始
• flex-end 从尾部开始排列
• center 在主轴居中对齐
• space-around 平分剩余空间
• space-between 先两边贴边 再平分剩余空间(重要)

flex-wrap 属性

flex布局中，默认的子元素是不换行的。 可以书写：flex-wrap:wrap; 换行

align-items属性 设置侧轴上的子元素排列方式 (单行)

• flex-start 默认值从头部开始
• flex-end 从尾部开始排列
• center 在侧轴居中对齐 (垂直居中)
• stretch 拉伸

align-content 设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况，(单行无效)

• flex-start 默认值从头部开始
• flex-end 从尾部开始排列
• center 在主轴居中对齐
• space-around 平分剩余空间
• space-between 先两边贴边 再平分剩余空间(重要)
• stretch 拉伸

flex-flow

flex-flow 属性 是flex-direction 和flex-wrap属性的复合属性。flex-flow:column wrap

flex 布局子项常见属性

flex属性

flex属性定义子项项目分配剩余空间，用flex来表示占多少份数。flex:number类型; flex:1;

align-self 控制某一个子项在侧轴上的排列方式。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch.

order 属性定义项目的排列顺序

数值越小， 排列越靠前，默认为0. 注意：和 z-index不一样