如何解决为什么我的伸缩行实际上没有显示为单独的行?
我试图获取flex容器的句柄(从这里Flexbox: center horizontally and vertically),以便在更大的DIV中创建单选按钮行及其文本。所以我有这些课程...
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
border: 1px solid blue;
}
.flex-item {
padding: 5px;
margin: 10px;
line-height: 20px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
}
并将其应用于这些项目...
<div class="flex-container">
<div class="row">
<div class="flex-item">
<img src="images/check.jpg" />
</div>
<div class="flex-item">
<input type="radio" id="radio0" name="choice" ><span>Text1</span>
</div>
</div>
<div class="row">
<div class="flex-item">
<img src="images/check.jpg" />
</div>
<div class="flex-item">
<input type="radio" id="radio1" name="choice" ><span>Text2</span>
</div>
</div>
...
<div class="row" id="feedback"></div>
<div class="row">
<input type="button" value="Submit" id="submitAnswer" />
</div>
</div>
但是奇怪的是,标有“ row”类的行没有显示为自己的行...
我还需要在flex容器中进行哪些调整,以使水平行显示在单独的行上?
解决方法
在回答您的评论后,我回答了如何使用第一个示例来连续获取3个元素,该示例基于您提出问题时发布的代码。我更新了答案以反映如何在两个示例中都做到这一点。首先,我保持非常非常简单。第二个我添加了一些JavaScript和样式,因此您有了指南,可以在构建自己的布局时参考。如果您需要任何其他更新,或者这与您想要的T不完全相同,请告知我,我将进行更新以反映出您问题的最佳答案。
- 2020年8月28日
抱歉,花了很长时间才回复您的芽。 在回答这个问题之前,我在flex上进行了一些搜索和阅读,并在CSS Flex属性上找到了一些w3c.org文档,该文档恰好与您所问的主题“如何以某种方式包装物品”有关,甚至还有一个示例会创建一种您想要的布局。
我认为W3C是唯一一个网站开发人员可以100%信任的网站。
要触摸您提供给我们的代码示例。您的代码是100%正确的,至少要达到所需的布局。这与代码中的错误无关,而与代码缺失或不相关的问题无关,它需要按顺序才能在浏览器中生成所需的布局,好消息是,只需要添加一行代码即可。您被一个CSS属性所吸引。 CSS属性“ Flex-Flow”未放置在样式表的flex-container类内。结果将该属性设置为其默认值“行”。将其更改为专栏后,它会产生您想要的结果,从而更改页面的整个布局。
- 这是您的flex容器类所缺少的:
flex-flow: column;
下面是两个示例,第一个是代码的外观,使用flex-flow属性对其进行清理和修复。第二个是简单的HTML / CSS文档对,由我将要使用的方式组成。我创建了一个示例,以一个以尽力而为的方式清晰地表达Web标准的方式发布了一个使用flex的示例。
.flex-container {
flex-flow: column;
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
display: flex;
flex-flow: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
width: 250px;
height: 50px;
margin: 4px;
padding: 12px;
border: 1px solid blue;
font-size: 20px;
font-weight: 800;
font-family: Verdana,sans-serif,sans-serif;
color: #048;
}
.row div.a {
width: auto;
}
.row div.b {
width: auto;
margin: 7%;
}
.row div.c {
display: flex;
width: auto;
}
i.fa-check {
display: inline-block;
color: #c33;
font-size: 48px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src="https://kit.fontawesome.com/3d9b68708a.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="flex-container">
<div class="row">
<div class="a"><i class="fas fa-check"></i></div>
<div class="b"><input type="radio" id="radio0" name="choice"></div>
<div class="c">SUM TEXT</div>
</div>
<div class="row">
<div class="a"><i class="fas fa-check"></i></div>
<div class="b"><input type="radio" id="radio0" name="choice"></div>
<div class="c">SUM TEXT</div>
</div>
<input type="button" value="Submit" id="submitAnswer" />
</div>
</body>
</html>
- 这是我个人要做的方式。通过使用@media查询来更改显示和弹性流属性,可以很容易地使这种方法响应。
function toggleCheck(id) {
if (document.getElementById('cbox-' + id).checked) {
document.getElementById('cm-' + id).style.display = 'inline';
} else if (!document.getElementById('cbox-' + id).checked) {
document.getElementById('cm-' + id).style.display = 'none';
}
}
function setCheck() {
toggleCheck('alpha');
toggleCheck('beta');
toggleCheck('gamma');
toggleCheck('delta');
}
window.onload = () => { setCheck(); };
/*______________________________________
* CSS DOCUMENT: STACKOVERFLOW_CSS
* DATE CREATED: 2020 - AUGUST - 28th
* CREATED BY: SO User,Aft3rL1f3
----------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
body {
width: 100vw;
margin: 0;
padding: 0;
background-color: #d4d4d4;
}
i.fa-check {
display: none;
color: #c33;
font-size: 42px;
}
input[type='submit'] {
width: 112px;
margin: 12px;
padding: 6px;
font-family: 'Lucida Sans Unicode' Arial,sans-serif;
font-weight: 600;
font-size: 19px;
color: #1fc;
border: 4px outset #1de;
background-color: #026;
border-radius: 7px;
}
form.flex-container {
display: flex;
flex-flow: column;
margin: 12px;
background: #f8f8e8;
border: 2px dotted #bbb;
align-items: center;
}
.flex-row {
display: flex;
flex-flow: nowrap;
margin: 2px 0;
padding: 8px;
background-color: #e0ffe0;
border: 1px dashed #bbb;
align-items: center;
}
.box {
display: flex;
flex-wrap: nowrap;
margin: 0 5px;
width: 200px;
padding: 12px 8px;
line-height: 40px;
text-align: center;
border: 1px solid #04a;
border-radius: 6px;
background-color: #e8e8ff;
color: #04a;
font-size: 26px;
font-family: 'Kalam',sans-serif;
font-weight: 600;
}
div.box .a {
height: 48px;
width: 30%;
margin: 0;
}
div.box .b {
height: 48px;
width: 20%;
margin: 0;
}
div.box .c {
height: 48px;
width: 50%;
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--
<-------------------------------------------~>
>> HTML DOCUMENT: STACKOVERFLOW_HTML
>> DATE CREATED: 2020 - AUGUST - 28th
>> UPDATED ON: 2020 - AUGUST - 29th
>> CREATED BY: SO User Aft3rL1f3
<-------------------------------------------->
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<script src="https://kit.fontawesome.com/3d9b68708a.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="/style/so.css">
</head>
<body>
<form class="flex-container" action="/process-form.php" method="post">
<div class="flex-row">
<!----( Box Alpha )---->
<div id='alpha' class="box">
<div class="a"><i id="cm-alpha" class="fas fa-check"></i></div>
<div onclick="toggleCheck('alpha')" class="b">
<input id="cbox-alpha" name="alpha" type="checkbox">
</div>
<div class="c"> ALPHA </div>
</div>
<!----( Box Beta )---->
<div id='beta' class="box">
<div class="a"><i id="cm-beta" class="fas fa-check"></i></div>
<div onclick="toggleCheck('beta')" class="b">
<input id="cbox-beta" name="beta" type="checkbox">
</div>
<div class="c"> BETA </div>
</div>
</div>
<div class="flex-row">
<!----( Box Gamma )---->
<div id='gamma' class="box">
<div class="a"><i id="cm-gamma" class="fas fa-check"></i></div>
<div onclick="toggleCheck('gamma')" class="b">
<input id="cbox-gamma" name="gamma" type="checkbox">
</div>
<div class="c"> GAMMA </div>
</div>
<!----( Box Delta )---->
<div id='delta' class="box">
<div class="a"><i id="cm-delta" class="fas fa-check"></i></div>
<div onclick="toggleCheck('delta')" class="b">
<input id="cbox-delta" name="delta" type="checkbox">
</div>
<div class="c">DELTA</div>
</div>
</div>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
,
能否提供所需输出的屏幕截图? 另外,我通过做几处更改就可以实现此结果,不确定是否是您想要的结果...但是我希望它可以对您有所帮助。
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
}
.flex-item {
margin: 10px 30px;
padding: 5px;
line-height: 36px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
align-items: center;
}
.flex-item img {
display: block;
margin: 0 auto;
}
.second-flex {
display: flex;
}
<div class="flex-container">
<div class="row">
<div class="flex-item">
<img src="https://picsum.photos/40" />
</div>
<div class="flex-item">
<input type="radio" id="radio0" name="choice"><span>Text1</span>
</div>
</div>
<div class="row second-flex">
<div class="flex-item">
<img src="https://picsum.photos/40" />
</div>
<div class="flex-item">
<input type="radio" id="radio1" name="choice"><span>Text2</span>
</div>
</div>
<div class="row">
<input type="button" value="Submit" id="submitAnswer" />
</div>
</div>
这是您要找的结果吗?如果没有,请提供一张图片,我会根据它调整代码。我会尽力帮助您。
要使它们出现在不同的行上,请为.flex-item
类提供以下属性。 display: flex;
flex-direction: column;
我将.flex-item
留在了**text2**
的位置,这样您就可以看到它们之间的区别。
PS:您可以下载名为Pesticide for Chrome
的扩展程序,它将为页面上的每个元素绘制一个轮廓,从而简化了设计。
**
已编辑
** 好的,那么您真的想要这些吗? 选项一:
CSS:
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.row {
width: auto;
}
.flex-item {
margin: 10px 30px;
padding: 5px;
line-height: 36px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
align-items: center;
}
.flex-item img {
display: block;
margin: 0 auto;
}
.second-flex {
display: flex;
}
HTML:
<div class="flex-container">
<div class="row">
<div class="flex-item">
<img src="assets/images/image.jpg" height="40" />
</div>
<div class="flex-item third-flex">
<input type="radio" id="radio0" name="choice"><span>Text1</span>
</div>
</div>
<div class="row second-flex">
<div class="flex-item">
<img src="assets/images/image.jpg" height="40" />
</div>
<div class="flex-item">
<input type="radio" id="radio1" name="choice"><span>Text2</span>
</div>
</div>
<div class="row">
<input type="button" value="Submit" id="submitAnswer" />
</div>
</div>
它与选项一具有相同的CSS。 HTML更改:
<div class="flex-container">
<div class="row second-flex">
<div class="flex-item">
<img src="assets/images/image.jpg" height="40" />
</div>
<div class="flex-item third-flex">
<input type="radio" id="radio0" name="choice"><span>Text1</span>
</div>
</div>
<div class="row second-flex">
<div class="flex-item">
<img src="assets/images/image.jpg" height="40" />
</div>
<div class="flex-item">
<input type="radio" id="radio1" name="choice"><span>Text2</span>
</div>
</div>
<div class="row">
<input type="button" value="Submit" id="submitAnswer" />
</div>
</div>
选项三:
此选项具有与选项2相同的HTML和CSS,但CSS稍有变化
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
/* flex-direction: column; remove this line */
}
选项四:
HTML:
<div class="flex-container">
<div class="row ">
<div class="flex-item">
<img src="assets/images/image.jpg" height="40" />
</div>
<div class="flex-item third-flex">
<input type="radio" id="radio0" name="choice"><span>Text1</span>
</div>
</div>
<div class="row ">
<div class="flex-item">
<img src="assets/images/image.jpg" height="40" />
</div>
<div class="flex-item">
<input type="radio" id="radio1" name="choice"><span>Text2</span>
</div>
</div>
<div class="row">
<input type="button" value="Submit" id="submitAnswer" />
</div>
</div>
CSS
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
width: auto;
}
.flex-item {
margin: 10px 30px;
padding: 5px;
line-height: 36px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
}
.flex-item img {
display: block;
margin: 0 auto;
}
.second-flex {
display: flex;
}
选项5:
HTML:
<div class="flex-container">
<div class="row ">
<div class="flex-item">
<img src="assets/images/image.jpg" height="40" />
</div>
<div class="flex-item third-flex">
<input type="radio" id="radio0" name="choice"><span>Text1</span>
</div>
</div>
<div class="row ">
<div class="flex-item">
<img src="assets/images/image.jpg" height="40" />
</div>
<div class="flex-item">
<input type="radio" id="radio1" name="choice"><span>Text2</span>
</div>
</div>
<div class="row">
<input type="button" value="Submit" id="submitAnswer" />
</div>
</div>
CSS:
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.row {
width: auto;
}
.flex-item {
margin: 10px 30px;
padding: 5px;
line-height: 36px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
}
.flex-item img {
display: block;
margin: 0 auto;
}
.second-flex {
display: flex;
}
,
我猜您希望每个选项占据一整行吗?如果没有,请发布有问题的预期布局。
如果是,则可以将flex-direction: column
添加到 flex-container
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
flex-direction: column;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.row {
display: flex;
width: auto;
border: 1px solid blue;
}
.flex-item {
padding: 5px;
margin: 10px;
line-height: 20px;
color: black;
font-weight: bold;
font-size: 2em;
text-align: center;
}
<div class="flex-container">
<div class="row">
<div class="flex-item">
<img src="images/check.jpg" />
</div>
<div class="flex-item">
<input type="radio" id="radio0" name="choice" ><span>Text1</span>
</div>
</div>
<div class="row">
<div class="flex-item">
<img src="images/check.jpg" />
</div>
<div class="flex-item">
<input type="radio" id="radio1" name="choice" ><span>Text2</span>
</div>
</div>
<div class="row" id="feedback"></div>
<div class="row">
<input type="button" value="Submit" id="submitAnswer" />
</div>
</div>
,
我认为您只是在容器上缺少wrap
。
弹性版式的初始设置为flex-wrap: nowrap
。这意味着弹性物品不会包装。他们将始终排成一行。
您可以使用flex-wrap: wrap
覆盖默认设置。
尝试这样的事情:
body {
display: flex;
justify-content: center;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.row {
flex-basis: 100%;
text-align: center;
border: 1px solid blue;
}
.flex-item {
padding: 5px;
margin: 10px;
font-weight: bold;
font-size: 2em;
}
<div class="flex-container">
<div class="row">
<div class="flex-item">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
</div>
<div class="flex-item">
<input type="radio" id="radio0" name="choice"><span>Text1</span>
</div>
</div>
<div class="row">
<div class="flex-item">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
</div>
<div class="flex-item">
<input type="radio" id="radio1" name="choice"><span>Text2</span>
</div>
</div>
<div class="row" id="feedback"></div>
<div class="row">
<input type="button" value="Submit" id="submitAnswer" />
</div>
</div>
更多信息:Force flex item to span full row width
,只需遵循以下步骤:
当您希望弹性项目占据整行时,将其设置为width: 100%或flex-basis:100%,并在容器上启用包装。
该物品现在消耗了所有可用空间。兄弟姐妹被迫 其他行。
来自以下问题/答案:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。