CSS3好用的flex布局

2018年2月8日21:52:06 发表评论 23

flex是CSS3新增的布局方案,可以完美的替代传统布局的解决方案,更加简单,并且可以响应式,我们传统的布局是基于盒状模型,依赖display属性、position属性和float属性,它们实在垂直居中就很不容易,但是使用felx就可以很轻松的完成,布局一直是css中一个非常重要的应用,在任何web网站上都是,所以大家有必要学习下flex,让flex成为我们布局的首选方案。

快速搭建Flex布局

Flexible Box是flex原名,意思是“弹性布局”,任何一个元素都可以设置Flex布局,像块级元素

行级元素也可以:

为了浏览器的兼容性,最好加上浏览器前缀

Flex基本概念

任何的元素只要设置了Flex属性,就是一个Flex容器(Flex container),而它下面的所有子元素自动变为容器成员,也可以叫做项目(Flex item)。
在下面的图片中有一个flex容器,flex容器默认是存在两根轴:水平主轴和垂直的交叉轴,主轴和交叉轴开始和结束的位置分别叫:main start/main end . cross start/cross end
项目所占据的主轴和交叉轴空间分别叫main sizecross size

CSS3好用的flex布局

Flex所有属性

1、Flex容器所有属性

2、Flex项目所有属性

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: