登录
当前位置： 首页 > 面试题库 >

如何更改flexbox包装？

沈建柏
2023-03-14
问题内容：

我的应用程序中有一个响应式flexbox框，其中包含动态呈现的卡片（每个api调用呈现1-10张卡片）。除了包裹的方式外，它几乎可以完全满足我的要求。

假设我渲染了10张卡片，如果我调整屏幕大小，使其变成例如4-4-2，则最后2张卡片居中，我希望将其包裹起来，以便最后2张卡片从左侧开始并以相等的间距从上方开始。你该怎么做？

编辑以进一步说明：假设我将尺寸进一步调整为1-1-1-1-1-1-1-1-1-1，卡片应居中显示，我仍然需要居中，但我希望最后2张如果卡变成4-4-2或3-3-2等，则从左侧缠绕卡。

.card {

    text-align: center;

    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;

    max-width: 300px;

    margin: 2rem;

    padding-bottom: 1rem;

}

.container {

  padding-right: 15px;

  padding-left: 15px;

  margin-right: auto;

  margin-left: auto;



}



.recipe-grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around

}


<div class="container">

  <div class="recipe-grid">



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>





  </div>

</div>

问题答案：

如果要使用Flexbox，并且没有脚本，则可以创建 ghost 元素，以便它们填充最后一行的空间。

因此，对于可能为4的列长，您需要3个 ghost 元素，依此类推。

也可以使用伪元素，这将使所需的 虚数 减少2。

.card {

    text-align: center;

    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;

    max-width: 300px;

    margin: 2rem;

    padding-bottom: 1rem;

}

.card:empty {

    width: 300px;

    box-shadow: none;

    margin: 2rem;

    padding-bottom: 0;

}



.container {

  padding-right: 15px;

  padding-left: 15px;

  margin-right: auto;

  margin-left: auto;



}



.recipe-grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around

}


<div class="container">

  <div class="recipe-grid">



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>



    <div class="card">

      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

      <h3> Egg beef sandwich </h3>

      <p> 604 kcal - totally vegan </p>

    </div>





    <div class="card"></div>

    <div class="card"></div>

    <div class="card"></div>



  </div>

</div>

更新

由于您使用justify-content:space-around，所以您也可以这样做，即在周围添加一个额外的包装，将其card居中，然后通过媒体查询，使包装根据每行项目的数量填充行。

请注意，由于不能CSS calc在媒体查询中使用，因此值基于1remequals 16px，因此第一个值的计算方式如下：300px +(2rem * 2) = 728px依此类推。因此，如果您的浏览器在 元素 上的默认字体大小 为 ，则可以将其设置为，或者重新计算查询值root 16px

.card {

  text-align: center;

  box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;

  max-width: 300px;

  margin: 2rem;

  padding-bottom: 1rem;

}

.container {

  padding-right: 15px;

  padding-left: 15px;

  margin-right: auto;

  margin-left: auto;

}

.recipe-grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-start;

}

.recipe-grid .card-wrapper {

  display: flex;

  justify-content: center;

  width: 100%;

}

@media (min-width:  728px) { .recipe-grid .card-wrapper { width: 50%;     } }

@media (min-width: 1092px) { .recipe-grid .card-wrapper { width: 33.333%; } }

@media (min-width: 1456px) { .recipe-grid .card-wrapper { width: 25%;     } }

@media (min-width: 1820px) { .recipe-grid .card-wrapper { width: 20%;     } }


<div class="container">

  <div class="recipe-grid">



    <div class="card-wrapper">

      <div class="card">

        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

        <h3> Egg beef sandwich </h3>

        <p> 604 kcal - totally vegan </p>

      </div>

    </div>



    <div class="card-wrapper">

      <div class="card">

        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

        <h3> Egg beef sandwich </h3>

        <p> 604 kcal - totally vegan </p>

      </div>

    </div>



    <div class="card-wrapper">

      <div class="card">

        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

        <h3> Egg beef sandwich </h3>

        <p> 604 kcal - totally vegan </p>

      </div>

    </div>



    <div class="card-wrapper">

      <div class="card">

        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

        <h3> Egg beef sandwich </h3>

        <p> 604 kcal - totally vegan </p>

      </div>

    </div>



    <div class="card-wrapper">

      <div class="card">

        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

        <h3> Egg beef sandwich </h3>

        <p> 604 kcal - totally vegan </p>

      </div>

    </div>



    <div class="card-wrapper">

      <div class="card">

        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

        <h3> Egg beef sandwich </h3>

        <p> 604 kcal - totally vegan </p>

      </div>

    </div>



    <div class="card-wrapper">

      <div class="card">

        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

        <h3> Egg beef sandwich </h3>

        <p> 604 kcal - totally vegan </p>

      </div>

    </div>



    <div class="card-wrapper">

      <div class="card">

        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

        <h3> Egg beef sandwich </h3>

        <p> 604 kcal - totally vegan </p>

      </div>

    </div>



    <div class="card-wrapper">

      <div class="card">

        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

        <h3> Egg beef sandwich </h3>

        <p> 604 kcal - totally vegan </p>

      </div>

    </div>



    <div class="card-wrapper">

      <div class="card">

        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

        <h3> Egg beef sandwich </h3>

        <p> 604 kcal - totally vegan </p>

      </div>

    </div>



    <div class="card-wrapper">

      <div class="card">

        <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">

        <h3> Egg beef sandwich </h3>

        <p> 604 kcal - totally vegan </p>

      </div>

    </div>



  </div>

</div>

最后，我还想提到这些帖子，如何将一个flex容器居中，但如何将flex项左对齐，并且可以根据需要更改内容值的合理性元素数量输入（可能被认为是重复的），因为它很好地解释了Flexbox在包装和居中项目方面的工作方式，以及比其更多的解决方案我给了。



 类似资料：
  • 如何使flexbox在计算中包括填充？

    问题内容： 下面是两行。 第一行 是的两个项目和的一个项目。 第二行 是中的两项。 根据规范 1A + 1B = 2A 但是，当计算中包括 填充 时，总和是不正确的，如下面的示例所示。 题 如何使flex box在其计算中包括填充，以使示例中的box正确排列？ 问题答案： 解决方案： 设置子元素，而不是在你的项目。 问题： 计算不使用。所以; 添加到元素并不能按照规范为您提供预期的宽度 。 例如，

  • 如何更改列并更改默认值？

    问题内容： 尝试更改列的数据类型并设置新的默认值时遇到以下错误： 错误1064（42000）：您的SQL语法有错误；检查与您的MySQL服务器版本相对应的手册，以在第1行的’VARCHAR（255）NOT NULL SET DEFAULT’{}’‘附近使用正确的语法 问题答案： 同样的第二种可能性（感谢juergen_d）：

  • 如何更改列并更改默认值？

    在尝试更改列的数据类型并设置新的默认值时，我遇到以下错误： 错误1064（42000）：您的SQL语法中有错误；查看与您的MySQL server版本相对应的手册，以了解第1行“varchar(255)NOT NULL SET DEFAULT”{}“附近使用的正确语法

  • 如何在IntelliJ IDEA中更改顶级包名称？

    我有一个包结构：com.report.domain.model 我想把它更改为com.reporting.domain.model。当我在包com.report.domain.model上选择Refactor Rename时，我只看到一个重命名“model”的选项。我尝试过在项目视图和包之间切换，但没有效果。我知道如何通过Navigator视图在Eclipse中进行此更改，但如何在IntelliJ

  • 如何更新Python包？

    问题内容： 我正在运行Ubuntu 9:10，并安装了一个名为M2Crypto的软件包（版本为0.19.1）。我需要下载，构建和安装最新版本的M2Crypto软件包（0.20.2）。 0.19.1软件包的文件位于多个位置，包括（/ usr / share / pyshared和/usr/lib/pymodules.python2.6）。 在安装0.20.2之前如何从系统中完全卸载版本0.19.1？

  • 如何更改Laravel 5.2更改登录路径？

    您好，我正在使用Laravel5.2版本。我通过composer安装了laravel项目。之后，我使用命令“phpartisanmake:auth”创建auth。创建身份验证路由后生成，例如“http://localhost:8000/login“.现在我不想要此路线，我想设置不同的路线，例如”http://localhost:8000/super/admin“那么，我该如何更改”http://l

相关阅读

如何更改UIView大小？如何更改Maven Java Home如何更改pygame图标？如何更改JavaMail端口如何更改Go日志包的日期/时间格式

相关文章

如何配置Struts2全局资源包Linux mask有效权限有什么用，如何修改？UX面试｜如何实践通用/包容性设计的Python创建包，导入包Dart包

相关问答

包含块内容的Flexbox项溢出Flexbox容器用Gradle组装时如何更改Android应用程序包名称？不使用Android Studio如何在Flutter中更改app包名？如何在Flutter上更改custom_radio_grouped_button包中的字体大小？如何更改pip安装路径

相关工具

FlexBoxflexbox-layout​React-Flexbox-Grid《Node.js 包教不包会》小面包

相关文档

Flexbox 入门教程Node.js 包教不包会webpack2 包教不包会设计模式包教不包会如何编写 jQuery 插件
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.