您的位置：首页 > Web前端 > CSS

flex中元素的width

2016-09-22 15:22 204 查看
这里，我们要用flex实现这样一个小功能，即左边的div固定宽度为90px,右边的div占满余下的宽度。先看下代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title></title>
</head>
<body>
<div class="flex-container">
<div class="div1">
</div>
<div class="div2">
</div>
</div>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.flex-container{
display: flex;
height: 100px;
}
.div1{
width: 90px;
background-color: green;
}
.div2{
width: 100%;
background-color: red;
}
</style>

</body>
</html>
但是我们发现这里div1并未如我们所想的那样是90px。这里需要就引出了flex这个属性。flex属性是一个复合属性。这有3个参数: flex: flex-grow flex-shrink flex-basis; flex-grow表示是否会自动增大，1为是，0为否，默认1. flex-shrink表示是否自动缩小，1为是，0为否，默认1. flex-basis：宽度px/百分比/数字。此处我们将div1设为flex: 0 0 90px.即可，div2的width: 100%是不必要的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  flex css3 min-width
相关文章推荐
新的分享
章节导航