Flex最后一行左对齐

news2024/12/23 13:12:07
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex最后一行左对齐</title>
    <style>
      body {
        height: 1000px;
      }
      .container {
        float: left;
        border: 1px solid #000;
        display: flex;
        width: 290px;
        flex-wrap: wrap;
        justify-content: space-between;
        resize: both;
      }
      .list {
        width: 65px;
        height: 65px;
        margin-bottom: 10px;
        background-color: rgb(148, 148, 131);
        margin-right: 10px;
      }
      .list:nth-child(4n) {
        margin-right: 0px;
      }
      .container::after {
        content: '';
        display: block;
        flex: 1 1 auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
    </div>
    <div>
      切换子项目数量
      <select id="select">
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
      </selction>
    </div>
    <script>
      let container = document.querySelector('.container');
      let box = document.querySelector('#select')

      box.onchange = (e) => {
        let len = e.target.value;
        let html = Array.from({length: len}, () => `<div class="list"></div>`).reduce((pre, item) => {
          return pre += item;
        }, '');
        container.innerHTML = html;
      }
    </script>
  </body>
</html>

在这里插入图片描述

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

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

相关文章

HDFS磁盘写满问题分析

HDFS磁盘写满问题分析 1. 问题说明1.1 namenode常规分配datanode策略1.2 DFS Used很大时是否能够继续写入数据 2 问题修复2.1 集群均衡操作2.2 配置系统预留参数 3. 疑问和思考3.1. 是否需要配置dfs.datanode.du.reserved&#xff1f; 4. 参考文档 探讨hdfs的datanode节点磁盘被…

【vue项目中点击下载】弹窗提示:离开此网站?系统可能不会保存您所做的更改,改为直接下载,不提示此弹窗内容,已解决

项目中用的是window.location.href实现下载 在Web浏览器中&#xff0c;当尝试通过window.location.href重定向到一个文件下载URL时&#xff0c;浏览器通常会显示一个确认对话框&#xff0c;询问用户是否要离开当前页面&#xff0c;因为下载的文件通常是在新窗口或新标签页中打…

【C语言】空心正方形图案

思路&#xff1a; 1&#xff0c;两行两列打印* &#xff1a;第一行和最后一行&#xff0c;第一列和最后一列。 2&#xff0c;其他地方打印空格。 代码如下&#xff1a; #include<stdio.h> int main() { int n 0; int i 0; int j 0; while (scanf("…

avue-crud顶部操作按钮插槽;avue-crud列数据插槽;avue-crud行操作按钮插槽

1.avue-crud顶部操作按钮插槽&#xff1b; <template slot"menuLeft" slot-scope"{ size }"><div class"left"><div class"btn"><el-button type"primary" size"small" click"onBatchR…

彻底学会系列:一、机器学习之梯度下降(1)

1 梯度下降概念 1.1 概念 梯度下降是一种优化算法&#xff0c;用于最小化一个函数的值&#xff0c;特别是用于训练机器学习模型中的参数&#xff0c;其基本思想是通过不断迭代调整参数的值&#xff0c;使得函数值沿着梯度的反方向逐渐减小&#xff0c;直至达到局部或全局最小…

【Linux】一文解决如何在终端查看 python解释器 的位置

【Linux】一文解决如何在终端查看 python解释器 的位置 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望得到您的订阅…

【Liunx-后端开发软件安装】Liunx安装nginx

【Liunx-后端开发软件安装】Liunx安装nginx 使用安装包安装 一、简介 nginx&#xff0c;这个家伙可不是你厨房里的那位大厨&#xff0c;它可是互联网世界的“煎饼果子摊主”。想象一下&#xff0c;在熙熙攘攘的网络大街上&#xff0c;nginx挥舞着它的锅铲——哦不&#xff0c;是…

KVM安装-kvm彻底卸载-docker安装Webvirtmgr

KVM安装和使用 一、安装 检测硬件是否支持KVM需要硬件的支持,使用命令查看硬件是否支持KVM。如果结果中有vmx(Intel)或svm(AMD)字样,就说明CPU的支持的 egrep ‘(vmx|svm)’ /proc/cpuinfo关闭selinux将 /etc/sysconfig/selinux 中的 SELinux=enforcing 修改为 SELinux=d…

python知识点总结(三)

python知识点总结三 1、有一个文件file.txt大小约为10G&#xff0c;但是内存只有4G&#xff0c;如果在只修改get_lines 函数而其他代码保持不变的情况下&#xff0c;应该如何实现? 需要考虑的问题都有那些?2、交换2个变量的值3、回调函数4、Python-遍历列表时删除元素的正确做…

编曲学习:如何编写钢琴织体 Cubase12逻辑预置 需要弄明白的问题

钢琴织体是指演奏形式、方式,同一个和弦进行可以用很多种不同的演奏方法。常用织体有分解和弦,柱式和弦,琶音织体,混合织体。 在编写钢琴织体前,先定好歌曲的调。 Cubase小技巧:把钢琴轨道向上拖动打和弦轨道,就可以显示和弦!如果你有一些参考工程,不知道用了哪些和…

jenkins Pipeline接入mysql

背景&#xff1a; jenkin pipeline进化过程如下&#xff1a; Jenkins Pipeline 脚本优化实践&#xff1a;从繁琐到简洁 >>>>> Jenkins Pipeline脚本优化&#xff1a;为Kubernetes应用部署增加状态检测>>>>>> 使用Jenkins和单个模板部署多个K…

Vue+SpringBoot打造康复中心管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员模块 三、系统展示四、核心代码4.1 查询康复护理4.2 新增康复训练4.3 查询房间4.4 查询来访4.5 新增用药 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的康复中…

电子科技大学链时代工作室招新题C语言部分---题号D

1. 题目 这道题大概的意思就是对一个整形数组的元素进行排序&#xff0c;然后按新的顺序打印原本的下标&#xff1b; 例如&#xff0c;在题目给出的Note部分&#xff0c;{a1, a2, a3, a4, a5}进行排序之后变为了{a2, a1, a4, a3, a5}&#xff0c;于是输出2 1 4 3 5。 排序的规则…

【JavaScript编程实操07】1.查找一个字符串中是否具有某个字符 2.完成数组去重

前言 1、查找一个字符串中是否具有某个字符 代码&#xff1a; 实现效果&#xff1a; 2、完成数组去重 第一种方法 代码&#xff1a; 实现效果&#xff1a; 第二种方法 代码&#xff1a; 实现效果&#xff1a; 总结 前言 本次主要是针对Javascript阶段的字符串和数组…

Python图像处理:3.七种图像分割方法

一、常见图像分割方法 (1)传统算法 阈值分割&#xff08;Thresholding&#xff09;&#xff1a;这是最简单也是应用最广泛的一种分割方法&#xff0c;通过选定一个阈值将图像转换为二值图像&#xff0c;从而分割出目标区域。这种方法适用于图像的前景和背景对比明显的情况。 …

链表中的倒数第k个结点 合并两个链表 分割链表 链表的回文结构

前言 &#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;推荐专栏: &#x1f354;&#x1f35f;&#x1f32f;C语言进阶 &#x1f511;个人信条: &#x1f335;知行合一 &#x1f349;本篇简介:>:分析力扣中有关链表的部分题目. 目录 前言一、链表中倒…

【冲击蓝桥篇】动态规划(下):你还在怕动态规划!?进来!答题模板+思路解析+真题实战

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《数据结构与算法&#xff1a;初学者入门指南》&#x1f4d8;&am…

Java项目:60 ssm基于JSP的乡镇自来水收费系统+jsp

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 系统可以提供信息显示和相应服务&#xff0c; 其管理员管理水表&#xff0c;审核用户更换水表的请求&#xff0c;管理用户水费&#xff0c;包括抄表以…

运动想象 (MI) 迁移学习系列 (9) : 数据对齐(EA)

运动想象迁移学习系列:数据对齐&#xff08;EA&#xff09; 0. 引言1. 迁移学习算法流程2. 欧式对齐算法流程3. 与RA算法进行对比4. 实验结果对比5. 总结欢迎来稿 论文地址&#xff1a;https://ieeexplore.ieee.org/abstract/document/8701679 论文题目&#xff1a;Transfer Le…

【Spring Cloud】Sentinel限流

控制台下载https://github.com/alibaba/Sentinel/releases # 控制台启动 java -Dserver.port10888 -Dcsp.sentinel.dashboard.serverlocalhost:10888 -Dproject.namesentinel-dashboard -jar sentinel-dashboard.jar引入依赖 <dependency><groupId>com.alibaba.c…