用Flex布局完成下图
1.title部分
title共有2部分,左边的文字区域和右边的倒计数区域。
首相设置最外面的title的dispaly:flex;这样使两部分在一行上。接着设置左边的文字区域为width:60%;代表左边区域始终占60%的区域。然后设置右面的倒计时部分为flex:1,使其根据屏幕进行扩展。
2.item部分
item部分共有2部分,左边图片区和右边文字区域,文字区域有三行文字和一个按钮。
首先,将item设置为displa:flex;使左右两部分在一行上;然后设置图片大小,最后设置右边的文字区域flex:1;
总结:设置父元素为displa:flex;子元素左边设置宽度和高度,最好用百分比,用px在某些手机上布局会出现错误,然后设置另一个子元素flex:1。