flex 盒子布局的原理
通过给父盒子添加flex属性 来控制子盒子的位置和排列方式
弹性布局 任何一个容器都可以指定flex布局
当父盒子设为flex布局以后 子元素的float clear和vertical-align属性将失效
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
一. 兼容性
各个浏览器的支持情况
处理兼容…
.box{
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
}
.flex1 {
-webkit-flex: 1; /* Chrome */
-ms-flex: 1 /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
}
二. 父项常见属性
flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素排列方式(单行)
flex-flow:复合属性 相当于同时设置了 flex-direction 和 flex-wrap
设置主轴的方向(主轴和侧轴:默认行和列 x轴和y轴)
flex-direction:row; /* 默认主轴是x 这个一般不写 */
flex-direction:row-reverse; /* 翻转 从右至左 */
flex-direction:column; /* 设置主轴为y 从上到下 */
flex-direction:column-reverse; /* 从下到上 */
设置主轴上的子元素排列方式
justify-content:flex-start; /* 默认 从头部开始 */
justify-content:flex-end; /* 从尾部开始排列 */
justify-content:center; /* 在主轴居中对齐 */
justify-content:space-around; /* 平分剩余空间 */
justify-content:space-between; /* 两边贴边 再分配剩余空间 */
设置子元素是否换行(flex布局中默认子元素是不换行的 如果不够 会缩小子元素的宽度)
flex-wrap:nowrap; /* 默认 不换行 */
flex-wrap:wrap; /* 换行 */
设置侧轴上的子元素的排列方式(多行 单行是没有效果的)
align-content:flex-start; /* 默认值 从侧轴头部开始排列 */
align-content:flex-end; /* 从侧轴尾部开始排列 */
align-content:center; /* 在侧轴中间显示 */
align-content:space-around; /* 子项在侧轴平分剩余空间 */
align-content:space-between; /* 子项在侧轴先分布在两头 再平分剩余空间 */
align-content:stretch; /* 设置子项元素高度平分父元素高度 */
设置侧轴上的子元素排列方式(单行)
align-items:flex-start; /* 默认值 从上到下 */
align-items:flex-end; /* 从下到上 */
align-items:center; /* 挤在一起居中(垂直居中) */
align-items:stretch; /* 拉伸 */
复合属性(相当于同时设置了 flex-direction 和 flex-wrap)
flex-flow:column wrap; /* 设置主轴为y 并且换行 */
重点 搞清楚主轴是哪个
三. 子项常见属性
flex 子项占的份数 定义子项分配剩余空间
align-self 控制子项自己在侧轴的排列方式
order 属性定义子项的排列顺序(前后顺序)
子项占的份数
flex:number; /* number填数字 默认是0 */
控制子项自己在侧轴的排列方式
align-self:flex-end;
属性定义子项的排列顺序(前后顺序)
order:-1; /* 默认是 0 数值越小 越靠前 */
