如何使Flexbox甚至开始工作？它什么都不做
我无法让Flexbox上班。我尝试了各种CSS属性，但它不想使用。 display-flex似乎根本没有对页面做任何事情。我尝试了各种标签，例如flex方向：列和text-align：中心，但没有任何可行。 Flexbox为什么不做任何事情？
预期结果：
我当前的结果： https：//replit.com/@elliotsfinal/what to-to-studyy# index.html
我的HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class=flex-container>
<h3>WHAT TO STUDY</h3>
<h1>What are your interests?</h2>
<fieldset>
<legend>Pick one from this list</legend>
<div>
<input type="radio" id="data" name="list-1" value="data"
checked>
<label for="data">data</label>
</div>
<div>
<input type="radio" id="math" name="list-1" value="math">
<label for="math">mathy</label>
</div>
<div>
<input type="radio" id="theory" name="list-1" value="theory">
<label for="theory">theory</label>
</div>
</fieldset>
<fieldset>
<legend>And one from this list</legend>
<div>
<input type="radio" id="people" name="list-2" value="people"
checked>
<label for="people">people</label>
</div>
<div>
<input type="radio" id="problem solving" name="list-2" value="problem solving">
<label for="problem solving">problem-solving</label>
</div>
<div>
<input type="radio" id="art" name="list-2" value="art">
<label for="art">art</label>
</div>
</fieldset>
<script src="script.js"></script>
</div>
</body>
<footer>
<P>Please select one choice in each list</P>
</footer>
</div>
</html>
我的CSS：
html, body {
height: 100%;
width: 100%;
}
.flex-container {
font-family: Arial, Helvetica, sans-serif;
display: flex
flex-direction: column
background-color: DodgerBlue
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.list-1 {
}
.list-2 {
}
I cannot get flexbox to work. I've tried all sorts of CSS properties, but it doesn't want to work. display-flex doesn't seem to do anything to the page at all. I tried various tags, like flex-direction:column, and text-align: center, but nothing works. Why won't flexbox do anything?
Expected result:
My current result:
https://replit.com/@elliotsFinal/what-to-study#index.html
My HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class=flex-container>
<h3>WHAT TO STUDY</h3>
<h1>What are your interests?</h2>
<fieldset>
<legend>Pick one from this list</legend>
<div>
<input type="radio" id="data" name="list-1" value="data"
checked>
<label for="data">data</label>
</div>
<div>
<input type="radio" id="math" name="list-1" value="math">
<label for="math">mathy</label>
</div>
<div>
<input type="radio" id="theory" name="list-1" value="theory">
<label for="theory">theory</label>
</div>
</fieldset>
<fieldset>
<legend>And one from this list</legend>
<div>
<input type="radio" id="people" name="list-2" value="people"
checked>
<label for="people">people</label>
</div>
<div>
<input type="radio" id="problem solving" name="list-2" value="problem solving">
<label for="problem solving">problem-solving</label>
</div>
<div>
<input type="radio" id="art" name="list-2" value="art">
<label for="art">art</label>
</div>
</fieldset>
<script src="script.js"></script>
</div>
</body>
<footer>
<P>Please select one choice in each list</P>
</footer>
</div>
</html>
My CSS:
html, body {
height: 100%;
width: 100%;
}
.flex-container {
font-family: Arial, Helvetica, sans-serif;
display: flex
flex-direction: column
background-color: DodgerBlue
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.list-1 {
}
.list-2 {
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这里有各种各样的问题。
＆lt; div class = flex-container＆gt;应该是＆lt; div class =“ flex-container”＆gt;。.flex-Container＆gt; div是指“目标divs是.flex -container的直接子女”，但是您的容器的直接孩子是标题和野外设备。与您的问题无关，而是您的兴趣是什么？
There's various issues here.
<div class=flex-container>should be<div class="flex-container">..flex-container > divmeans "target DIVs that are direct children of .flex-container", but your container's direct children are headings and fieldsets.Not related to your issue, but
<h1>What are your interests?</h2>is invalid markup - make sure your opening and closing tags match.我希望这会有所帮助： https://replit.com/redleplit.com/@matijajanji/what what what what what what what what what what - 研究＃style.css
除了Geat的问题外，您还针对Flex属性的错误元素。在上面的示例中，我要定位所有具有字段集作为父的DIV。我不确定这是您所追求的。
I hope this helps: https://replit.com/@MatijaJanji/what-to-study#style.css
Besides the issues by geat, you're targeting the wrong element with the flex property. In the example above, I'm targeting all the divs that have fieldset as the parent. I'm not sure if that's what you were after.
您的代码中有很多错误和遗漏需要纠正：
css
.flex-container＆lt; div; div; div＆gt;内部需要是 flexbox parent 。.flex-container=＆gt;两个缺失的半彩.flex-container＆gt; div=＆gt;应为.flex-container＆gt; fieldSet＆gt; div.list-1，.list-2=＆gt;应该是[name =“ list-1”]和[name =“ list-2”]，因为您不使用HTML标签中的类。html
＆lt;/body＆gt;＆lt;/div＆gt;＆lt; div class = flex-container＆gt;应为＆lt; div class =“ flex-container”＆gt;＆lt; h1＆gt;您的兴趣是什么？＆lt;/h2＆gt;＆lt; h3＆gt;和＆lt; h1＆gt;应该在＆lt; div class =“。其中的一部分。语义（a11y =可访问性）
＆lt; h3＆gt;and＆lt; h1＆gt;=＆gt;应该是＆lt; div＆gt;，具有不同的字体设置在下图中您将在带有一些注释的校正代码中找到校正的代码。我做的不是甚至提供类似于“响应设计”的东西，也没有尝试创建最终设计，而是要实现它。
You have quite a few errors and omissions in your code that need to be corrected:
CSS
.flex-containerparent for the<div>inside..flex-container=> two missing semi-colons.flex-container > div=> should be.flex-container > fieldset > div.list-1,.list-2=> should be[name="list-1"]and[name="list-2"]as you don't use the classes in your HTML tags.HTML
</body></div><div class=flex-container>should be<div class="flex-container"><h1>What are your interests?</h2><h3>and<h1>should come before the<div class=".flex-container">, not be a part of it.Semantics (a11y = accessibility)
<h3>and<h1>=> should be<div>with different font settingsIn below snippet you will find the corrected code with some comments. I did not provide anything even resembling 'responsive design' nor did I attempt to create the final design, leaving it up to you to implement.