WebApp设计视频—Flex移动布局与完整解析

Web app用户界面设计，核心是web设计；不过与一般意义上的web设计相比较，web app更加注重功能。为了在与桌面应用程序的竞争中展现其优势，web app需要提供简洁、直观、快速响应的用户界面，以便于用户在任务操作中节省精力和时间。

例如下面的2个优秀的webAPP设计界面，都是可以通过html5来实现。

下面html5模版网(www.html5code.net)收集了张剑宇老师在百度移动开发者峰会上的基于基于Flex的Web App设计知识视频。希望大家有空看看，以便于更好的了解WebApp设计知识视频课堂—Flex移动布局。

 

今天html5模版网(www.html5code.net)也跟大家来聊聊webAPP设计的一个重要的知识点：Flexbox

Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式，为了现代网络中更为复杂的网页需求而设计。

这里需要给大家提供2个非常棒的学习资源教程：

1、w3school学院（http://www.w3school.com.cn/cssref/pr_box-flex.asp）

2、一个完整的Flexbox指南教程：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/  （英文版）

http://www.w3cplus.com/css3/a-guide-to-flexbox.html （中文版）

3、flex实战演练教程—逆天的FLEXBOX布局备忘单

http://www.gbtags.com/gb/share/2437.htm

另外一种技巧：百分比+flex布局。

百分比是什么？其实就是利用标签里面的内容自动撑开，再利用margin,padding百分比来固定div的内容，这样做的好处在不同的设备，div的margin和padding也是成比例出来显示，如果用px的话，你就得写很多@media screen 来设置不同的样式。

我们只需要header mainer footer 的宽设置100%和图片宽设置100% ，不用设置高，

如果文本间上下间距不够，我们可以line-height来撑高让文字显得不那么挤
然后就是最强大碉堡的display:flex的出现。

之前html5模版网(www.html5code.net)介绍的一个学习webAPP的好地方：

非常有用的HTML5+CSS3资源灵感酷站codrops