弹性盒大小不增加
Posted
技术标签:
【中文标题】弹性盒大小不增加【英文标题】：flex box size does not increase 【发布时间】：2016-03-29 09:20:25 【问题描述】：在下面的代码中，
<style type="text/css">
#header
height: 20px;
background-color: #2A646C;
width: 50%;
margin: auto;
#container
display:flex;
flex-wrap: wrap;
border: 2px solid red;
width: 50%;
margin: auto;
padding: 10px;
background-color: #C4D8E2;
#container1
border: 2px solid yellow;
width: 100%;
background-color: #C4D8E2;
#container1 p span
background-color: #C4D8E2;
color: #5D8AA8;
font-family: sans-serif;
font-size: 12px;
#container1 h3
background-color: #C4D8E2;
#container2
border: 2px solid blue;
width: 45%;
background-color: #C4D8E2;
margin-right: 8%;
display:flex;
flex-wrap: wrap;
#container2 form
width: 100%;
height: 100%;
#container2 p
width:100%;
#container2 span
font-weight: bold;
font-family: "Times New Roman";
font-size: 16px;
#container2 #span1
color: #5D8AA8;
margin-right: 5px;
#container2 #span2
color: #5072A7;
#container2 input[type=submit]
border: 1px solid black;
width: 25%;
height: 40%;
margin-left: 68%;
background-color: #C4D8E2;
#container3
border: 2px solid green;
width: 45%;
background-color: #5072A7;
color: white;
#container3 form
width: 100%;
height: 100%;
#container3 input[type=submit]
border: 2px solid orange;
background-color: #5072A7;
width: 25%;
height: 10%;
margin-left: 68%;
#container3:nth-child(10)
font-size: 14px;
#container3:nth-child(16)
display: inline-block;
font-size: 10px;
font-style: underline;
margin-left: 68%;
</style>
<div id="header"></div><br><br>
<div id="container">
<div id="container1">
<h3>Enter the system</h3>
<p><span>It is necessary to login in Your account in order to sign up for a course.</span></p>
</div>
<div id="container2">
<p><span id="span1">ARE YOU NEW?</span><span id="span2">REGISTER</span></p>
<form method="POST" action="javascript:void(0)" enctype="multipart/form-data">
<input type="text" name="username" required placeholder="User name" autocomplete="off"
pattern="^[A-Za-z0-9._-]6,10$" size="40" maxlength="10">
<br><br>
<input type="email" name="emailid" required placeholder="Email" autocomplete="off"
pattern="^[A-Za-z0-9 _.-]+@[A-Za-z.-]+\.[A-Za-z]3,4$" size="40" maxlength="30">
<br><br>
<input type="password" name="password" required placeholder="Password" autocomplete="off"
pattern="^[A-Za-z0-9 _.-]8,15$" size="40" maxlength="15">
<br><br>
<input type="password" name="confirmpassword" required placeholder="Confirm Password"
pattern="^[A-Za-z0-9 _.-]8,15$" size="40" maxlength="15" autocomplete="off">
<br><br>
<input type="submit" name="register" value="Register">
</form>
</div>
<div id="container3">
<form method="POST" action="javascript:void(0)" enctype="multipart/form-data">
<p><span class="span3">ALREADY A STUDENT?</span><span class="span4">LOGIN</span></p>
<br><br>
<input type="text" name="loginname" required placeholder="User name" autocompleter="off"
pattern="^[A-Za-z0-9._-]6,10$" size="40" maxlength="10">
<br><br>
<input type="password" name="loginpassword" required placeholder="Password" autocompleter="off"
pattern="^[A-Za-z0-9 _.-]8,15$" size="40" maxlength="15">
<br><br>
<input type="checkbox" name="remember" value="yes" id="remember"><label for="remember">Remember me?</label>
<br><br>
<input type="submit" name="login" value="Login" id="loginbutton">
<br>
<label>Forgotpassword?</label>
</form>
</div>
</div>
1) container2 或 container3 在包含其他元素后高度没有增加，为什么？
2) 如何使用nth-child 选择container3 的最后两个标签？
【问题讨论】：
【参考方案1】：1)
container2或container3包含其他元素后大小没有增加，为什么？
因为您将整个容器的宽度限制为width: 50%。
DEMO 1 （您的原始代码，未更改）
试试这个调整：
#container
display:flex;
flex-wrap: wrap;
border: 2px solid red;
min-width: 50%; /* adjusted */
margin: auto;
padding: 10px;
background-color: #C4D8E2;
DEMO 2
2) 如何使用 nth-child 来选取 container3 的最后两个标签？
#container3 > form > label:nth-last-of-type(1) font-weight: bold; color: red;
#container3 > form > label:nth-last-of-type(2) font-weight: bold; color: aqua;
DEMO 3
参考见：http://www.w3.org/TR/css3-selectors/#selectors
DEMO 2 的替代方案...
如果您不想更改整个 flex 容器的宽度限制，您可以将表单设置为 flex 容器，这会将表单元素限制在容器的边界内。
所以不是这个（如上所述）：
#container
display:flex;
flex-wrap: wrap;
border: 2px solid red;
min-width: 50%; /* adjusted */
margin: auto;
padding: 10px;
background-color: #C4D8E2;
试试这个：
#container2 form
width: 100%;
height: 100%;
display: flex; /* new */
flex-direction: column; /* new */
#container3 form
width: 100%;
height: 100%;
display: flex; /* new */
flex-direction: column; /* new */
DEMO 4
更新（基于 cmets 和修改后的问题）
使用DEMO 4，我们可以改进提交按钮的显示：
#container2 input[type=submit]
border: 1px solid black;
/* width: 25%; */
height: 40%;
/* margin-left: 68%; */
background-color: #C4D8E2;
/* new */
margin-left: auto;
margin-right: 5%;
width: 75px;
#container3 input[type=submit]
border: 2px solid orange;
background-color: #5072A7;
/* width: 25%; */
height: 10%;
/* margin-left: 68%; */
/* new */
margin-left: auto;
margin-right: 5%;
width: 75px;
DEMO 5
【讨论】：
我说的是container2 的高度而不是宽度。你看到注册按钮在container2外面了吗？
你好，你的demo4和demo5还在container2外面显示注册按钮
你用的是什么浏览器？在我这里的测试中，它都在容器中。
我正在使用 Firefox 45.0。在 chrome 47.0 中，标签不受您的更改的影响。这是我更改后的code
使用修改后的代码（在上面的评论中发布），而不是 height: 40% 用于 .container2 中的注册按钮，使用 height: 10%，就像在 .container3 中的登录按钮中一样。 DEMO。一个按钮有height: 40%，另一个按钮有height: 10%。这就是注册按钮更大的原因。【参考方案2】：
关于你的第二点......
总共有 2 个标签 所以你可以使用“nth-of-type” 请参阅我为标签指定颜色的代码。
#container3 label
background: #f0f none repeat scroll 0 0;
#container3 label:nth-of-type(1)
background: #ff0 none repeat scroll 0 0;
#container3 label:nth-of-type(2)
background: #f00 none repeat scroll 0 0;
【讨论】：
【参考方案3】：对于你的第一点......
将 BTN 高度放在 PX 中它会解决您的问题
#container2 input[type=submit]
border: 1px solid black;
width: 25%;
height: 40px;
margin-left: 68%;
background-color: #C4D8E2;
看到这个小提琴 https://jsfiddle.net/b4mdz048/ 加上最好的做法是为按钮添加填充更好
我会建议你使用 bootstrap 或其他 CSS 框架
【讨论】：
以上是关于弹性盒大小不增加的主要内容，如果未能解决你的问题，请参考以下文章
深入理解弹性盒布局（fiex-box）——Web前端系列自学笔记