css FlexBox 弹性盒子常用方法总结

总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ 比较现在iPhone5的人也比较多,小米1可能也有,所以做个小小的兼容性,会更加提现用户体验哦

移动端meta标签:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

1、作兼容性转化为弹性盒子:

     display:-webkit-box;
display: -moz-box;
display: -ms-box;
display: -o-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;

2、子元素分配:

-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
-o-flex: 1;
flex: 1;

css FlexBox 弹性盒子常用方法总结

3、以竖排版demo:

-webkit-box-direction:column;
-moz-box-direction:column;
box-direction:column;
flex-direction:column;
-webkit-flex-direction:column;

css FlexBox 弹性盒子常用方法总结

4、正常显示:

-webkit-box-direction:row;
-moz-box-direction:row;
box-direction:row;
flex-direction:row;
-webkit-flex-direction:row;

css FlexBox 弹性盒子常用方法总结

5、倒叙右对齐:

-webkit-box-direction:row-reverse;
-moz-box-direction:row-reverse;
box-direction:row-reverse;
flex-direction:row-reverse;

css FlexBox 弹性盒子常用方法总结

6、倒叙竖排列:

-webkit-flex-direction:row-reverse;
-webkit-box-direction:column-reverse;
-moz-box-direction:column-reverse;
box-direction:column-reverse;
flex-direction:column-reverse;
-webkit-flex-direction:column-reverse;

css FlexBox 弹性盒子常用方法总结

7、justify-content 用来控制元素在主轴上的对齐方式 (X轴)也是在父元素里面添加

#container {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
有五个值:
justify-content: flex-start;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: flex-end; 当然设置这个的前提,div的宽高肯定是直接设置值,但值可以是百分比,也可以是数值

css FlexBox 弹性盒子常用方法总结

css FlexBox 弹性盒子常用方法总结

css FlexBox 弹性盒子常用方法总结

css FlexBox 弹性盒子常用方法总结

css FlexBox 弹性盒子常用方法总结

8、align-items是负责交叉轴工作的(y轴)

也是在父元素里面添加

#container {
display: flex;
flex-direction: row;
align-items: flex-start;
}
align-items 有5个可选值:
flex-start
flex-end
center
stretch
baseline

css FlexBox 弹性盒子常用方法总结

css FlexBox 弹性盒子常用方法总结

css FlexBox 弹性盒子常用方法总结

css FlexBox 弹性盒子常用方法总结

css FlexBox 弹性盒子常用方法总结

css FlexBox 弹性盒子常用方法总结

css FlexBox 弹性盒子常用方法总结

9、align-self 可以手动设置一个元素的对齐方式

它会针对一个 div 覆盖掉 align-items 属性,因为容器内元素属性都为 auto, 所以每个 div 都会使用父容器的 align-items 属性值
#container {
align-items: flex-start;
}
.square#one {
align-self: center;
}
/* 只有 #one 这个 div 会居中 */
align-self: 有5个可选值:
flex-start
flex-end
center
stretch
baseline
这个主要针对需要的div进行设置,原理和align-self一样的,基线也是一样

css FlexBox 弹性盒子常用方法总结

上一篇:adb.exe 已停止工作解决办法


下一篇:adb.exe 已停止工作 解决