宽度属性 - flex布局 [英] width property - flex layout
本文介绍了宽度属性 - flex布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
对于下面的代码给定宽度为 33.3333333333％，如果我在代码中将flex-wrap更改为nowrap，那么我如何计算宽度？
.box {color：white; font-size：100px; text-align：center; text-shadow：4px 4px 0 rgba（0，0，0，0，1）;}。box1 {background：＃1abc9c; } .box2 {background：＃3498db; } .box3 {background：＃9b59b6; } .box4 {background：＃34495e; } .box5 {background：＃f1c40f; } .box6 {background：＃e67e22; } .box7 {background：＃e74c3c; } .box8 {background：＃bdc3c7; } .box9 {background：＃2ecc71; } .box10 {background：＃16ae85; （容器） - 开始* / *包装柔性项目* /。container {display：flex; border：1px solid goldrod;高度：100vh;弯曲缠绕：包裹; /* 默认值。 * / / * flex-wrap：nowrap; * /} / * flex（父容器）的属性 - 结束* /。box {width：33.3333333333％;}
<！doctype html>< html> < HEAD> < meta charset =UTF-8> < title>样本文件< / title> < link rel =stylesheethref =style.css> < /头> <身体GT; < div class =container> < div class =box box1> 1< / div> < div class =box box2> 2< / div> < div class =box box3> 3< / div> < div class =box box4> 4< / div> < div class =box box5> 5< / div> < div class =box box6> 6< / div> < div class =box box7> 7< / div> < div class =box box8> 8< / div> < div class =box box9> 9< / div> < div class =box box10> 10< / div> < / DIV> < / body>< / html>
解决方案在这种情况下，所有的弹性项目都有相同的宽度，他们会一样缩小，直到他们的内容停止。
flex-shrink 默认为 1 。
以 min-width 默认为 auto 来停止它们的内容宽度，从而防止项目小于其内容。
$ b 可以通过设置 min-width 到 0来覆盖在弹性项目上
堆栈片段
.box {color：white; font-size：100px; text-align：center; text-shadow：4px 4px 0 rgba（0，0，0，0，1）;}。box1 {background：＃1abc9c; } .box2 {background：＃3498db; } .box3 {background：＃9b59b6; } .box4 {background：＃34495e; } .box5 {background：＃f1c40f; } .box6 {background：＃e67e22; } .box7 {background：＃e74c3c; } .box8 {background：＃bdc3c7; } .box9 {background：＃2ecc71; } .box10 {background：＃16ae85; （容器） - 开始* / *包装柔性项目* /。container {display：flex; border：1px solid goldrod;高度：100vh;弯曲缠绕：包裹; /* 默认值。 * / flex-wrap：nowrap;} / *父容器的flex属性 - 结束* /。box {width：33.3333333333％; overflow：hidden;}
< div class =container > < div class =box box1> 1< / div> < div class =box box2> 2< / div> < div class =box box3> 3< / div> < div class =box box4> 4< / div> < div class =box box5> 5< / div> < div class =box box6> 6< / div> < div class =box box7> 7< / div> < div class =box box8> 8< / div> < div class =box box9> 9< / div> < div class =box box10> 10< / div>< / div>
b
For below code given width as 33.3333333333%, if I change flex-wrap to nowrap in the code, then how would I calculate width ?
.box{
color: white;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0, 1);
}
.box1{ background: #1abc9c; }
.box2{ background: #3498db; }
.box3{ background: #9b59b6; }
.box4{ background: #34495e; }
.box5{ background: #f1c40f; }
.box6{ background: #e67e22; }
.box7{ background: #e74c3c; }
.box8{ background: #bdc3c7; }
.box9{ background: #2ecc71; }
.box10{ background: #16ae85; }
/* flex property for parent(container) - start */
/* Wrapping flex items */
.container{
display: flex;
border: 1px solid goldenrod;
height:100vh;
flex-wrap:wrap; /* default value. */
/*flex-wrap: nowrap; */
}
/* flex property for parent(container) - end */
.box{
width: 33.3333333333%;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = "container">
<div class = "box box1">1</div>
<div class = "box box2">2</div>
<div class = "box box3">3</div>
<div class = "box box4">4</div>
<div class = "box box5">5</div>
<div class = "box box6">6</div>
<div class = "box box7">7</div>
<div class = "box box8">8</div>
<div class = "box box9">9</div>
<div class = "box box10">10</div>
</div>
</body>
</html>
解决方案
I this case, and as all flex items share the same width, they will shrink equally until their content stops them.
They do shrink equal as flex-shrink defaults to 1.
They stop at their content width as min-width defaults to auto, which prevent an item to be smaller than its content.
That can be overridden by either set min-width to 0, or overflow: hidden on the flex items
Stack snippet
.box{
color: white;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0, 1);
}
.box1{ background: #1abc9c; }
.box2{ background: #3498db; }
.box3{ background: #9b59b6; }
.box4{ background: #34495e; }
.box5{ background: #f1c40f; }
.box6{ background: #e67e22; }
.box7{ background: #e74c3c; }
.box8{ background: #bdc3c7; }
.box9{ background: #2ecc71; }
.box10{ background: #16ae85; }
/* flex property for parent(container) - start */
/* Wrapping flex items */
.container{
display: flex;
border: 1px solid goldenrod;
height:100vh;
flex-wrap:wrap; /* default value. */
flex-wrap: nowrap;
}
/* flex property for parent(container) - end */
.box{
width: 33.3333333333%;
overflow: hidden;
}
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
</div>
这篇关于宽度属性 - flex布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
