一、伸缩盒布局( Flexbox )
【CSS3 弹性盒,是一种当页面需要适应不同的屏幕大 小以及设备类型时确保元素拥有恰当的行为的布局方式。】
- 三列布局(一行中有3列)
【修饰后,三列在一行中显示,高度相等,宽度动态调整,当调整浏览器宽度的时候,每 一列的宽度会动态调整。】
例如:【flex设定在子元素上,用来设置在主轴上的大小 占容器剩余空间的比例 每个项目占一份,也就是每个项目占三分之一】
<style>
/* 实现三列布局 */
.container{
display: flex;
border: 1px solid blue;
height: 200px;
}
.item{
flex: 1;
}
.one{
background-color: pink;
flex: 2;
}
.two{
background-