程序员经验分享-hwhale

与嵌套的 Flexbox 网格作斗争

2023-11-30

我试图用基于负边距的网格系统（susy）实现类似网格的模式，但失败了。

我尝试使用 Flexbox，但我不确定它是否真的可行，我认为最好的方法是 2 列（A 侧和 B 侧），并为框 (1) 提供框 2 的 50% 的伸缩高度，但它不知何故似乎不起作用。

据我所知，这是可行的。

enter image description here

.block {
  width: 100%;
  background: grey
}

.column {
    align-content: stretch;
    display: flex;
    flex-flow: column wrap;
    width: 50%;
}

.box_long {
  background-color: pink;
  flex: 0 0 50%;
  padding: 20px;
  border: solid 1px black;
}

.box_small {
  background-color: blue;
  flex: 0 0 25%;
  padding: 20px;
  border: solid 1px black;
}

.box_big {
  background-color: green;
  flex: 0 0 100%;
  padding: 20px;
  border: solid 1px black;
}
<div class="block">
  
  <div class="column">
    <div class="box_long">
    </div>
    <div class="box_big">
    </div>
  </div>

  <div class="column">
    <div class="box_small">
    </div>
    <div class="box_small">
    </div>
    <div class="box_small">
    </div>
    <div class="box_small">
    </div>
    <div class="box_long">
    </div>
  </div>
  
</div>

这是一种可能适合您的方法：

（没有对 HTML 进行任何更改。）

.block {
  display: flex;
  height: 100vh;
  background: grey;
}

.column {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
}

.box_big {
  flex-basis: 100%;
  height: 70%;
  background-color: chartreuse;
  border: solid 1px black;
}

.box_small {
  flex: 0 0 50%;
  height: 35%;
  background-color: aqua;
  border: solid 1px black;
}

.box_long {
  flex-basis: 100%;
  height: 30%;
  background-color: violet;
  border: solid 1px black;
}

* {
  margin: 0;
  box-sizing: border-box;
}
<div class="block">
  <div class="column">
    <div class="box_long"></div>
    <div class="box_big"></div>
  </div>
  <div class="column">
    <div class="box_small"></div>
    <div class="box_small"></div>
    <div class="box_small"></div>
    <div class="box_small"></div>
    <div class="box_long"></div>
  </div>
</div>

jsFiddle

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

flexbox

susysass

与嵌套的 Flexbox 网格作斗争 的相关文章

  • HTML5

    我想在随机位置开始和停止 HTML5 播放 并具有淡入和淡出周期 以平滑聆听体验 为此存在什么样的机制 使用 setTimeout 手动增加音量 jQuery 的方式 audio animate volume newVolume 1000

  • 更改

    标签中一个单词的颜色

    我正在处理一份 html 文档 并且只想在我的文档中创建一个单词 p 标记不同的颜色 如果不做完全不同的事情 这可能吗 p p tag p p I want to make only THIS word blue p p style dis

  • 删除圆形图像周围的边框

    我有一个圆形图像 png 文件 中间是透明的 我需要将图像内的背景设置为纯色 为此 我将背景设为纯色 然后将border radius 50 但这会产生一条丑陋的小白线 有没有办法摆脱这个问题 或者我必须在图像编辑器中手动为图像着色 div

  • .Net 中是否有与 HTML 等效的 XmlReader？

    我用过Html敏捷包 http html agility pack net z codeplex过去在 Net 中解析 HTML 但我不喜欢它只使用 DOM 模型 在大型文档和 或具有大量嵌套的文档上 可能会遇到堆栈溢出或内存不足异常 另外

  • 使用绝对定位时文本被破坏

    我有一个小挑战 我在 Stack Overflow 上没有找到任何解决方案 这就是我得到的 这就是我想要的 为了产生这个标题效果 我使用绝对位置 我什至不知道我的标题的宽度和高度 因此 使用此解决方案时 大文本会中断 My HTML div

  • HTML5 仅拖放图像

    我想做的是 如果所有拖动的文件都是图像 则将其删除 但如果有其他文件扩展名 则不要删除它们 而仅删除图像 这是我的尝试 HTML div div JavaScript var dropzone document getElementById

  • 我可以从命令行打印 html 文件（带有图像、css）吗？

    我想从脚本中打印带有图像的样式化 html 页面 谁能建议一个开源解决方案 我使用的是 Linux Ubuntu 8 04 但也对其他操作系统的解决方案感兴趣 你可以给html2ps http user it uu se jan html2

  • 在iOS上，“添加到主页”缓存保存在哪里，如何清除它？

    我正在 iPad iOS v7 上制作一个 html5 游戏 当我将其添加到主页时 它非常顽固地释放缓存 如果我在 Safari 中查看它 这会按照您所期望的方式工作 如果我刷新一次或两次 页面就会以最新状态缓存 但在主页上却是另一回事 它

  • 使用 jQuery 更改父元素样式

    我有下一个 html 设置 div class one div class two a href class three Click a div div 我想更改具有类的元素的背景颜色 one当我点击元素时 three使用 jQuery 这

  • 如何使用 HTML 5 实现类似 gmail 的文件上传/附件

    我记得一些支持 Ajax 之类的选项 无回发世界 文件上传 隐藏的 iframe 使用 flash 对象 尽管我仍然好奇为什么使用 SWF 以及它提供什么优势 然而 通过查看博客 HTML 5 似乎很有前途 我尝试了一些小示例 它确实有效

  • 如何处理 Django 中的错误

    我想让我的 django 应用程序尽可能对用户友好 并且我想处理适当的错误并让它推出类似于 javascript 中的警报的错误消息 我想在没有上传文件时执行此操作 因此 当按下上传按钮并且尚未上传任何内容时 将会发出一条警报消息 我的看法

  • JSP/Servlet HTTP 404 错误处理

    我想在我的网络应用程序中处理 HTML 404 错误 我可以这样写

  • 如何转义 HTML 字符？在.NET中-->“

    如何在 NET 中转义 HTML 字符 我正在从 json 字符串中获取 html 并在标题中得到 amp quot more text 看起来我需要做两次才能得到 amp quot 成为 quot 那么它就是一个 如何转义 NET 中的所

  • 如何使跨度标签不可删除？

    我正在尝试使 contenteditable div 内的跨度标记不可删除 div Editable span Read Only span div 只读范围确实是只读的 但我可以通过单击删除键来删除整个范围 有没有一种属性方法可以告诉sp

  • 如何使整个跨度落入新行？

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a

  • 如何删除标题中的粗体？

    我有一个标题 h1 THIS IS A HEADLINE h1 如何使短语 THIS IS 不加粗 其余部分不做任何更改 我在文本装饰中找不到任何相关标签 标题看起来很粗体 因为它大尺寸 如果您已应用粗体或想要更改行为 您可以执行以下操作

  • 将特定字形与网络字体一起使用

    使用网络字体 我想使用字体功能设置 CSS 中的选项以及跨度类HTML 中 以便使用字体集中的特定替代字形 我需要以正确的语法使用哪些值 GID Unicode 才能定位特定的目标glyph内glyph备择方案 这些功能使用 OpenTyp

  • 如何在画布上所有其他内容后面绘制图像？ [复制]

    这个问题在这里已经有答案了 我有一块画布 我想用drawImage在画布上当前内容后面绘制图像 由于画布上已经有内容 我正在使用字面上的画布来创建包含图像的画布 因此我无法真正先绘制图像 所以我无法使用drawImage在我呈现其余内容之前

  • CSS 精灵按钮

    这些精灵按钮让我抓狂 我几乎可以让他们工作 但不完全是 我正在玩这个非常简单的精灵图像 我有一个 jsfiddle 项目 gt gt 这里 如果你想看的话 但如果你只想看一下 代码就在下面 http jsfiddle net jp2code

  • 如何简化这个 LESS CSS Box-shadow mixin？ （带有“方向”的多个阴影）

    如何减少这段代码 可能使用循环 以拥有一个接受方向和数字的 函数 dir 想要的 方向 number 我需要多少次影子 这里是10次 color 阴影的颜色 Example 可以工作 但不是很容易使用 perspective box dir

随机推荐

  • 如何返回这个数组中唯一不重复的值？ [复制]

    这个问题在这里已经有答案了 我有一个关于 Javascript 的问题 这是以下数组 1 0 0 0 0 0 0 我想返回唯一不重复的值 即1 有什么建议么 我有这个 var result arr filter x gt arr index

  • Windows Phone 导航 - 返回之前的页面

    我想点击一个按钮将我带到一个页面 然后单击一个列表框项 单击新页面上的按钮并将其传回之前的页面 而无需创建第一页的新 URI First Page private void btnAddExistingMember Click object

  • 如何从 JSON 字符串中提取单个元素？

    我想从下面给出的数据中提取值 屏幕名称 姓名 ID 个人资料图片 URL id str 135977294 description 4TechCareers is the u2018insiders u2019 view of TechCa

  • OnClick 用于谷歌分析和目标 _blank。链接失效了？

    a href http example com test html class noFloat target blank Click Me a 我对这段代码有疑问 不返回 false 我有一个新窗口 没关系 但相同的网址也在同一个父窗口中打

  • 禁止打印 REPL 中原子保存的数据？ （或参考人、代理人……）

    以下是完全有效的 Clojure 代码 def a atom nil def b atom a reset a b 它甚至在需要反向引用的情况下很有用 然而 在 REPL 中处理这些东西很烦人 每当您键入 a 或 b 时 REPL 都会尝试

  • 如何创建 Directshow 过滤器？

    我想创建一个软件 作为视频流 H264 输入 来自另一个软件 输出为网络摄像头 供我的朋友可以在 Skype yahoo 或类似的设备中观看 我知道我需要创建 directshow 过滤器才能做到这一点 但我不知道必须创建什么类型的过滤器

  • 如何支持 CMake 中 Makefile 的构建时变量？

    虽然我已经完成了一些多平台 例如嵌入式与主机运行时环境 CMake 项目 但我有一个看似简单的用例 但我无法完全弄清楚 我所知道的典型 CMake 用法是这样的 mkdir

  • 如何为 StatEt Eclipse 插件的帮助视图索引 R 库？

    当我显示 StatEt Eclipse 插件的 R Help 视图时 出现以下错误 HTTP ERROR 404 Problem accessing rhelp browse default workbench Reason The R l

  • 如何将回调附加到 Google 应用制作工具中的自定义确认对话框？

    我正在 Google App Maker 中创建自定义确认对话框 并希望使用 确认 按钮来调用传入的函数 我在按钮小部件中没有看到 onclick 事件 关于如何执行此操作有什么建议吗 function confirmationDialog

  • 使用 MATLAB 将 2D 图像放入半球中

    我正在尝试将 2D 图像放入 3D 半球中 我有一张尺寸为 128x128 的图像 我生成我的半球 x y z sphere 127 x x 64 end y y 64 end z z 64 end Attempt warp x y z I

  • Django 查询自然排序

    假设我有这个 Django 模型 class Question models Model question code models CharField max length 10 我的数据库中有 15000 个问题 我想按以下方式排序问题代

  • 将位转换为整数

    我收到一个包含字节数组的数据包 我必须从中获取一些整数值 这是文档的一部分 有人能帮助我吗 这是一个 4 字节数组 年从 1990 到 2052 6 位 月从 1 到 12 4 位 日从 1 到 31 5 位 小时从 0 到 23 5 位

  • FlannBasedMatcher 返回不同的结果

    使用FlannBasedMatcher在 OpenCV 中 我使用相同的参数调用匹配器得到不同的结果 谁能建议我做错了什么 下面的代码显示了我遇到的问题的一个最小示例 它简化了我如何使用FlannBasedMatcher 这不是真正的代码

  • Java 中的访问器方法

    所以我对 setter 和 getter 方法以及它们是否有用有疑问 假设我只编写了一个非常基本的程序 如下所示 public class Account String name String address double balance

  • 具有不同返回类型和参数数量的 Func 委托列表

    我有一个类需要在构造函数中传递不同数量的 Func 委托 这些委托中的每一个都将指向不同的函数 每个函数都有不同的返回类型 并且具有不同数量的参数 双精度类型 然后将相应地调用每个函数 问题 1 现在 为了让使用此类的人更容易 我正在考虑允

  • 如何从 xml 节点查询值？

    我有一个包含 XML 列的表 CREATE TABLE Batches BatchID int RawXml xml 该 xml 包含以下项目

  • 调用未定义的方法 Goutte\Client::setClient()

    我被这个错误困住了 但客户端已定义 我的代码是这样的 use Goutte Client use Illuminate Http Request use GuzzleHttp Client as GuzzleClient class Web

  • 锁屏时如何获取音量键事件？

    Override public boolean dispatchKeyEvent KeyEvent event int action event getAction int keyCode event getKeyCode switch k

  • 协议中的 Swift 协议属性 - 候选者具有不匹配的类型

    我有一个协议 ProtocolA 其中包含符合第二个协议 ProtocolB 的单个属性 public protocol ProtocolA var prop ProtocolB get public protocol ProtocolB

  • 与嵌套的 Flexbox 网格作斗争

    我试图用基于负边距的网格系统 susy 实现类似网格的模式 但失败了 我尝试使用 Flexbox 但我不确定它是否真的可行 我认为最好的方法是 2 列 A 侧和 B 侧 并为框 1 提供框 2 的 50 的伸缩高度 但它不知何故似乎不起作用

热门标签