8.11 移动端布局排版思考

一.活动卡片布局

1.例：活动卡片页之间的水平间距和屏幕两侧的水平间距皆为10px

B站：

 给主体盒子设置一个左右为5px的内边距 再给每个盒子设置一个左右为5px内边距从而达到两侧和盒子之间的距离皆为10px

二.宽度用flex / 定宽 百分比/？

1.如果单行水平布局的盒子各个不固定 

首先先给大盒子display : flex 

给第一个盒子和第三个盒子定宽 随后给中间的盒子设置flex ：1；

2.单行水平布局的盒子宽度皆相同

大盒子display : flex 

子盒子：flex ：1

盒子之间的间距用padding / 2 做 这样能隔开子盒子里的内容区

3.多行水平布局的盒子宽度相同

 大盒子display : flex ; 

flex-wrap ：wrap；允许换行

子盒子 width : 50%  // 100% 当前行内块元素个数

 

大盒子display : flex ; 

flex-wrap ：wrap；允许换行

子盒子 width : 20% 

今日勉励：利用好每日高效时间，多敲多练每次都有新收获