flex多行多列布局小技巧

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
  </head>
  <style>
    .parent {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-evenly;
      /* align-items: center; */
      width: 550px;
      height: 550px;
      /* height: 500px; */
      background-color: aqua;
    }
    .children {
      flex-shrink: 0;
      flex-grow: 0;
      width: 100px;
      height: 100px;
      background-color: burlywood;
    }
    .empty {
      width: 100px;
      /* height: 0px; */
      opacity: 0;
    }
  </style>
  <body>
    <div class="parent">
      <div class="children"></div>
      <div class="children"></div>
      <div class="children"></div>
      <div class="children"></div>
      <div class="children"></div>
      <div class="children"></div>
      <div class="children"></div>
      <div class="children"></div>
      <div class="children"></div>
      <div class="empty"></div>
      <div class="empty"></div>
      <div class="empty"></div>
      <div class="empty"></div>
      <div class="empty"></div>
    </div>
  </body>
</html>

开发中经常会遇到多行多列的情况,一般都是要求每行都是两头在最边上,中间均匀分布的情况。这种情况使用flex的一般都会用到justify-content: space-between;,但是这种不适合用在多列的情况。

解决这个问题也很简单就是补位就行了补了几个<div class="empty"></div>这样就可以拉。注意要把这个补位的样式宽度要设置一样的,并且高度设置0或者设置透明。

这种多行多列的还可以用grid布局。我这个只是提供一个思路。

相关推荐
Zuckjet_2 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801463 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店4 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown4 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip5 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿6 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.7 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰7 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息7 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
卷Java7 小时前
CSS模板语法修复总结
java·前端·css·数据库·微信小程序·uni-app·springboot