flex布局详细讲解CSS之flex实现两栏、三栏布局
先理解 flex:flex-grow flex-shrink flex-basis
flex-grow
⽤来分配剩余空间
flex-shrink
⽤来分配溢出空间
flex-basis
在前两个分配前使⽤,简单的说这个属性值可以理解为元素的 width 值;如果 flex-basis 和 width 其中有⼀个是 auto,那么另外⼀个⾮ auto 的属性优先级会更⾼。同时赋值时,flex-basis 的优先级更⾼
两栏布局
<body>
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
内容内容内容
</body>
查看解析
三栏布局
<div class="box">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
</div>
查看解析
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论