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

带有Flexbox的CSS正方形网格

申屠昌胤
2023-03-14
问题内容：

我正在尝试创建一个自适应的正方形网格。正方形应调整大小以适合视口的宽度。更改视口高度时，正方形不应调整大小。

我了解了如何调整每个正方形的宽度，但是我不知道如何在视口宽度改变时使元素变为正方形以及如何缩放其高度。

在小提琴下面的示例中，七个正方形应始终水平放置，并且应按正方形缩放。我不在乎有多少行可见。

<body>
<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
</div>
<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
</div>
<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
</div>
<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
</div>
<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
</div>
<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
</div>
<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
</div>



.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  justify-content: space-around;
  height: 50px;
  line-height:30px;
}

.flex-item {
  background: tomato;
  margin: 5px;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  flex: 1 0 0px;
  height: auto;
}

问题答案：

您不应设置任何大小。您可以使用额外的元素或带有％的垂直填充的伪元素。这将允许您使用width作为参考：显示以下内容的代码段：

.flex-container {

    padding: 0;

    margin: 0;

    list-style: none;

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-flex-flow: row;

    justify-content: space-around;



    line-height:30px;

}

.flex-item {

    background: tomato;

    margin: 5px;

    color: white;

    font-weight: bold;

    font-size: 1.5em;

    text-align: center;

    flex: 1 0 auto;

    height:auto;

}

.flex-item:before {

    content:'';

    float:left;

    padding-top:100%;

}


<body>

    <div class="flex-container">

        <div class="flex-item">1</div>

        <div class="flex-item">2</div>

        <div class="flex-item">3</div>

        <div class="flex-item">4</div>

        <div class="flex-item">5</div>

        <div class="flex-item">6</div>

        <div class="flex-item">7</div>

    </div>

    <div class="flex-container">

        <div class="flex-item">1</div>

        <div class="flex-item">2</div>

        <div class="flex-item">3</div>

        <div class="flex-item">4</div>

        <div class="flex-item">5</div>

        <div class="flex-item">6</div>

        <div class="flex-item">7</div>

    </div>

    <div class="flex-container">

        <div class="flex-item">1</div>

        <div class="flex-item">2</div>

        <div class="flex-item">3</div>

        <div class="flex-item">4</div>

        <div class="flex-item">5</div>

        <div class="flex-item">6</div>

        <div class="flex-item">7</div>

    </div>

    <div class="flex-container">

        <div class="flex-item">1</div>

        <div class="flex-item">2</div>

        <div class="flex-item">3</div>

        <div class="flex-item">4</div>

        <div class="flex-item">5</div>

        <div class="flex-item">6</div>

        <div class="flex-item">7</div>

    </div>

    <div class="flex-container">

        <div class="flex-item">1</div>

        <div class="flex-item">2</div>

        <div class="flex-item">3</div>

        <div class="flex-item">4</div>

        <div class="flex-item">5</div>

        <div class="flex-item">6</div>

        <div class="flex-item">7</div>

    </div>

    <div class="flex-container">

        <div class="flex-item">1</div>

        <div class="flex-item">2</div>

        <div class="flex-item">3</div>

        <div class="flex-item">4</div>

        <div class="flex-item">5</div>

        <div class="flex-item">6</div>

        <div class="flex-item">7</div>

    </div>

    <div class="flex-container">

        <div class="flex-item">1</div>

        <div class="flex-item">2</div>

        <div class="flex-item">3</div>

        <div class="flex-item">4</div>

        <div class="flex-item">5</div>

        <div class="flex-item">6</div>

        <div class="flex-item">7</div>

    </div>

</body>

一个inline-block的元素可以做太多，只是适应框的显示/行为和它的内容。这里的魔力来自于填充：50％0;（100％的垂直填充等于父级的宽度）。有关垂直边距和填充，



 类似资料：
  • 具有响应正方形的网格布局

    问题内容： 我想创建一个带有响应正方形的网格布局。 我觉得我应该可以使用CSS Grid布局来做到这一点，但是在将每个正方形的高度设置为等于宽度时遇到麻烦。 在每个正方形之间设置水槽时也遇到麻烦。 使用flexbox会更好吗？ 目前，我的HTML看起来像这样，但是它将是动态的，因此可以添加更多的正方形。当然，它需要响应，因此理想情况下将使用媒体查询将其折叠到一列。 使用CSS网格，据我所知 我可以

  • 带有图像的html / css六角形

    问题内容： 有机会将图像放置在六边形内吗？我已经习惯了html中的六边形形状的单元格，但是我无法用（背景图像）填充它。 这是我尝试过的： 问题答案： 使用CSS3，几乎一切皆有可能： 在那里，我使用进行了不同的旋转，因此您可以获得跨浏览器（很好，_现代的_跨浏览器）蒙版，该蒙版甚至可以在蒙版区域上覆盖和单击。

  • 带正方形网格的最小精确覆盖；额外削减

    这个问题出现在一个挑战中，但由于它现在已经关闭，询问它应该是可以的。 问题（不是这个问题本身，这只是背景资料）可以这样直观地描述，借用他们自己的形象： 我选择了最优解决。这可能是（对于决策变体）一个NP完全问题（它肯定是在NP中，而且它闻起来像一个精确覆盖，尽管我还没有证明一个一般的精确覆盖问题可以简化为它），但那很好，它只需要在实践中快速，而不一定是在最坏的情况下。在这个问题的背景下，我对任何近

  • CSS-BoxModel-flexbox

    Flexbox CSS Css3-flexbox Flexbox——快速布局神器 一个完整的Flexbox指南 CSS3 Flexbox属性可视化指南 Autoprefixer 布局问题 Flexbox属性图 从第一个子节点可以看到Flexbox由Flex容器和Flex项目组成，容器即父元素，项目即子元素。他们之间的一些关系可以这样来表示： Flex容器 容器默认存在两根轴：水平的主轴（main

  • 网格上二维正方形的非间断矩形边覆盖

    尽管标题听起来很复杂，但我的实际问题应该不太难建模。但是，我无法找到一个好的算法来执行以下操作： 我想用固定数量的n个矩形覆盖网格上的一组正方形。这些矩形可能会重叠，它们只需要覆盖我的形状的外边缘。 平方米x平方米网格上不同矩形的数量为： 因此，蛮力方法必须尝试的组合数量是 对于10 x 10网格和仅3个矩形，这将是2768064625个组合。 带有一些正方形的初始网格可能如下所示： n = 1：

  • 使用flexbox（或其他CSS）创建砌体网格

    问题内容： 我想在CSS中使用大小均相同但高度不相同的元素来实现网格效果。我希望下面的元素始终位于底部元素的50px处，无论接下来是什么。 我尝试使用浮点数，但该错误。因此，我尝试使用Flex，但是它仍然无法满足我的要求。 问题答案： Try the new CSS Grid Layout 建立一个块级网格容器。该grid-auto-rows属性设置自动生成的行的高度。在此网格中，每行高度为50p

相关阅读

CSS画正方体?CSS 使用Flexbox的圣杯布局网格区域在CSS网格中的布局不正确如何在Java中的非数组网格中填充正方形？带有HTML和CSS的表格滚动

相关文章

方正璞华4.10菜鸟网络正式批面经网易互联网 有道二面（凉）0915网易互联网C++开发（网络QOS方向）面经平面灯阵中寻找最大正方形边界 - 华为机试真题题解

相关问答

css flexbox调整内容为什么没有画正方形？ResourceNotes找到带有正确令牌的Microsoft图形API正方形和矩形继承有什么问题？用正弦和余弦画一个有角的正方形

相关工具

FlexBoxflexbox-layout​React-Flexbox-Grid获取网页的所有图片CSS Tester

相关文档

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