当前位置： 首页 > news >正文

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

news 2025/10/26 16:48:14

想必大家在开发中经常会用到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>

相关文章：

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

想必大家在开发中经常会用到flex布局。而且还会经常用到 justify-content 属性实现分栏等等 接下来给大家分别讲一下 justify-content 的属性值。 以下是我敲的效果图大家可以清晰看出区别 space-between 属性值可以就是说两端对齐 space-evenly 属性值是每个盒子之间的…...

编程日记 2024/1/12 19:54:06

2023年Gartner® DevOps平台魔力象限发布，Atlassian被评为“领导者”

Atlassian在2023年Gartner魔力象限的DevOps平台评选中&#xff0c;被评为领导者。 Gartner根据执行能力和愿景的完整性&#xff0c;对全球14家DevOps平台提供商进行了评估&#xff0c;并发布2023年Gartner魔力象限。其中&#xff0c;Atlassian被评为领导者。 Atlassian提供了一…...

编程日记 2024/1/12 19:53:05

kylin集群使用nginx反向代理

前文已经提到&#xff0c;我安装了kylin集群。 kylin3集群问题和思考&#xff08;单机转集群&#xff09;-CSDN博客文章浏览阅读151次&#xff0c;点赞3次&#xff0c;收藏6次。由于是同一个集群的&#xff0c;元数据没有变化&#xff0c;所以&#xff0c;直接将原本的kylin使用…...

编程日记 2024/1/12 19:51:03

小红书搜索团队提出全新框架：验证负样本对大模型蒸馏的价值

大语言模型&#xff08;LLMs&#xff09;在各种推理任务上表现优异&#xff0c;但其黑盒属性和庞大参数量阻碍了它在实践中的广泛应用。特别是在处理复杂的数学问题时&#xff0c;LLMs 有时会产生错误的推理链。传统研究方法仅从正样本中迁移知识&#xff0c;而忽略了那些带有错…...

编程日记 2024/1/12 19:50:02

汽车销售领域相关专业术语

引言 本文是笔者在从事汽车销售领域信息化建设过程，积累的一些专业术语注解，供诸位参考交流。 专业术语清单 4S店   汽车销售服务4S店；是由经销商投资建设，按照汽车生产厂家规定的标准建造，是一种集整车销售（Sale）、零配件（Sparepart）、售后服务（Service）、信息…...

编程日记 2024/1/12 19:48:01

代币合约 ERC20 Token接口

代币合约 在以太坊上发布代币就要遵守以太坊的规则&#xff0c;那么以太坊有什么规则呢?以太坊的精髓就是利用代码规定如何运作&#xff0c;由于在以太坊上发布智能合约是不能修改和删除的&#xff0c;所以智能合约一旦发布&#xff0c;就意味着永久有效&#xff0c;不可篡改…...

编程日记 2024/1/12 19:43:56

判断回文字符串—C语言

题目要求 输入一个字符串&#xff0c;判断该字符串是否为回文。回文就是字符串中心对称&#xff0c;从左向右读和从右向左读的内容是一样的。 输入格式&#xff1a; 输入在一行中给出一个不超过80个字符长度的、以回车结束的非空字符串。 输出格式&#xff1a; 输出在第1行中…...

编程日记 2024/1/12 19:42:55

如何在Docker本地搭建流程图绘制神器draw.io并实现公网远程访问

推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站 前言 提到流程图&#xff0c;大家第一时间可能会想到Visio&#xff0c;不可否认&#xff0c;VIsio确实是功能强大&#xff0c;但是软…...

编程日记 2024/1/12 19:39:53

Web前端篇——el-timeline+el-scrollbar时间轴数据刷新后自动显示滚动条

背景&#xff1a;使用el-timelineel-scrollbar显示时间轴&#xff0c;当时间轴数据刷新时&#xff0c;el-scrollbar滚动条会自动隐藏。 当给el-scrollbar设置了永久显示滚动条&#xff08;如下代码&#xff09;&#xff0c;以为可以一劳永逸&#xff0c;发现问题仍然存在。 .…...

编程日记 2024/1/12 19:38:52

Flutter 监听前台和后台切换的状态

一 前后台的切换状态监听 混入 WidgetsBindingObserver 这个类&#xff0c;这里提供提供了程序状态的一些监听 二 添加监听和销毁监听 overridevoid initState() {super.initState();//2.页面初始化的时候&#xff0c;添加一个状态的监听者WidgetsBinding.instance.addObserver…...

编程日记 2024/1/12 19:35:49

图解Kubernetes的服务（Service）

pod 准备&#xff1a; 不要直接使用和管理Pods&#xff1a; 当使用ReplicaSet水平扩展scale时&#xff0c;Pods可能被terminated当使用Deployment时&#xff0c;去更新Docker Image Version&#xff0c;旧Pods会被terminated&#xff0c;然后创建新Pods 0 啥是服务&#xf…...

编程日记 2024/1/12 19:31:46

facebook广告素材制作要注意哪些

在制作Facebook广告素材时&#xff0c;需要注意以下几点&#xff1a; 目标受众&#xff1a;了解目标受众的喜好、需求和兴趣&#xff0c;以便制作能够吸引他们的广告素材。广告格式&#xff1a;选择适合广告内容的格式&#xff0c;如图片、视频、幻灯片等。同时&#xff0c;要…...

编程日记 2024/1/12 19:27:42

Android 应用流量监控实践

背景 得物Apm系统本身包含网络接口性能监控的能力&#xff0c;但接口监控主要关注的是接口的耗时、异常率等信息&#xff0c;没有流量消耗相关维度的统计信息&#xff0c;并且一部分流量消耗可能来自于音视频等其他特殊场景&#xff0c;在接口监控的盲区外。 为了了解用户目前…...

编程日记 2024/1/12 19:25:40

并发前置知识一：线程基础

一、通用的线程生命周期&#xff1a;“五态模型” 二、java线程有哪几种状态&#xff1f; New&#xff1a;创建完线程Runable&#xff1a;start(),这里的Runnable包含操作的系统的Running&#xff08;运行状态&#xff09;和Ready&#xff08;上面的可运行状态&#xff09;Blo…...

编程日记 2024/1/12 19:24:38

计算机网络 物理层

文章目录 物理层物理层的基本概念数据通信的基础知识数据通信系统的模型有关信道的几个基本概念信道的极限容量 物理层下面的传输媒体导引型传输媒体非引导型传输媒体 信道复用技术波分复用码的复用 宽带接入技术ADSL 技术光纤同轴混合网 (HFC 网&#xff09;FTTx 技术 物理层 …...

编程日记 2024/1/12 19:23:37

浅谈轻量级Kubernetes—K3s

1.什么是K3s K3s 被设计为小于 40MB 的单个二进制文件&#xff0c;完全实现了 Kubernetes API。为了实现这一目标&#xff0c;他们删除了许多不需要成为核心一部分的额外驱动程序&#xff0c;并且很容易被附加组件替换。 K3s 是完全 CNCF&#xff08;云原生计算基金会&…...

编程日记 2024/1/12 19:22:37

Web APIs知识点讲解

学习目标: 能获取DOM元素并修改元素属性具备利用定时器间歇函数制作焦点图切换的能力 一.Web API 基本认知 1.作用和分类 作用: 就是使用 JS 去操作 html 和浏览器分类&#xff1a;DOM (文档对象模型)、BOM&#xff08;浏览器对象模型&#xff09; 2.DOM DOM(Document Ob…...

编程日记 2024/1/12 19:21:36

Python商业数据挖掘实战——爬取网页并将其转为Markdown

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 ChatGPT体验地址 文章目录 前言前言正则表达式进行转换送书活动 前言 在信息爆炸的时代&#xff0c;互联网上的海量文字信息如同无尽的沙滩。然而&#xff0c;其中真正有价值的信息往往埋…...

编程日记 2024/1/12 19:20:35

初识 Elasticsearch 应用知识，一文读懂 Elasticsearch 知识文集(1)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…...

编程日记 2024/1/12 19:18:34

StampedLock详解

在现代的Java应用中&#xff0c;同步是一个核心问题&#xff0c;尤其是在高并发环境下。Java提供了多种同步机制&#xff0c;从基本的synchronized关键字到更高级的ReentrantLock。但在Java 8中&#xff0c;引入了一个新的同步原语——StampedLock&#xff0c;它旨在提供更高的…...

编程日记 2024/1/12 19:14:29

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/10/17 12:01:41

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2025/10/21 10:23:30

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2025/10/26 7:38:50

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/10/24 12:48:28

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2025/10/26 1:27:31

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

编程新知 2025/10/24 17:30:16

CppCon 2015 学习:REFLECTION TECHNIQUES IN C++

关于 Reflection&#xff08;反射&#xff09; 这个概念&#xff0c;总结一下&#xff1a; Reflection&#xff08;反射&#xff09;是什么&#xff1f; 反射是对类型的自我检查能力&#xff08;Introspection&#xff09; 可以查看类的成员变量、成员函数等信息。反射允许枚…...

编程新知 2025/10/23 18:25:55

Python爬虫（四）：PyQuery 框架

PyQuery 框架详解与对比 BeautifulSoup 第一部分&#xff1a;PyQuery 框架介绍 1. PyQuery 是什么&#xff1f; PyQuery 是一个 Python 的 HTML/XML 解析库&#xff0c;它采用了 jQuery 的语法风格&#xff0c;让开发者能够用类似前端 jQuery 的方式处理文档解析。它的核心特…...

编程新知 2025/8/28 1:50:49

VUE3 ref 和 useTemplateRef

使用ref来绑定和获取 页面 <headerNav ref"headerNavRef"></headerNav><div click"showRef" ref"buttonRef">refbutton</div>使用ref方法const后面的命名需要跟页面的ref值一样 const buttonRef ref(buttonRef) cons…...

编程新知 2025/10/6 3:55:06

Gitlab + Jenkins 实现 CICD

CICD 是持续集成&#xff08;Continuous Integration, CI&#xff09;和持续交付/部署&#xff08;Continuous Delivery/Deployment, CD&#xff09;的缩写&#xff0c;是现代软件开发中的一种自动化流程实践。下面介绍 Web 项目如何在代码提交到 Gitlab 后&#xff0c;自动发布…...

编程新知 2025/10/24 12:37:54