flex弹性盒子常用的布局属性详解

发布时间：2024年01月08日

想必大家在开发中经常会用到flex布局。而且还会经常用到? ?justify-content? 属性实现分栏等等

接下来给大家分别讲一下??justify-content 的属性值。

以下是我敲的效果图大家可以清晰看出区别

space-between 属性值可以就是说两端对齐

space-evenly 属性值是每个盒子之间的间距相同

space-around 属性值是第一个盒子和最后一个盒子他们是相邻元素之间距离的一半。

如果大家还是不清楚可以建个html? ?把我的代码粘进去看看效果。

源码如下

<!DOCTYPE html>

<html lang="en">

<head>

? ? <meta charset="UTF-8">

? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">

? ? <title>Document</title>

</head>

<style>

? ? .boxs1 {

? ? ? ? display: flex;

? ? ? ? justify-content: space-between;

? ? ? ? margin-top: 20px;

? ? }

? ? .boxs2 {

? ? ? ? display: flex;

? ? ? ? justify-content: space-evenly;

? ? ? ? margin-top: 20px;

? ? }

? ? .boxs3 {

? ? ? ? display: flex;

? ? ? ? justify-content: space-around;

? ? ? ? margin-top: 20px;

? ? }

? ? .box {

? ? ? ? width: 200px;

? ? ? ? height: 200px;

? ? ? ? background-color: pink;

? ? ? ? margin-left: 20px;

? ? }

? ? .box1 {

? ? ? ? width: 200px;

? ? ? ? height: 200px;

? ? ? ? background-color: royalblue;

? ? ? ? margin-left: 20px;

? ? }

? ? .box2 {

? ? ? ? width: 200px;

? ? ? ? height: 200px;

? ? ? ? background-color: red;

? ? ? ? margin-left: 20px;

? ? }

? ? .box3 {

? ? ? ? width: 200px;

? ? ? ? height: 200px;

? ? ? ? background-color: blanchedalmond;

? ? ? ? margin-left: 20px;

? ? }

? ? .box4 {

? ? ? ? width: 200px;

? ? ? ? height: 200px;

? ? ? ? background-color: blue;

? ? ? ? margin-left: 20px;

? ? }

</style>

<body>

? ? <div class="boxs1">

? ? ? ? <div class="box"></div>

? ? ? ? <div class="box1"></div>

? ? ? ? <div class="box2"></div>

? ? ? ? <div class="box3"></div>

? ? ? ? <div class="box4"></div>

? ? </div>

? ? <div class="boxs2">

? ? ? ? <div class="box"></div>

? ? ? ? <div class="box1"></div>

? ? ? ? <div class="box2"></div>

? ? ? ? <div class="box3"></div>

? ? ? ? <div class="box4"></div>

? ? </div>

? ? <div class="boxs3">

? ? ? ? <div class="box"></div>

? ? ? ? <div class="box1"></div>

? ? ? ? <div class="box2"></div>

? ? ? ? <div class="box3"></div>

? ? ? ? <div class="box4"></div>

? ? </div>

</body>

</html>

文章来源:https://blog.csdn.net/2301_77742545/article/details/135460754
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章