评论

通过一次样式重构谈两栏布局

通过一次样式重构谈两栏布局

两栏布局是学习样式中最常见的一种布局方式,也是面试的考点,在开发中无疑也会经常遇到

开发中我们经常会遇到一些列表,左边文字右边箭头,

比如下面三栏布局

盒子④ =》A => ①+②+③

盒子① =》B

盒子② =》C

盒子③ =》D


这种两栏布局的实现方式很多,在社区也提问过,

(请教两列布局样式问题?)

https://developers.weixin.qq.com/community/develop/doc/0000e460b40f00326bf945c9056000

该帖子给出了两种实现方式,其实如果放在前几年,这种两栏布局多半会用浮动来实现


占位


本文采用帖子中第一种实现方式,额外做些改动,具体代码如下

A{
    background-color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1rpx solid #ebebeb;
    height: 45px;
    text-align: left;
}
B{
    background-color: #1bcfad;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;


}
C{
    padding-left: 5px;
    flex-grow: 8;
}
D{
    flex-grow: 1;
    padding-right: 5px;
    color: #B2B2B2;
    text-align: right;
}


在这里主要用到flex布局子元素中的flex-grow,在之前开发中,flex布局主要还是设置在父元素上的,但是这次第一次用到flex-grow,大家可以学习参考下

占位

最后一次编辑于  02-26  
点赞 1
收藏
评论
登录 后发表内容