您当前的位置:主页 > 新跑狗报 > 正文

CSS flex布局入门

2019-10-26 13:21  作者:admin 点击:次 

  排列的,块级元素会像下左图一样排列。但是项目中尤其是移动端项目会有很多需求的排版方式是要求由左到右排列。虽然可以通过dispaly:inline-block、float、position完成排版,但是需要对

  2009年W3C提出了一种新的方案--引入了弹性布局flex方式,通过容器的轴线来排列项目,简直是移动端开发的福音(虽然grid布局更牛x,后面会总结)。自己也用了挺久的,但是有些参数记忆很模糊,每次用都要去百度一下,干脆自己总结一下吧。

  上面是一个让项目水平垂直居中的两种写法,在现场引起了浓厚兴趣。六盒通心水论坛!可以看到写法简洁很多,而且直接写在容器上就行,不需要考虑具体的项目。

  那么,什么是flex尼?借用阮一峰老师的一张图来看一下flex的一些概念:

  1、flex container(容器):使用flex的元素就叫做容器,容器默认存在2条轴线,主轴线(main axis)和垂直的交叉轴线(cross axis)。轴线开始的位置被叫做main/cross start,结束的位置被叫做main/cross end。项目是沿着主轴线开始、结束方向排列的。

  1、flex-direction:设置容器主轴线、flex-wrap:设置是否换行,每换一行意味着会多一条主轴线、justify-content:设置主轴方向上的项目的对齐方式4、align-items:设置交叉轴方向上项目的对齐方式5、align-content:多轴线、flex-direction用来设置容器的主轴方向和主轴线个属性值,结果如下图。

  3、flex-shrink:定义了项目的缩小比例4、flex-basis:定义了在分配多余空间之前,项目占据的主轴空间5、align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性1、order定义项目的位置,默认值都为0,值越小越靠前。所以要想不改变其他项目的同时,我想加盟一个粥店好多公司都给我发来了详细资!往前面移动该项目,需要设置成负数。

更多相关内容