移动端流式布局练习分享

移动端流式布局

学习HTML5已经一段时间，现在分享一个用流式布局在移动端的一个案例，具体请看这篇文章。

在我们平时的生活中，刷微博，刷朋友圈，分享一些实时动态已经是我们每个人习以为常的事情，当我们发表一些动态时，朋友，家人，同学基本会给你发表的动态送上几句评论之类的。今天要说的就是利用流式布局做出一个这种个人动态的页面布局以及样式。整体效果如下：

接下来就是我的方法及思路，不合理的地方可以提出修改，完善完善。
第一先分析结构，找到一个合理的布局方案；
在移动端可视窗口就是手机屏幕的大小，这里可以不用考虑宽度，只要布满整个窗口就行，高度的话就随内容。下面是对照上图的大体布局方式：先让box1的display: flex; 内部的根据实际改变盒子类型。

1.白色部分是header，左上角的返回标记要加连接，字体按照实际大小，滑动手机时要注意不能让header部分移动，可以用固定定位，也可以利用flex：1（这个加在main部分）；
以下为css：

2.main部分我分为两部分来完成，发布的内容和评论单独来完成。黄色部分为内容，青色部分为评论。
这里注意图片的大小，宽度要跟容器宽度相同，高度可以不写；
下面的功能部分用p标签实现，也要将类型改为flex，接下来用justify-content: space-between，让里面的a两端对齐，中间部分自适应；
第一部分提到让main的flex：1，这里要给它overflow: scroll，这样就可以实现顶部固定，滑动屏幕里面的内容也可以全部显示。css样式：

3.这里就要实现评论区里面的样式，一样也是改变display: flex。这部分是将用户头像与评论内容左右分部。然后单独设置文字部分。

评论区部分为了让文字可以显示且不会影响下面的元素不要设置高度。css样式：

以上就是这次这个练习所用到的方法，也感谢大家的观看。
有问题的地方欢迎留言！