flex布局方式的详细阐述(工作中用到特意总结一下)

由于前段工作经常要做一些样式的书写,所以对于这个属性也是经常要使用到的。接下来我就给大家介绍一下这个属性的使用:

flex属性的使用,需要两个部分,容器和容器内的子元素,如下面的例子:


上述代码中box为父元素,子元素就是内部的item元素。

.box{
  display: flex;
}

可以设置我们的父元素为弹性布局的样式,在父元素的属性上我们可以设置如下六个属性:

flex-direction:属性决定主轴的方向(即项目的排列方向)row水平方向 column垂直方向;
flex-wrap:控制是否换行 wrap换行 nowrap不换行;
flex-flow:上述两个属性的集合;
justify-content:定义了项目在主轴上的对齐方式;
align-items:定义项目在交叉轴上如何对齐;
align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用;

对于上述的几个属性,最常用的就是上述两个属性的设置。flex-direction控制方向:


对于flex-wrap的属性的设置:


对于另外几个属性的设置,大家可以百度一下css3.0的属性。不过我用的并不是很多。上面介绍的是对于父容器的设置,对于item子项,也有几个属性,针对他们:

order:定义项目的排列顺序。数值越小,排列越靠前,默认为0;
flex-grow:定义项目的放大比例,默认为0;
flex-shrink:定义了项目的缩小比例,默认为1;
flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size);
flex:属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto;
align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto;

对于子项的设定,实际情况我用的并不是很多,最多的也就是flex:1,让其平均布局。不过flex弹性布局的方式确实给我们做这种垂直居中或者平分的情况,提供了很好的方式。可能我写的太多简单和粗浅,想了解更详细的,可以查看

点击打开链接 阮一峰写的关于这方面的帖子,写的很详细,也通俗易懂。工作中的一点记录,与大家共勉.......

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值