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布局。我这个只是提供一个思路。

相关推荐
susnm4 分钟前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v8 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠10 分钟前
nginx的使用
java·运维·服务器·前端·git·nginx·github
WildBlue11 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
啷咯哩咯啷16 分钟前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户261245834016117 分钟前
vue学习路线(10.监视属性-watch)
前端·vue.js
Spider_Man18 分钟前
React-Router 全面解析与实战指南
前端·react.js
凌览19 分钟前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
丘耳20 分钟前
前端渲染方式
前端
The_cute_cat20 分钟前
Ajax和Axios的初步学习
前端·学习·ajax