使用flex等于列

分类：编程问答

如何解决使用flex等于列

我为移动和Web的网格视图创建了纯CSS手风琴。 现在我正面临Web视图的列宽问题。在当前实现中，所有列的列宽都不相同。 我想使用flex创建一个相等的列。

注意：此html对移动设备响应，将为移动设备提供手风琴，而对于Web则为行。

/*
 CSS for the main interaction
*/
.accordion > input[name="collapse"] {
  display: none;

  /*position: absolute;
  left: -100vw;*/
}

/* .accordion label,.accordion .content{
 max-width: 620px;
  margin: 0 auto;
 } */

.accordion .content {
  background: #fff;
  overflow: visible;
  height: 0;

  padding: 10px 0;
}

.accordion > input[name="collapse"]:checked ~ .content {
  height: 200px;
  transition: height 0.5s;
}

.accordion label {
  display: block;
}

.edit-delete .item {
  flex-direction: row;
}
.edit-delete a {
  padding: 0 10px;
}
/* For Desktop */
@media only screen and (min-width: 1023px) {
  .accordion > input[name="collapse"]:checked ~ .content {
    height: auto;
  }
  .accordion .handle {
    width: 300px;
  }
  .handle label,.content,.col,.item {
    display: flex;
    width: 100%;
  }
}

.accordion {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.accordion > input[name="collapse"]:checked ~ .content {
  border-top: 0;
  transition: 0.3s;
}

.accordion .handle {
  margin: 0;
  font-size: 16px;
}

.accordion label {
  cursor: pointer;
  font-weight: normal;
  padding: 10px 0;
  user-select: none;
  pointer-events: none;
}

/* .accordion label:hover,.accordion label:focus {
  background: #252525;
} */

.accordion .handle label:before {
  content: "";
  border: solid #008080;
  border-width: 0 3px 3px 0;
  padding: 4px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  float: right;
  margin-top: 2px;
  transition: 0.4s;
  width: 6px;
  height: 6px;
  position: absolute;
  right: 20px;
}
.handle label:before {
  display: none;
}
.accordion > input[name="collapse"]:checked ~ .handle label:before {
  content: "";
  border: solid #008080;
  border-width: 0 3px 3px 0;
  padding: 4px;
  -webkit-transform: rotate(220deg);
  float: right;
  margin-top: 2px;
  transition: 0.4s;
  width: 6px;
  height: 6px;
  position: absolute;
  right: 20px;
}

.accordion p:last-child {
  margin-bottom: 0;
}
/* .container{
    max-width: 620px;
    margin: 0 auto;
} */

.handle label,.col {
  display: flex;
}
.item {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

@media (max-width: 1023px) {
  .content {
    display: block;
  }
  .content .col {
    padding: 10px 0;
  }
  .accordion {
    flex-direction: column;
    position: relative;
  }
  .accordion .content {
    overflow: hidden;
    transition: 0.5s;
    padding: 0;
  }
  .accordion label {
    pointer-events: all;
  }
  .handle label:before {
    display: block;
  }
  .edit-delete {
    position: absolute;
    bottom: 0;
  }

  .accordion .handle {
    height: 100px;
  }
  .handle .item {
    padding: 0 10px;
    width: auto;
  }
  .accordion > input[name="collapse"]:checked ~ .handle {
    height: auto;
  }
  .item {
    width: auto;
  }
  .item span:first-child {
    width: 150px;
  }
  .edit-delete a {
    padding-left: 0;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>HTML Expand Collapse Text Example</title>
    <meta name="author" content="Codeconvey" />
    <!-- Font Awesome -->
    <!-- Accordion CSS -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="accordion">
      <input type="radio" name="collapse" id="handle1" />
      <div class="handle">
        <label for="handle1">
          <div class="item">
            <span>Name</span>
            <span>xyz</span>
          </div>
          <div class="item">
            <span>Mobile Number</span>
            <span>1234567890</span>
          </div>
        </label>
      </div>
      <div class="content">
        <div class="col">
          <div class="item">
            <span>Gender</span>
            <span>Male</span>
          </div>
          <div class="item">
            <span>Dealership</span>
            <span>fsdfsd</span>
          </div>
        </div>
        <div class="col">
          <div class="item">
            <span>Branch</span>
            <span>sdfsd</span>
          </div>
          <div class="item">
            <span>User Type</span>
            <span>Sales Executive</span>
          </div>
        </div>
        <div class="col">
          <div class="item">
            <span>Status</span>
            <span>Active</span>
          </div>
        </div>
        <div class="col edit-delete">
          <div class="item">
            <a href="#">Edit</a>
            <a href="#">Delete</a>
          </div>
        </div>
      </div>
    </section>
    <section class="accordion">
      <input type="radio" name="collapse" id="handle2" />
      <div class="handle">
        <label for="handle2">
          <div class="item">
            <span>Name</span>
            <span>Zyz</span>
          </div>
          <div class="item">
            <span>Mobile Number</span>
            <span>1234567890</span>
          </div>
        </label>
      </div>
      <div class="content">
        <div class="col">
          <div class="item">
            <span>Name</span>
            <span>xyz</span>
          </div>
          <div class="item">
            <span>Mobile Number</span>
            <span>1234567890</span>
          </div>
        </div>
        <div class="col">
          <div class="item">
            <span>Name</span>
            <span>xyz</span>
          </div>
          <div class="item">
            <span>Mobile Number</span>
            <span>1234567890</span>
          </div>
        </div>
        <div class="col">
          <div class="item">
            <span>Mobile Number</span>
            <span>1234567890</span>
          </div>
        </div>
        <div class="col edit-delete">
          <div class="item">
            <a href="#">Edit</a>
            <a href="#">Delete</a>
          </div>
        </div>
      </div>
    </section>
    <section class="accordion">
      <input type="radio" name="collapse" id="handle3" />
      <div class="handle">
        <label for="handle3">
          <div class="item">
            <span>Name</span>
            <span>xyz</span>
          </div>
          <div class="item">
            <span>Mobile Number</span>
            <span>1234567890</span>
          </div>
        </label>
      </div>
      <div class="content">
        <div class="col">
          <div class="item">
            <span>Name</span>
            <span>xyz</span>
          </div>
          <div class="item">
            <span>Mobile Number</span>
            <span>1234567890</span>
          </div>
        </div>
        <div class="col">
          <div class="item">
            <span>Name</span>
            <span>xyz</span>
          </div>
          <div class="item">
            <span>Mobile Number</span>
            <span>12345625320</span>
          </div>
        </div>
        <div class="col">
          <div class="item">
            <span>Mobile Number</span>
            <span>1212121212</span>
          </div>
        </div>
        <div class="col edit-delete">
          <div class="item">
            <a href="#">Edit</a>
            <a href="#">Delete</a>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

请检查全屏视图

请参见下面的屏幕截图，以了解列宽不一致的情况

enter image description here

解决方法

这可以通过3个步骤实现：

  1. 在display: contents个元素上设置.handle,.handle > label,.content,.col。这将使.item的所有section.accordion元素成为子元素
  2. 对于.item和width: 0的所有flex-grow: 1元素集，这将使所有列具有相同的宽度。
  3. 调整section.accordion上的填充以匹配您的第一个设计。

当然，这些操作仅需要在网络视图中完成。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot