viewjs wordpress,seo外包,广州个人做网站,wordpress网站建设公司使用flex布局的痛点
如果使用justify-content: space-between;让子元素两端对齐#xff0c;自动分配中间间距#xff0c;假设一行4个#xff0c;如果每一行都是4的倍数那没任何问题#xff0c;但如果最后一行是2、3个的时候就会出现下面的状况#xff1a;
/* flex布局 两…使用flex布局的痛点
如果使用justify-content: space-between;让子元素两端对齐自动分配中间间距假设一行4个如果每一行都是4的倍数那没任何问题但如果最后一行是2、3个的时候就会出现下面的状况
/* flex布局 两端对齐 */
display: flex;
flex-wrap: wrap;
justify-content: space-between;如何想让最后一行左对齐是有办法的大家可以自行去搜索办法能实现但是操作起来有些麻烦但是如果这种布局使用grid布局的话就会变的非常容易。
同样的布局将flex改为grid
/* grid布局 两端对齐,最后一行左对齐*/
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 30px; 解释一下上面的代码
displaygrid 是转为网格布局这个是必须的grid-template-columns1fr | px 这是将网格分为几列1fr是自适配单位可以当成栅格gap:30px 这是网格四周的间隔 注意这三个属性是给父容器添加的子元素可以不用设置宽度也不用设置margin间距即可完成如下布局。 看上面的grip布局最后一行不是4的倍数但是可以左对齐不会像flex布局一样的bug。
深入了解一下grid-template-columns属性
grid-template-columns: 1fr;独占一行grid-template-columns: 1fr 1fr;一行分为两列 grid-template-columns: 1fr 200px 1fr;中间固定200px两边自动平均分配 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;如果5列的值相同可以使用repeat()函数grid-template-columns: repeat(5,1fr)当然将1fr缓存固定的px尺寸也可以。 grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); 这种写法可以用来做响应式布局auto-fill主轴上指定的宽度或者重复次数是最大可能的正整数minmax最小值255px、最大值1fr代表剩余空间的比例。 注意实现这种响应式布局一定要注意父容器不能使用固定宽度可以将父容器改为如80%这样就能根据屏幕的宽度自动展示一行展示几个了。
grid-row和grid-column可以控制某个元素占领几份
.layout .box1{grid-row: 1/3;grid-column: 1/3;
}以grid-row行为例从第几列开始 / 第几列想占几个
