css3之flex

Posted sunnyboysix

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3之flex相关的知识,希望对你有一定的参考价值。

写一个很拽的布局css3布局,flex减少了各种定位布局

css3之flex

可以采用%的方式实现一些布局

calc也可以实现居中布局


css3之flex

使用transform实现居中布局


也可以使用 margin : 0 auto实现盒子居中



css3之flex

css3之flex

css3之flex

flex主要在父级元素上的布局方式


实战:底部导航

一般平均分的布局基本上都是采用flex的布局,手机端这种布局也有采用rem的布局。

以上是关于css3之flex的主要内容,如果未能解决你的问题,请参考以下文章

CSS3之多列

CSS3之动画属性

css3案例之calc()的使用

CSS3之过渡

CSS3之变形

CSS3之渐变(Gradients)