CSS 弹性布局 flex 属性详解
CSS 弹性布局 flex 属性详解
一个会写诗的程序员
发布于 2018-08-17 11:45:53
发布于 2018-08-17 11:45:53
flex属性是flex-grow、flex-shrink和flex-basis三属性的简写总和。
1、flex-grow
定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例，如
<div class="wrap">
<div class="div" style="flex-grow:1"><h2>item 1</h2></div>
<div class="div" style="flex-grow:2"><h2>item 2</h2></div>
<div class="div" style="flex-grow:3"><h2>item 3</h2></div>
</div>即当有多余空间时item1、item2、和item3以1：2:3的比例放大。
2、flex-shrink
定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小，其可能的值为整数，表示不同item的缩小比例。
3、flex-basis
表示项目在主轴上占据的空间，默认值为auto。如下代码
<div class="wrap">
<div class="div" style="flex-basis:80px"><h2>item 1</h2></div>
<div class="div" style="flex-basis:160px"><h2>item 2</h2></div>
<div class="div" style="flex-basis:240px"><h2>item 3</h2></div>
</div>其效果图为
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.12.08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读