Flexbox无法正常工作-似乎仅适用于某些子元素？

分类：编程问答

如何解决Flexbox无法正常工作-似乎仅适用于某些子元素？

所以在我的代码中，我有一个新闻页面，其中容器设置为flexbox。 img网格容器中有23个带有图像等的卡片容器。所有卡片在img网格容器之前（在img网格容器中）正确对齐，但是现在只有一部分子元素继承了flexbox，而最后9个子元素没有继承。发布一些图片。这是我的代码。我知道这是HTML中的很多代码，但其中很多只是重复容器，我是新手:(-已附上屏幕截图，我希望所有图像都像左边的细图像一样排成一行。 谢谢。

enter image description here

.img-grid {
  width: 70vw;
  height: 90vh;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 2rem;
  overflow: scroll;
  overflow-x: hidden;
}

.press-info {
  width: 350px;
  height: 460px;
  padding: 1.5rem;
  perspective: 1000;
}

.card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 0.5s linear;
  font-family: Helvetica,sans-serif;
  font-weight: bold;
}

.press-info:hover .card {
  transform: rotateY(-180deg);
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  text-align: center;
}

.face.front img {
  width: 100%;
  height: 100%;
}

.face.back {
  background-image: var(--gradient);
  background-size: 400%;
  background-position: right;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 2rem;
  color: black;
  transition: background-position ease-out 0.8s;
}

.face.back:focus {
  background-position: left;
}

.face.back a {
  transform: uppercase;
  font-size: 1rem;
}

.face.back a span {
  font-size: 2rem;
}
<div class="press-container">
  <div class="img-grid">
    <div class="press-info">
      <div class="card">
        <div class="front face">
          <img src="press/press-1.png">
        </div>
        <div class="back face">
          <a href="https://oddamagazine.com/project/fashions-future-designers/">ODDA MAGAZINE : FASHION'S
                        FUTURE
                        DESIGNERS <span>⬈</span></a>
        </div>
      </div>
    </div>
    <div class="press-info">
      <div class="card">
        <div class="front face">
          <img src="press/press-2.png">
        </div>
        <div class="back face">
          <a href="#">HASHTAG LEGEND : MAY 2020</a>
        </div>
      </div>
    </div>

    <div class="press-info">
      <div class="card">

        <div class="front face">
          <img src="press/press-3.png">
        </div>
        <div class="back face">
          <a href="https://www.kaltblut-magazine.com/to-the-ones-that-hurt-the-most/">KALTBLUT Magazine : To
                        the
                        ones that hurt the most <span>⬈</span></a>
        </div>
      </div>
    </div>

    <div class="press-info">
      <div class="card">

        <div class="front face">
          <img src="press/press-23.png">
        </div>
        <div class="back face">
          <a href="https://1granary.com/designers-3/graduate-shows/csm-ma-fashion-show-2020-full-line-up/">ONE
                        granary: CENTRAL SAINT MARTINS
                        MA FASHION SHOW
                        2020 : FULL LINE-UP <span>⬈</span></a>
        </div>
      </div>
    </div>

    <div class="press-info">
      <div class="card">

        <div class="front face">
          <img src="press/press-4.png">
        </div>
        <div class="back face">
          <a href="https://wwd.com/fashion-news/fashion-scoops/central-saint-martins-ma-fashion-recycling-craftsmanship-1203487690/">WWD
                        : Central Saint Martins MA Fashion Champions Recycling and Craftsmanship <span>⬈</span></a>
        </div>
      </div>

    </div>
    <div class="press-info">
      <div class="card">

        <div class="front face">
          <img src="press/press-5.png">
        </div>
        <div class="back face">
          <a href="#">milk magazine hk: october 2019 : FROM BLOOMING YOUTH TO FASHION</a>
        </div>
      </div>
    </div>

    <div class="press-info">
      <div class="card">

        <div class="front face">
          <img src="press/press-6.png">
        </div>
        <div class="back face">
          <a href="https://the-comm.online/blog/into-the-woods/">the comm online : into the woods
                        <span>⬈</span></a>
        </div>
      </div>

    </div>
    <div class="press-info">
      <div class="card">

        <div class="front face">
          <img src="press/press-7.png">
        </div>
        <div class="back face">
          <a href="https://www.sleek-mag.com/article/wearable-slime//">SLEEK MAGAZINE : Meet the CSM fashion
                        grad
                        making clothes out of slime <span>⬈</span></a>
        </div>
      </div>

    </div>
    <div class="press-info">
      <div class="card">

        <div class="front face">
          <img src="press/press-8.png">
        </div>
        <div class="back face">
          <a href="https://1granary.com/designers-3/schools/central-saint-martins/one-year-out/">ONE GRANARY
                        : ONE
                        YEAR OUT<span>⬈</span></a>
        </div>
      </div>
    </div>
    <div class="press-info">

      <div class="card">

        <div class="front face">
          <img src="press/press-9.png">
        </div>
        <div class="back face">
          <a href="https://whynow.co.uk/read/samson-leung-finds-richness-in-linguistic-mistakes-and-mistranslation/">why
                        now digital : Samson leung finds richness in liguistic mistakes and mistranslation
                        <span>⬈</span></a>
        </div>
      </div>

    </div>
    <div class="press-info">
      <div class="card">

        <div class="front face">
          <img src="press/press-10.png">
        </div>
        <div class="back face">
          <a href="https://www.dearboymag.com/stories/samson-leung">Dear Boy Magazine : Interview with Samson
                        Leung
                        <span>⬈</span></a>
        </div>
      </div>
    </div>

    <div class="press-info">
      <div class="card">
        <div class="front face">
          <img src="press/press-11.png">
        </div>
        <div class="back face">
          <a href="https://www.dewmagazine.com/under-the-radar-talent-samson-leung/">UNDER-THE-RADAR TALENT :
                        SAMSON
                        LEUNG <span>⬈</span></a>
        </div>
      </div>
    </div>

    <div class="press-info">
      <div class="card">
        <div class="front face">
          <img src="press/press-12.png">
        </div>
        <div class="back face">
          <a href="http://example.com/introducing-samson-leung/">I'm Young! : Introducing Samson
                        Leung
                        <span>⬈</span></a>
        </div>
      </div>
    </div>

    <div class="press-info">
      <div class="card">
        <div class="front face">
          <img src="press/press-13.png">
        </div>
        <div class="back face">
          <a href="">Rain Magazine -> Interview: Samson Leung
                  </div>
               </div>
            </div>

            <div class="press-info">
               <div class="card">

                  <div class="front face">
                     <img src="press/press-14.png">
                  </div>
                  <div class="back face">

                  </div>
               </div>

            </div>
            <div class="press-info">
               <div class="card">

                  <div class="front face">
                     <img src="press/press-15.png">
                  </div>
                  <div class="back face">

                  </div>
               </div>

            </div>
            <!-- </div> -->
            <!-- <div class="press-column -4"> -->
            <div class="press-info">
               <div class="card">

                  <div class="front face">
                     <img src="press/press-16.png">
                  </div>
                  <div class="back face">

                  </div>
               </div>

            </div>
            <div class="press-info">
               <div class="card">

                  <div class="front face">
                     <img src="press/press-17.png">
                  </div>
                  <div class="back face">

                  </div>
               </div>

            </div>
            <div class="press-info">
               <div class="card">

                  <div class="front face">
                     <img src="press/press-18.png">
                  </div>
                  <div class="back face">

                  </div>
               </div>

            </div>
            <div class="press-info">
               <div class="card">

                  <div class="front face">
                     <img src="press/press-19.png">
                  </div>
                  <div class="back face">

                  </div>
               </div>

            </div>

            <div class="press-info">
               <div class="card">

                  <div class="front face">
                     <img src="press/press-20.png">
                  </div>
                  <div class="back face">

                  </div>
               </div>

            </div>
            <div class="press-info">
               <div class="card">

                  <div class="front face">
                     <img src="press/press-21.png">
                  </div>
                  <div class="back face">

                  </div>
               </div>

            </div>
            <div class="press-info">
               <div class="card">
                  <div class="front face">
                     <img src="press/press-22.png">
                  </div>
                  <div class="back face">
                  </div>
               </div>
            </div>
         </div>
      </div>

解决方法

您缺少一个关闭的<a>标签

<a href="">Rain Magazine -> Interview: Samson Leung

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 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