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

css使用弹性盒,让每个子元素平均等分父元素的4/1大小

css使用弹性盒,让每个子元素平均等分父元素的4/1大小

原本:

           ul {padding: 0;width: 100%;background-color: rgb(74, 80, 62);display: flex;justify-content: space-between;flex-wrap: wrap;li {/* 每个占4/1 */overflow: hidden;background-color: rgb(30, 15, 46);display: flex;justify-content: space-between;align-items: center;flex-direction: column;}

修改后:

li {padding: 0;border: 1px solid #00bcd4;background-color: rgb(30, 15, 46);display: flex;justify-content: space-between;align-items: center;flex-direction: column;flex: 0 0 50%; /* 宽度设置为父元素的1/2 */max-width: 50%; /* 最大宽度设置为父元素的1/2 */height: 50%; /* 高度设置为父元素的1/4 */&:nth-child(2n) {margin-right: 0; /* 每行的第二个li元素移除右边距 */}&:nth-child(odd) {margin-bottom: 0; /* 每列的第一个li元素(奇数位置)移除下边距 */}&:nth-last-child(-n + 2) {margin-bottom: 0; /* 最后两个li元素移除下边距 */}}}

http://www.lryc.cn/news/489107.html

相关文章:

  • 设计模式的学习思路
  • stereopy 查看 data.tl 的可用属性
  • 【2024APMCM亚太杯A题】详细解题思路
  • 用 React18 构建Tic-Tac-Toe(井字棋)游戏
  • 数据结构及算法--排序篇
  • 泷羽sec学习打卡-网络七层杀伤链1
  • 【QT】绘图
  • vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗
  • Markdown语法说明
  • 推荐一款专业电脑护眼工具:CareUEyes Pro
  • 对subprocess启动的子进程使用VSCode python debugger
  • Django启用国际化支持(2)—实现界面内切换语言:activate()
  • 基于单片机的多功能跑步机控制系统
  • VSCode 如何选中包含某个字母的所有行
  • CSRF保护--laravel进阶篇
  • 计算机网络-理论部分(二):应用层
  • k8s1.31版本最新版本集群使用容器镜像仓库Harbor
  • QT中使用json格式存取矩阵数据
  • k8s 集群安装
  • Elasticsearch面试内容整理-核心概念与数据模型
  • Spring Boot实现License生成和校验
  • es写入磁盘的过程以及相关优化
  • 十大网络安全事件
  • 【数据结构】【线性表】栈的基本概念(附c语言源码)
  • 修改ffmpeg实现https-flv内容加密
  • react中useMemo的使用场景
  • Pytorch自定义算子反向传播
  • aws服务(二)机密数据存储
  • VMware Workstation 17.6.1
  • 高校企业数据挖掘平台推荐