css问题:display:flex布局+justify-content: space-between; 最后一行不能左对齐

news2024/12/25 9:34:45

解决方法1: display: flex;+margin: 10px var(--leftRight);

 --leftRight: 动态计算一行减去item的宽度后剩下的间距 

解决方法2:网格布局 display: grid;grid-template-columns: repeat(5, 1fr);+margin: 10px auto; 

完整代码:

<template>

  <div class="flex">

    <h1>问题:flex布局+justify-content: space-between; 最后一行不能左对齐</h1>

    <div class="box">

      <div class="box_item" v-for="(v, i) in list" :key="i"></div>

    </div>

    <h1>方法1:display: flex;+margin: 10px var(--leftRight);</h1>

    <div class="box1">

      <div class="box1_item" v-for="(v, i) in list" :key="i"></div>

    </div>

    <h1>方法2:网格布局 display: grid;grid-template-columns: repeat(5, 1fr);+margin: 10px auto;</h1>

    <div class="box2">

      <div class="box2_item" v-for="(v, i) in list" :key="i"></div>

    </div>

  </div>

</template>

<script>

export default {

  data () {

    return {

      list: 12

    }

  },

  mounted () { },

  methods: {},

}

</script>

<style lang="scss" scoped>

.flex {

  width: 100%;

  height: calc(100vh - 90px);

  padding: 5px;

  h1 {

    padding-left: 10px;

  }

  .box {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    width: 100%;

    padding-top: 20px;

    .box_item {

      width: 50px;

      height: 50px;

      background-color: blue;

      border: solid 1px #000;

      box-sizing: border-box;

      --n: 5;

      /* 一行几个 */

      --space: calc(100% - var(--n) * 50px);

      /* 一行减去item的宽度后剩下的间距 */

      --leftRight: calc(var(--space) / var(--n) / 2);

      /* 每个item左右的间距 */

      margin: 10px var(--leftRight);

    }

  }

  .box1 {

    display: flex;

    flex-wrap: wrap;

    width: 100%;

    padding-top: 20px;

    .box1_item {

      width: 50px;

      height: 50px;

      background-color: blue;

      border: solid 1px #000;

      box-sizing: border-box;

      --n: 5;

      /* 一行几个 */

      --space: calc(100% - var(--n) * 50px);

      /* 一行减去item的宽度后剩下的间距 */

      --leftRight: calc(var(--space) / var(--n) / 2);

      /* 每个item左右的间距 */

      margin: 10px var(--leftRight);

    }

  }

  .box2 {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    width: 100%;

    padding-top: 20px;

    .box2_item {

      width: 50px;

      height: 50px;

      background-color: blue;

      border: solid 1px #000;

      box-sizing: border-box;

      margin: 10px auto;

    }

  }

}</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2108601.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++ 继承学习笔记

1.继承概念 继承 (inheritance) 机制是面向对象程序设计 使代码可以复用 的最重要的手段&#xff0c;它允许程序员在 保 持原有类特性的基础上进行扩展 &#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称派生类。继承 呈现了面向对象 程序设计的层次结构 &#xf…

奥威让您更懂现金流情况

企业现金流一旦出了问题都是大问题&#xff0c;会直接影响到企业的日常运作&#xff0c;甚至直接关系到企业能不能继续存活&#xff0c;因此现金流量表是企业财务分析中重要报表之一&#xff0c;也是企业监控财务监控情况的重要手段之一。那么这么重要的一份现金流量表该怎么做…

科研绘图系列:R语言折线图(linechart plots)

文章目录 介绍加载R包导入数据数据预处理画图组合图形介绍 在R语言中,折线图(Line Plot)是一种常用的数据可视化类型,用于展示数据随时间或有序类别变化的趋势。折线图通过连接数据点来形成一条或多条线,这些线条可以清晰地表示数据的变化方向、速度和模式。 加载R包 k…

基于Spring Boot的宠物领养系统的设计与实现

基于Spring Boot的宠物领养系统的设计与实现 springboot138宠物领养系统的设计与实现 摘 要 如今社会上各行各业&#xff0c;都在用属于自己专用的软件来进行工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。互联网的发展&#xff0c;离不开一…

第 1 章:原生 AJAX

原生AJAX 1. AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML&#xff0c;就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求&#xff0c;最大的优势&#xff1a;无刷新获取数据。AJAX 不是新的编程语言&#xff0c;而是一种将现有的标准组合在一…

JavaWeb案例

环境搭建 先创建好数据库&#xff0c;建表并插入数据 create database talis; use talis;-- 部门管理 create table dept(id int unsigned primary key auto_increment comment 主键ID,name varchar(10) not null unique comment 部门名称,create_time datetime not null com…

Springboot整合【Kafka】

1.添加依赖 在pom.xml文件中添加以下依赖&#xff1a; <!-- 进行统一的版本管理--><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.3.3</version>&l…

【全网最全】2024年数学建模国赛A题30页完整建模文档+成品论文+代码+可视化图表等(后续会更新)

您的点赞收藏是我继续更新的最大动力&#xff01; 一定要点击如下的卡片&#xff0c;那是获取资料的入口&#xff01; 2024年高教社杯数学建模国赛A题“板凳龙”闹元宵&#xff1a;建立舞龙队的运动轨迹和速度的空间几何、运动学和优化模型 本文文章较长&#xff0c;建议先看…

ardupilot开发 --- MQTT 篇

原图&#xff1a;ardupilot-onboardComputer-4Glink-console.drawio 白嫖党请点赞、收藏、关注 你说在一起要算命 前言参考文献 前言 为什么在ardupilot开发过程中要用到MQTT &#xff1f; 客户要求向他们的指挥中心平台推送视频流和飞控数据&#xff0c;即要将图数传数据推送给…

代码随想录:96. 不同的二叉搜索树

96. 不同的二叉搜索树 class Solution { public:int numTrees(int n) {int dp[30]{0};//由i个结点组成的二叉搜索树有多少种dp[0]1; for(int i1;i<n;i)for(int j0;j<i;j)//j表示根节点左子树有j个结点dp[i]dp[j]*dp[i-j-1];//对根节点左右子树结点数量遍历//数量有左子树…

【计算机网络】TCP连接如何确保传输的可靠性

一、确保可靠传输的机制 TCP&#xff08;传输控制协议&#xff09;是一种面向连接的、提供可靠交付的、面向字节流的、支持全双工的传输层通信协议 1、序列号 seq TCP头部中的序号&#xff0c;占32位&#xff08;4字节&#xff09;&#xff1b; 发送方给报文段分配一个序列号&a…

CSS中 特殊类型的选择器 伪元素如何使用

一、什么是伪元素 在 CSS 中&#xff0c;伪元素是一种特殊类型的选择器&#xff0c;它允许你为元素的特定部分添加样式&#xff0c;而这些部分在 HTML 文档中并不实际存在。伪元素通常用于创建装饰性效果&#xff0c;如添加边框、背景、阴影等&#xff0c;而不需要额外的 HTML…

PHPJWT的使用

今天得空整理整理JWT的代码 首先&#xff0c;我们得知道什么是JWT&#xff1f; JWT&#xff08;JSON Web Token&#xff09;是一种开放标准&#xff08;RFC7519&#xff09;&#xff0c;用于在网络应用环境中安全地传输声明信息。它是一种紧凑的、URL安全的令牌格式&#xff0…

(一)使用Visual Studio创建ASP.NET Core WebAPI项目

1.创建webAPI项目 选择ASP.NET Core Web API项目模版&#xff08;基于.Core框架可以支持多种系统环境&#xff0c;所以我们选择.Core框架&#xff09;&#xff0c;点下一步。 2.项目名称 项目名称设置为&#xff1a;CoreWebAPI&#xff0c;点下一步 3.选择框架 选择.NET6.0框…

分类预测|基于黑翅鸢优化轻量级梯度提升机算法数据预测Matlab程序BKA-LightGBM多特征输入多类别输出 含对比

分类预测|基于黑翅鸢优化轻量级梯度提升机算法数据预测Matlab程序BKA-LightGBM多特征输入多类别输出 含对比 文章目录 一、基本原理BKA&#xff08;Black Kite Algorithm&#xff09;的原理LightGBM分类预测模型的原理BKA与LightGBM的模型流程总结 二、实验结果三、核心代码四、…

IP学习——twoday

双层Vlan标签 路由器常用命令&#xff1a; 查看当前端口&#xff0c;路由等的信息和配置&#xff1a;display this 查看当前路由器的所有信息&#xff1a; display current-configuration 查看当前路由器的指定信息&#xff1a; display current-configuration | include ip a…

HTML第一课 语法规范与常用标签

目录 ◆ HTML 语法规范 ◆ HTML 常用标签 4.2 标题标签 4.3 段落和换行标签 4.4文本格式化标签 4.5<div>和<span>标签 4.6图像标签和路径 4.7超链接标签 1.外部链接 2.内部链接 3.空链接 4.下载链接 5.锚点链接 ◆ HTML 中的注释和特殊字符​编辑 ◆ HTML 语…

Redis中String类型的基本命令

文章目录 一、String字符串简介二、常见命令setgetmgetmsetsetnxincrincrbydecrdecrbyincrbyfloatappendgetrangesetrangestrlen 三、命令小结四、字符串内部编码五、String典型使用场景1. 缓存(Cache)功能2. 计数功能3. 共享会话&#xff08;Session&#xff09;4. 手机验证码…

软件测试学习笔记丨Pytest+Allure测试计算器

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/31954 项目要求 3.1 项目简介 计算器是近代人发明的可以进行数字运算的机器。 计算器通过对加法、减法、乘法、除法等功能的运算&#xff0c;将正确的结果展示在屏幕上。 可帮助人们更方便的…

FLTRNN:基于大型语言模型的机器人复杂长时任务规划

目录 一、引言二、FLTRNN框架2.1 任务分解2.2 基于语言的递归神经网络&#xff08;Language-Based RNNs&#xff09;长期记忆&#xff08;Long-Term Memory, Ct&#xff09;&#xff1a;短期记忆&#xff08;Short-Term Memory, Ht&#xff09;&#xff1a; 2.3 增强推理能力的…