Flex弹性布局及处理兼容
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布局对齐方式
重点搞清楚主轴是哪个
三. ⼦项常见属性
flex ⼦项占的份数 定义⼦项分配剩余空间
align-self 控制⼦项⾃⼰在侧轴的排列⽅式
order 属性定义⼦项的排列顺序(前后顺序)
⼦项占的份数
flex:number;/* number填数字默认是0 */
控制⼦项⾃⼰在侧轴的排列⽅式
align-self:flex-end;
属性定义⼦项的排列顺序(前后顺序) order:-1;/* 默认是 0 数值越⼩越靠前 */

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。