首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用“对齐-内容:空格-环绕”行为展开框

使用“对齐-内容:空格-环绕”行为展开框
EN

Stack Overflow用户
提问于 2016-08-10 06:40:06
回答 1查看 28关注 0票数 0

我试图拥有与justify-content:space-around完全相同的行为,但我希望我的盒子可以扩展,而不是在盒子之间留出空格。

请注意,我不希望我的盒子具有相同的大小,但希望盒子之间的空间具有相同的大小。

这是所需行为的fiddle (框-蓝色-应该填满整个宽度)

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-08-10 06:47:56

flex-grow: 1添加到所有flex项。

这样,可用空间将在它们之间均匀分配。

代码语言:javascript
运行
复制
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;
}
代码语言:javascript
运行
复制
<div class="parent">
  <div class="child">this is a long text</div>
  <div class="child">2</div>
  <div class="child">3</div> 
</div>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38861552

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档