css3 flex

一,前言

布局的传统解决方案,基于[盒状模型],依赖 [display]属性 + [position]属性 + [float]属性。
1,盒子模型(box-sizing)
box-sizing: content-box;//定盒子模型为W3C(标准盒模型),padding,border,盒子会变大。
box-sizing: border-box;// IE盒子模型(怪异盒模型),盒子不会变大。
box-sizing: inherit;// 规定应从父元素继承 box-sizing 属性的值。

 2,calc(公式)
● 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
● 任何长度值都可以使用calc()函数进行计算;
● calc()函数支持 "+", "-", "\*", "/" 运算;
● calc()函数使用标准的数学运算优先级规则
https://caniuse.com查询css属性兼容性
3,transform
transform:translate(-50%,-50%)

二,flex 弹性布局

1,父级容器属性
.father-box{
   display: -webkit-flex;//Webkit内核的浏览器加上-webkit前缀
   display: flex;// inline-flex;
   flex-direction:row | row-reverse | column | column-reverse;
   flex-wrap: nowrap | wrap | wrap-reverse;
   flex-flow: <flex-direction> <flex-wrap>;
   justify-content: flex-start | flex-end | center | space-between | space-around;
   align-items: flex-start | flex-end | center | baseline | stretch;
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;

}

注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

2,项目的属性
以下6个属性设置在项目上。

> *   order
> *   flex-grow
> *   flex-shrink
> *   flex-basis
> *   flex
> *   align-self

发表评论

电子邮件地址不会被公开。 必填项已用*标注