<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
display: flex;
}
.div{
width: 300px;
border: 1px solid #f00;
/* 无宽度均分 */
/* flex:1; *//* 无宽度可以均分 */
/* flex: 0; *//* 无宽度不可以均分 */
/* flex:auto; *//* 无宽度不可以均分 内容决定宽度*/
/* flex: none; *//* 无宽度不可以均分 内容决定宽度 */
/* 有宽度均分 */
/* flex: 1; *//* 有宽度可以均分 */
/* flex: 0; *//* 有宽度不可以均分 */
/* flex: auto; *//* 有宽度可以均分 */
/* flex: none; *//* 有宽度不可以均分 内容不决定宽度 盒子宽度就是设定的宽度*/
/* 综上所述 1和auto的区别在于是否有宽度 没有宽度只有1可以均分*/
}
</style>
</head>
<body>
<div class="container">
<div class="div">我是一个div</div>
<div class="div">我是一个很多的字的div</div>
<div class="div">我是一个更多字而且是第三个div</div>
</div>
</body>
</html>