我试图获得与justify-content:space-around
完全相同的行为,但不是在框之间有空格,我希望我的框展开。
请注意,我不希望我的盒子尺寸相同,但希望盒子之间的空间大小相同。
这是所需行为的fiddle(方框 - 蓝色 - 应填充整个宽度)
答案 0 :(得分:1)
将 .when('/', {
templateUrl : "view1/app.html",
controller : 'MediaController'
})
.when('/app', {
templateUrl : "view1/app.html",
controller : 'MediaController'
})
.when('/app/article', {
templateUrl : 'view2/article.html',
controller : 'MediaController'
});
.otherwise({
redirectTo: "/"
});
添加到所有弹性项目。
这样,可用空间将在它们之间平均分配。
flex-grow: 1

body {
padding: 50px;
}
.parent {
background: hsl(0,0%,90%);
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
-ms-justify-content: space-around;
-o-justify-content: space-around;
justify-content: space-around;
}
.child {
background-color:blue;
border: 1px solid hsl(0,0%,60%);
padding: 20px;
flex-grow: 1;
}