个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
其用例是带有单选按钮的响应式表单。当在大 PC 屏幕上时，所有单选按钮通常都在屏幕上的一行中(就像带有 flex-direction: row 的非包装 flex 容器中的 flex 元素)。在电话上，并非所有单选按钮通常都适合在一条线上。如果任何一个单选按钮不适合，我希望它们每行显示一个(就像 flex 容器中的 flex 元素 flex-direction: column )。
如果我知道单选按钮标签的长度，这将很容易，但我不知道(它们来自客户端可配置的数据库)。
所以我想要的是这样的:
<html>
<head>
<title>Responsive Radio Button</title>
<style type="text/css">
@media (min-width: 652px) {
.flexContainer {
display:flex;
flex-direction: row;
}
}
@media (max-width: 652px) {
.flexContainer {
display:flex;
flex-direction: column;
}
}
</style>
</head>
<body>
<div class='flexContainer'>
<div>Medium Length div</div>
<div>Short div</div>
<div>Longest div in this entire html page!</div>
</div>
</div>
</body>
</html>
@media (min-width: /max-width:)断点是。
<html>
<head>
<title>Responsive Radio Button</title>
<style type="text/css">
.flexContainer {
display: flex;
flex-wrap: wrap;
justify-content:stretch;
/** border so I can see what is going on */
border: 1px dotted lightblue;
}
.flexItem {
/** white-space and min-width stop text wrapping */
white-space: nowrap;
min-width: max-content;
/** next three lines could be shortened to flex: 1 0 0px; (grow shrink basis) */
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
/** border and margin so I can see what is going on */
border: 1px solid black;
margin: 2px;
}
</style>
</head>
<body>
<div class='flexContainer'>
<div class='flexItem'>Medium Length div</div>
<div class='flexItem'>Short div</div>
<div class='flexItem'>Short div</div>
<div class='flexItem'>Short div</div>
<div class='flexItem'>Longest div in this entire html page!</div>
</div>
</div>
</body>
</html>
flex-basis: largest-sibling ，我的意思是最小的 flex-item 与最大的 flex-item 大小相同，并且永远不会小于最大的 flex-item。
最佳答案
这是我从你的编码中得到的。看看对你有没有帮助
<html>
<head>
<title>Responsive Radio Button</title>
<style type="text/css">
.flexContainer {
display: flex;
flex-wrap: wrap;
justify-content:stretch;
/** border so I can see what is going on */
border: 1px dotted lightblue;
}
.flexItem {
/** white-space and min-width stop text wrapping */
white-space: nowrap;
min-width: max-content;
/** next three lines could be shortened to flex: 1 0 0px; (grow shrink basis) */
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
/** border and margin so I can see what is going on */
border: 1px solid black;
margin: 2px;
}
@media only screen and (max-width: 600px) {
.flexContainer {
flex-flow: column;
}
}
</style>
</head>
<body>
<div class='flexContainer'>
<div class='flexItem'>Medium Length div</div>
<div class='flexItem'>Short div</div>
<div class='flexItem'>Short div</div>
<div class='flexItem'>Short div</div>
<div class='flexItem'>Longest div in this entire html page!</div>
</div>
</div>
</body>
</html>
关于html - 使所有 flex-items 环绕(如 flex-direction : column) when any one flex-item too wide for flex-container，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60518568/
28
4
0
我正在学习 ada 并且我正在尝试为枚举实现附加重载。 基本上我希望能够向 Day 类型添加一个 Integer 并获得生成的 Day 值。所以星期一 + 2 => 星期三。 这是我的简化代码: pr
Pycharm 具有“包围”代码片段的功能。有一些已经设置好的功能: 我想添加print()(使用python3)，我该怎么做？ 最佳答案 AFAIU，您可以为此定义自己的“实时”模板。 定义实时模板
例。我有一个包含15个对象的数组。我想从给定的索引开始枚举。假设从索引5开始，然后是上方的索引，下方，上方，下方等的索引...我确实希望它绕起来。 因此，在我的示例中，索引的顺序将是这样。 5、6、4
我需要帮助创建 UIPickerView 来环绕选项。因此，选择器不是这样的: 我希望它看起来像这样(没有“min”): 我到处找，但找不到用 Swift 2.0 实现的方法谢谢! 最佳答案 以下是有
如何让 UITextView 将其文本包裹在 UIImage 周围，如下图所示？ 图像大小不一定是事先已知的。 最佳答案 IOS 7 及以上版本: UIBezierPath * imgRect = [
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: UIScrollView. Any thoughts on implementing “infinite” scro
我像这样创建纹理: this->width = width; this->height = height; glGenFramebuffers(1, &framebuffer); glBindFram
在编码和模板化中，我经常需要换行文本的特定部分。是否有任何快捷方式可以包装当前选择，例如: Hello World "Hello World" Hello World {{ trans 'Hello
我正在做一个项目，我们有一些从数据库中填充的 Highcharts 图表；其中之一是散点图，我们需要包围放置在图表外部区域的点。 我们需要像 this 这样的图表但是我们需要散点图外部点周围的区域；使
我有一个 500 像素高和 50 像素宽的 jpg。它由 10 个 50px x 50px 的正方形组成，每个正方形包含一个从 1 到 10 的数字(1 在图像顶部，10 在底部)。 (jpg 在这里
我正在尝试为那些了解它的人创建一个类似 Microsoft Project 的元素控件。 我有一个Container Div，然后有两个子容器如下: 每个子容器都有很多内部 div，例如，我的第一个子
我有 4 个 div，一个我想向左浮动，视频播放器(加载了 jquery)，另一个包含一些将向右浮动的帮助/提示文本。这两个应该排在顶部。在视频播放器下方将是一个 div 内的表格。 当有人点击表格中
这个问题在这里已经有了答案: Proper use of flex properties when nesting flex containers (1 个回答) 关闭 4 年前。
我在使用自定义列表图像时遇到问题/其中图标隐藏在列表环绕的 float 元素后面。 http://jsfiddle.net/V8evM/ HTML This is list item n
是否可以将 textview 环绕在 textview 周围，第二个 textview 将环绕到第一个 textview 下的下一行？ 例如: 我尝试过使用 android:layout_weig
图片最能说明问题: 它只是一个 float: left 图像 ( http://jsbin.com/itihes/1 )。有什么方法可以防止纯 CSS 中的动态文本出现这个问题吗？我确实希望文本换行，
我在 C 规范中读到一点，无符号变量(特别是 unsigned short int)在整数溢出时执行一些所谓的环绕 ，尽管我在带符号的变量上找不到任何东西，除了我留下了未定义的行为。 我的教授告诉我，
如果您想要容器底部的 div，如何让文本环绕 div？ 我可以弄清楚如何让文本环绕在 div 上，只要它在顶部，但如果我尝试将它推到页面底部，文本要么不会'不要继续跨越 div 的顶部，否则 div
假设数组的长度为 1000。我正在尝试创建一种简单的方法来遍历存储在数组中的图像路径而不会越界。当涉及到单击“下一步”按钮以增加数组索引时，下面的方法使用模数很好地处理了环绕，但当我必须减少并从索引中
假设我的光标在单词 word 内.使用 vim-surround，输入序列 ysiw*将替换 word与 *word* . 问题:是否有我可以输入的单个序列来代替生成 **word** (即，单词加粗
我是一名优秀的程序员,十分优秀！