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

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

news 2026/2/10 15:34:30

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

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2026/1/29 2:11:35

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/24 15:08:45

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2026/1/29 16:36:27

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2026/1/31 6:12:33

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2026/2/4 17:31:44

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2026/1/20 20:10:03

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2026/1/23 11:53:19

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2026/2/9 17:06:25