如何使用Flex布局

用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。