17年写过圣杯布局和双飞翼布局,时间一长没写过pc端吧 又忘却了
整理下三栏布局方案
1 | <div class="container"> |
2.flex布局
1 | <div class="container"> |
flex属性是flex-grow, flex-shrink 和 flex-basis的简写
flex-grow:flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
flex-shrink:flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-basis:属性定义了在分配多余空间之前,项目占据的主轴空间(main size)
3.圣杯布局
负边距
1 | <div class="container"> |
4.双飞翼布局
1 | <div class="content"> |
5.绝对定位布局