flex

<style>

main

{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}

main div

{
flex:1;
}
</style>
</head>
<body>

<div id="main">
<div style="background-color:coral;">红色</div>
<div style="background-color:lightblue;">蓝色</div>
<div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>

flex-grow
一个数字,规定项目将相对于其他灵活的项目进行扩展的量。

flex-shrink
一个数字,规定项目将相对于其他灵活的项目进行收缩的量。

flex-basis
项目的长度。合法值:"auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。

auto
与 1 1 auto 相同。

none
与 0 0 auto 相同。

initial
设置该属性为它的默认值,即为 0 1 auto。请参阅 initial

inherit
从父元素继承该属性。请参阅 inherit

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexib...
    鹿守心畔光阅读 1,273评论 1 9
  • 在以前页面布局多依赖于table,但table标签太多,于是有了absolute布局,float布局等,但它们小问...
    张歆琳阅读 4,176评论 3 55
  • 应用在父元素上-flex box 1.模型 方向 换行 display: flex(盒子模型) 定义父元素为fle...
    林立镇阅读 3,412评论 0 27
  • 建议大家看完阮一峰老师的Flex 布局教程:语法篇再看这篇文章;另:本文中的思维导图使用新建标签页的方式打开才能看...
    该帐号已被查封_才怪阅读 6,015评论 2 51
  • 传统的网页布局基于盒装模型,使用display,position,float属性来达成各种布局。对于一些特殊的布局...
    exialym阅读 2,653评论 0 11