flex布局--flex-grow、flex-shrink、fl
2019-10-21 本文已影响0人
手指乐
- flex-grow
flex-grow 只有在 flex 容器中有剩余空间时才会生效。flex 项的 flex-grow 属性指定该 flex 项相对于其他 flex 项将拉伸多少，以填充 flex 容器。默认值为1。当设置为 0 时，该 flex 项将不会被拉伸去填补剩余空间。在这个例子中，两个项的比例是 1:2，意思是在被拉伸时，第一个 flex 项将占用剩余空间的 1/3，而第二个 flex 项将占据剩余空间的2/3。(如果item不定义flex-grow，也不定义宽度，则item宽度由内容决定)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.flex-container {
display: flex;
width: 180px;
padding: 10px;
background-color: #F0f0f0;
}
.flex-item1 {
flex-grow: 0;
}
.flex-item2 {
flex-grow: 1;
}
.flex-item3 {
flex-grow: 2;
}
.flex-container .flex-item {
padding: 20px 0;
text-align: center;
width: 30px;
background-color: #B1FF84;
}
.flex-container .flex-item:first-child {
background-color: #F5DE25;
}
.flex-container .flex-item:last-child {
background-color: #90D9F7;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item flex-item1">1</div>
<div class="flex-item flex-item2">2</div>
<div class="flex-item flex-item3">3</div>
</div>
</div>
</body>
</html>
上例中，item的宽度即使不定义，item2和item3也会拉升，item1宽度由内容决定
- flex-basis
flex-basis属性定义了项目占据的主轴空间。浏览器根据这个属性，计算主轴多余空间或不足空间的大小。它的默认值为auto，即项目的本来大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flesbox</title>
<style>
.wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
background-color: red;
}
.item {
background-color: pink;
margin: 10px;
}
body {
padding: 2em;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item item1">item1</div>
<div class="item item2">item1</div>
</div>
</body>
</html>
容器宽度默认充满父元素
flex-grow默认是0（不会拉升填充剩余空间），这样每个item的默认宽度是由内容决定
效果图如下：
设置item的宽度，让其超过容器，由于设置了flex-flow: row wrap;这时候会换行
.item {
background-color: pink;
margin: 10px;
width: 80%;
}
如果同时设置了width和flex-basis,以flex-basis为准
.item {
background-color: pink;
margin: 10px;
width: 80%;
flex-basis: 100px;
}
相当于：
.item {
background-color: pink;
margin: 10px;
width: 100px;
}
如果flex-basis设置为auto，则item的宽度取width的值
.item {
background-color: pink;
margin: 10px;
width: 80%;
flex-basis: auto;
}
和
.item {
background-color: pink;
margin: 10px;
width: 80%;
}
是一个意思
max-width/min-width不会因为flex-basis失效
.item {
background-color: pink;
margin: 10px;
flex-basis: 800px;
max-width: 100px;
}
item的宽度不会大于100px
- flex-shrink
任何情况下，item都会被container包裹，不会超过，如果container空间不够，item会自动压缩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.flex-container {
display: flex;
width: 50px;
}
/* 以下为辅助样式 */
.flex-container {
background-color: #F0f0f0;
}
.flex-container .flex-item {
width: 50px;
text-align: center;
background-color: #B1FF84;
}
.flex-container .flex-item:first-child {
background-color: #F5DE25;
}
.flex-container .flex-item:last-child {
background-color: #90D9F7;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>
</body>
</html>
上例中item的宽度会缩小到25px
之所以会自动压缩，是因为flex-shrink的默认值是1，容器宽度不够容纳所有item时，flex-shrink规定了item缩短的比例，默认是平均缩短
- flex-grow、flex-shrink都是优先保证其定义的宽度，有剩余或不够时，把剩余或不够的部分按指定的比例分配
比如这个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
width: 100%;
height: 100px;
display: flex;
margin: 10px;
}
#left,
#right {
flex-basis: 400px;/* 或width:200px */
height: 100px;
margin: 10px;
background-color: #999;
}
#center {
flex-grow: 1;
height: 100px;
margin: 10px;
background-color: #f00;
}
</style>
</head>
<body>
<div id="box">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
</body>
</html>
缩小时，开始左右两侧div固定为400px，逐渐压缩中间的div，中间的div只够容纳其内容，无法再压缩时，再压缩左右两侧div
拉升时，左右两侧从小于400px逐渐拉升到400px后保持400px ，再拉升则剩余的空间都加到中间div上
可以把box的min-width限定为1000px，以使其足够容纳左右各400px的固定长度，这样左右两个div长度就不会变化了，浏览器缩小到不够显示时会出现滚动条
#box {
min-width: 1000px;
height: 100px;
display: flex;
margin: 10px;
}
- flex 是 flex-grow、flex-shrink、flex-basis的缩写，
flex-grow默认值是0，flex-shrink默认值是1，flex-basis是auto（item宽度）
所以flex 的默认值是 0 1 auto
