flex布局中的width
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flex布局中的width相关的知识，希望对你有一定的参考价值。
参考技术A flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。flex-grow定义对额外空间的占有量，默认0，即表示有多余的空间也不要。
当给最后一个box加上flex-box的类，即设置flex:1，则最后一个box会占据剩下空间，如果给每个box设置不同的flex值，则会按比例分配剩下的空间。
和flex-grow相反，即当各个元素所占空间之和大于容器时，压缩每个元素的比例，默认是1.如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
1.当设置box的flex-shrink为0时，即不论超出多少，都不压缩子元素的空间，如下图
2.当每个box设置flex-shrink为1时，即三个box压缩同样的比例，如下图
表示在分配额外空间之前，成员占据的空间，默认值为auto，意思就是你本来占多少就是多少。但也可以自己设置长度(px)。这个值的效果就是确定在释放和分配空间的时候，你的初值是多少,即flex items 在被放进一个flex容器之前的大小
flex：auto； 等同于 flex：1 1 auto; 意思就是占满额外空间，可缩放。
flex:none; 等同于flex：0 0 auto； 意思是不占额外空间，不可缩放。
Flex（骰子布局）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>骰子布局</title>
<style>
body {
margin: 10px 0 0 0;
display: flex;
justify-content: space-around;
}
body>div {
display: flex;
width: 100px;
height: 100px;
border-radius: 4px;
border: 2px solid red;
box-sizing: border-box;
}
p {
width: 15px;
height: 15px;
background-color: black;
border-radius: 50%;
margin: 2px;
}
.div1 {
justify-content: center;
align-items: center;
}
/*todo:请补全剩余骰子布局代码*/
.div2{
justify-content: space-around;
align-items: center;
flex-direction: column;
}
.div3{
justify-content: space-around;
}
.div3>p:nth-child(2){
align-self: center;
}
.div3>p:last-child{
align-self: flex-end;
}
.div4{
justify-content: space-around;
}
.div4>.col{
display: flex;
justify-content: space-around;
flex-direction: column;
}
.div5{
justify-content: space-around;
flex-direction: column;
}
.div5>.col{
display: flex;
justify-content: space-around;
}
.div6{
justify-content: space-around;
flex-direction: column;
}
.div6>.col{
display: flex;
justify-content: space-around;
}
.div7{
flex-direction: column;
justify-content: space-around;
}
.div7>.col{
display: flex;
justify-content: space-around;
}
.div8{
justify-content: space-around;
flex-direction: column;
}
.div8>.col{
display: flex;
justify-content: space-between;
/* flex-direction: column; */
}
.div9{
justify-content: space-around;
}
.div9>.col{
display: flex;
justify-content: space-around;
flex-direction: column;
}
</style>
</head>
<body>
<!--骰子1-->
<div class="div1">
<p></p>
</div>
<!--骰子2-->
<div class="div2">
<p></p>
<p></p>
</div>
<!--骰子3-->
<div class="div3">
<p></p>
<p></p>
<p></p>
</div>
<!--骰子4-->
<div class="div4">
<div class="col">
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
</div>
</div>
<!--骰子5-->
<div class="div5">
<div class="col">
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
</div>
</div>
<!--骰子6-->
<div class="div6">
<div class="col">
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
</div>
</div>
<!--骰子7-->
<div class="div7">
<div class="col">
<p></p>
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
<p></p>
</div>
</div>
<!--骰子8-->
<div class="div8">
<div class="col">
<p></p>
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
<p></p>
</div>
</div>
<!--骰子9-->
<div class="div9">
<div class="col">
<p></p>
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
<p></p>
</div>
<div class="col">
<p></p>
<p></p>
<p></p>
</div>
</div>
</body>
</html>
以上是关于flex布局中的width的主要内容，如果未能解决你的问题，请参考以下文章