共计 364 个字符,预计需要花费 1 分钟才能阅读完成。
伸缩盒布局(css3)
1. 网页分类
1)固定内容宽度(wrapper width:1090px)淘宝,网易严选
2)内容宽度自适应(响应式)腾讯视频、爱奇艺
3)完全响应式 H5 网页【伸缩盒】微信打开的网页都属于完全响应式
一般应用于响应式布局
2. 概念
主轴:伸缩盒元素排列的轴
交叉轴:与主轴垂直的轴
伸缩盒元素沿着主轴排列,默认情况下,伸缩盒元素在交叉轴上的距离是 100%,在主轴的距离由内容决定
3. 应用
伸缩盒容器
display:flex; 声明当前元素为伸缩盒元素
flex-direction:row; 指定主轴方向
伸缩盒元素
flex-grow:1; 伸缩盒元素对于主轴上伸缩盒容器剩余空间的分配,1 表示占一份
flex-shrink:1; 对于亏损空间的抵扣
flex-basic:100px; 基准值
flex:grow shrink basic; 速写模式
正文完