弹性布局的justify-content属性

现在我来谈谈我对弹性布局中的justify-content的了解,justify-content是弹性布局的属性,写它之前一定要写上display:flex,这是弹性布局的写法而且要写在同一个类中,下面是我自己写的一个很简单的布局,现在让我们来看看它的HTML的代码:在这里插入图片描述

图中是我用三个同级的div来写的大的div里面包裹这几个小的div,当然小的div也不一定是要div用标签来代替也可以,这是个人喜欢那么接下来让我们来看看css部分的代码:

在这里插入图片描述
在这里插入图片描述

上面的那些就是css部分的代码用他们来布局页面比浮动好用很多,justify-content有5个元素他们分别是:center、flex-start、flex-end、space-around、space-between它们的作用都不一样列如:justify-content:space-between是他们的元素之间有间隔而且他们的间隔距离都是一样的就如下图:
在这里插入图片描述

而justify-content:space-around就是所有元素都被空格包裹起来与justify-content:space-between不同的是justify-content:space-between第一个元素与第二个元素是紧贴着边框的而justify-content:space-around的第一个元素和最后一个元素相当于给它们加上了边距而且所有的距离都一样;justify-content:center就是元素居中就如图下注意:第一行是justify-content:space-around第二行才是justify-content:center的。

在这里插入图片描述

最后就然我们看看用justify-content里面的space-between、space-around和center属性组合的模型:

在这里插入图片描述

当然这是我为了好了解才用一些简单的元素打出来的里面的元素你可以换成图片、文字或者标签等等,打出来的效果都是一样的。而且弹性布局justify-content属性可以根据你屏幕的大小来自动分配间隔距离。

  • 4
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值