程序员经验分享-hwhale

Flexbox 列自身与底部对齐

2024-02-20

我正在尝试使用 Flexbox。http://css-tricks.com/almanac/properties/a/align-content/ http://css-tricks.com/almanac/properties/a/align-content/这显示了很好的对齐选项；但我实际上想要一个从上到下的情况。

我想要一个 div 使用 flexbox 粘在父 div 的底部。和flex-direction: column and align-content: Space-between我可以做到这一点，但中间的 div 将在中心对齐，我希望中间的 div 也粘在顶部。

[top]

[middle]

-

-

-

[bottom]

align-self: flex-end会让它向右浮动，而不是底部。

完整的弹性盒文档：http://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://css-tricks.com/snippets/css/a-guide-to-flexbox/


我参加聚会有点晚了，但可能与其他试图完成您应该能够做到的事情的人相关：

margin-top: auto

在有问题的元素上，它应该到底部。应该适用于 Firefox、Chrome 和 Safari。

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

css

flexbox

Flexbox 列自身与底部对齐 的相关文章

  • 表格内的垂直滚动条不显示：块

    有没有办法在里面有一个垂直滚动条 tbody 一张桌子并有display table放在桌子上但不使用display block桌子内的任何地方 对于滚动条部分 将其添加到要滚动的标签中 style overflow y scroll tb

  • border-box 不适用于内联块元素？

    我有一个清单inline block元素 我想为您将鼠标悬停在其上的元素添加边框 但是 请注意边框如何偏移元素 即使我使用box sizing border box并明确定义元素的宽度和高度 我说明了以下行为 box sizing bord

  • 上传时自动缩小 CSS 和 Javascript

    有谁知道通过上传处理 脚本自动运行某些文件类型的好方法 当我将 CSS 和 Javascript 上传到服务器时 我试图自动缩小它们 在本地保留一个漂亮的 人类可读的版本 同时在服务器上保留一个缩小的版本 我目前在 Windows 上使用

  • CSS - 制作“步进”文本的好方法？

    有没有一种好的方法可以实现以下目标 而无需任何额外的标记 不过使用 JavaScript 就很好了 任何想法 Thanks Edit 我的标记将是这样的 div style width 400px p Text text text Text

  • 仅 CSS 下拉菜单不像 iPad 等。跟随菜单链接而不显示菜单

    我们在这里创建了一个新网站 www worthingleisure co uk splashpoint 它的顶部有一个纯 CSS 菜单 通过使用 li hover ul 方法并适当显示和隐藏 该菜单应该适用于 iPad iPhone 和其他

  • 状态代码 304（Jade、Node、Express）

    我在我的 jade 文件中链接 bootstrap 和 jquery link rel stylesheet href stylesheets bootstrap css and script src javascripts jquery

  • 如何使用 jQuery 在第二次单击时反转 CSS 动画

    我制作了以下菜单图标 CSS 动画 当我点击它时会触发它 当我使用 jQuery 第二次单击它时 我想使其反向动画 path1 stroke dasharray 33px stroke dashoffset 33px animation l

  • 为什么 webkit 径向渐变在 Safari 中不起作用？

    这在 Chrome 中有效 但在 Safari 中无效 background webkit radial gradient center ellipse cover fdfdfd d3d3d3 我该如何修复 Safari 的问题 它甚至在

  • 从第三方网站为 iframe 设置 CSS

    我正在尝试设计风格snapwidget Instagram feed http snapwidget com getstarted 我想让边框变成白色 这不是小部件的设置 所以我尝试添加 css 看来我的 css 没有被检测到 因为内容位于

  • 使用 CSS3 反转进度条

    我有这个EXAMPLE http jsfiddle net Mils fmaGZ 1 我想将进度条反转 180 度 从右向左进行 要获得这样的东西 我试图改变过渡属性但没有结果 Code progress bar span display

  • 如何用按钮生成不同的颜色

    我是初学者 想知道如何使用生成按钮生成所有不同的颜色 我应该向按钮 addEventListener 的第二个参数添加什么 另外 如何让它在刷新时自动生成颜色而不是不生成颜色 var getcolors document querySele

  • 如何使 Flexbox 项目大小相同

    我想使用具有一些宽度相同的项目的 Flexbox 我注意到 Flexbox 均匀地分配空间 而不是空间本身 例如 header display flex item flex grow 1 text align center border 1

  • 如何限制 Chrome 中的最大文本区域宽度和高度或如何禁用文本区域调整大小

    Chrome 允许通过在右下角添加文本区域来调整文本区域的大小 但有时这种移动可能会破坏页面的设计 所以我想知道如何限制该操作的最大和最小宽度 即如何完全禁用该功能和thml javascript css在页面上 您可以使用 resize

  • 我可以为CSS写一个循环吗

    我有一个场景 我得到像这样生成的 ID div class containerLength div div div div div div div div div 等等 有没有办法我可以编写一些CSS来通过循环来定位它们 也许像 new i

  • 在设置后用 Javascript 替换 'var' css 属性

    我有一个元素 其上设置了 var 属性 如下所示 div class divwithbackground div CSS divwithbackground after background image var page header se

  • React 无法识别 DOM 元素上的 `isActive` 属性 - styled-components

    我有以下内容svg我传递道具的组件 import React from react export default props gt

  • 如何从左向右滑动文本和图像并具有滑动效果[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • minmax 失败（属性值无效）

    Chrome 给出了invalid property value并且不尊重CSS grid template columns repeat auto fill minmax auto 1fr 当auto被替换为min content and

  • 半流体布局 CSS/Html

    我有一个两列布局 其中右列的静态宽度为 350px 左列的宽度应填充页面的其余部分 或者至少这是我想要发生的事情 但不幸的是事实并非如此 看一下我的 css html http jsfiddle net CmJ7P http jsfiddl

  • Django - 渲染到字符串无法加载 CSS

    我正在尝试使用 Django 1 8 render to string 通过管理命令将 html 转换为 pdf 而不是使用 View request 以下代码可以将模板转换为 pdf 但它无法将 CSS 加载到模板中 def html t

随机推荐

  • MVC 应用程序调试时出错：视图状态 MAC 验证失败

    现在开始表单 第一次 当我开始调试 MVC 应用程序时 我收到此错误 视图状态 MAC 验证失败 如果 该应用程序由 Web 托管 农场或集群 确保 配置指定 相同的validationKey和validation 算法 无法使用自动生成

  • 如何使用 NHibernate 高效地进行 TDD？

    在我看来 大多数人在使用 NHibernate 时都会针对内存中 进程内数据库 例如 SQLite 编写测试 我已经启动并运行了它 但我的第一个测试 使用 NHibernate 总是需要 3 4 秒才能执行 下一个测试运行得更快 我使用 F

  • 是否有 gist.github.com 的内部替代方案可以在防火墙后面运行？

    gist github com 非常方便 但我希望能够运行类似的东西来与我工作的防火墙后面的其他开发人员在内部共享代码示例 因此我不需要一直清理我的代码 只讲代码示例 有这样的事情存在吗 我并不追求大型项目管理工具 只是一种制作一次性要点并

  • OpenShift 无法处理某些 Nodejs 依赖项 (Koa)

    我已经结账了如何在 Openshift 中设置 KoaJS https stackoverflow com questions 26924967 how to setup koajs in openshift但它仍然不起作用 这是我的一部分

  • Apache 作为 ubuntu 上的 root

    好的 我需要运行我的 Apache Web 服务器root 为此我输入了whoami 在终端 它给了我输出 root 但是当我通过执行以下 php 脚本检查我的 apache 服务器是否以 root 用户身份运行时 它给了我输出 nobod

  • 从终端安装 npm 错误

    我正在尝试在我的 mac 中安装节点 我收到以下错误 我从节点站点下载了节点并运行了该包 你们能告诉我为什么我会遇到这个错误 当我执行 npm install 时 MacBook Pro Raj npm install npm ERR in

  • Pickle 无法与 tkinter 一起使用

    我正在用 Tkinter 制作一个小游戏 它有一个使用 pickle 的保存功能 但是 当我尝试保存时 它会弹出以下消息 Exception in Tkinter callback Traceback most recent call la

  • 具有嵌套列表的 Terraform 动态块

    我需要使用 Terraform 在 Pagerduty 中创建升级策略 我想动态创建rule块 然后在其中target块的值来自rule 我不知道如何在目标块内进行第二次调用以使其动态 我有一个列表中的团队列表 locals teams d

  • React Native - 动态列出/需要目录中的文件

    我正在使用 Redux 并希望动态包含目录中的所有文件 redux index js Actions import as authActions from auth authActions import as deviceActions f

  • 如何从图像中仅提取字符？

    我有这种类型的图像 我只想从中提取字符 二值化后 我得到这个图像 img cv2 imread the image jpg gray cv2 cvtColor img cv2 COLOR BGR2GRAY thresh cv2 adapti

  • 如何在密度分布图的两端添加两个阴影

    如何在两端添加阴影 如下图所示 我想添加一端从 0 到 995 和 1 995 到 Inf 我在这里尝试了解决方案https stackoverflow com a 4371473 3133957 https stackoverflow c

  • 如何用 Python 构建提升图（又名增益图）？

    我刚刚使用 scikit learn 创建了一个模型 它可以估计客户对某些报价做出回应的可能性 现在我正在尝试评估我的模型 为此 我想绘制提升图 我理解 lift 的概念 但我很难理解如何在 python 中实际实现它 您可以使用sciki

  • NetLogo 以字符列表的形式读入文件

    我是 NetLogo 新手 我有一个包含一行值的文本文件 ABC CDC BBC 我试图读取该文件的第一行作为字符列表 例如 A B C 我一直在尝试使用文件读取行 但它创建了一个字符串 ABC observer gt file open

  • 如何开始程序生成？

    程序生成 http en wikipedia org wiki Procedural generation最近 由 Spore MMO 等 引起了人们的关注 它似乎是一种有趣 强大的编程技术 我的问题是 您知道有哪些使用程序生成技术的中型项

  • 在 ASP.NET WebApi 中测试路由配置

    我正在尝试对我的进行一些单元测试WebApi http www asp net web api路由配置 我想测试一下路线 api super 映射到Get 我的方法SuperController 我已经设置了以下测试 但遇到了一些问题 pu

  • 为复选框数组放置错误消息

    我正在使用 jQuery 的验证插件 它的效果非常好 除非我有一组复选框 错误消息将在第一个复选框之后显示 就像这样 tbody tbody

  • 在docker容器中运行djangoworker和daphne

    我有在 docker 容器中运行的 django 应用程序 最近我发现我需要向我的应用程序添加 websockets 接口 我在 nginx 和 redis 后面使用带有 daphne 的通道作为缓存 问题是我必须在 1 个容器中运行 dj

  • 转移可变借用的所有权

    我的理解是 可变借款人可以将所有权转移给另一个可变借款人 但这个移动似乎与移动非指针变量有点不同 让我们看一个例子 以下p1被转移到p2 when compute 被称为第一次 但所有权似乎又回到了p1 after compute 返回 f

  • 覆盖目标 Android Makefile 的命令

    我正在尝试使用 g 编译我的 Android ndk 项目中的模块之一 尽管源代码都是 C 语言 make 系统警告刺激了我的眼睛 C NVPACK android ndk r8d build core build binary mk 34

  • Flexbox 列自身与底部对齐

    我正在尝试使用 Flexbox http css tricks com almanac properties a align content http css tricks com almanac properties a align co

热门标签