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

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

news 2025/7/7 14:27:09

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

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/6/15 20:37:19

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/7/5 1:06:55

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/7/4 21:35:34

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/6/17 15:52:48

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/6/27 14:22:50

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/7/1 5:03:52

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/7/6 18:31:17

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/6/17 3:05:21

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/7/6 1:26:33

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2025/7/6 0:01:34