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

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

news 2025/12/15 11:34:11

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

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/12/9 23:28:12

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/12/12 21:14:39

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2025/12/14 12:14:29

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/10/12 11:54:26

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2025/12/13 11:58:06

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2025/10/2 12:07:03

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/11/3 0:44:41

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/12/9 19:30:18

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2025/12/9 22:25:21