CSS3好用的flex布局

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

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

快速搭建Flex布局

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

div{display: flex;}

行级元素也可以:

span{display: flex;}

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

div{display: flex; display:-webkit-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容器所有属性

flex-direction:决定主轴方向,就是项目排列方向
flex-warp:决定项目是否换行,默认不换
flex-flow:是flex-direction和flex-warp的简写 justify-content:决定项目在主轴上的对齐方式 align-items:决定项目在交叉轴上的对齐方式 align-content:决定多根轴线的对齐方式

2、Flex项目所有属性

order:决定项目的排列顺序,数值越小,越靠前,默认是0
flex-grow:决定项目的放大比例,默认是0
flex-shrink:决定项目的缩小比例,默认是1
flex-basis:决定项目所占据的主轴空间,默认是auto
flex:是flex-grow/lex-shrink和flex-basis的简写,默认是0 1 auto,后两个属性可选 
align-self:决定单个项目和其他项目不一样的对齐方式,可覆盖align-items属性,默认是auto
猿梦

发表评论

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