网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局将成为未来...
我们利用flex弹性布局来快速完成一个PC端通用布局的解决方案，以后遇到类似布局可以直接仿照当前布局方案来做代码：效果：PC端的通用布局大体上就这样，可以仿照这个flex自己动手试试注：图中为了演示效果把高度都调低了实际开发科根据自身需求调节高度大小接下来我们利用flex弹性布局来快速完成一个移动端通用布局的解决方案，以后遇到类似布局可以直接仿照当前布局方案来做代码：效果图：注：以上主要代...
***移动端浏览器：UC、QQ、欧朋、百度、360、谷歌、搜狗、猎豹；基本上都是webkit内核。***手机频幕多：安卓480*800，480*854，540*960，720*1280，1080*1920***移动端调试方法：谷歌的模拟手机调试（F12，底部第二个手机图标），本地服务器手机访问。***视口viewport：就是浏览器显示页面内容的屏幕区域。以前视口默认的是980px为标准。？...
Flexo拥有一组标准的HTML元素并且包含一套栅格系统，但即便如此它还是非常够用的。整个Flexo仅仅拥有大约200行CSS代码，而且其中一半还是控制导航栏的。
https://flexbox.help/Flexbox.help是一个很好的工具，当你需要帮助的时候，你可以利用Flexbox.help。如果你是flexboxes的新手，这是一个很好的工具，使用这个工具你可以尝试使用所有可用的flex选项，CSS会根据你选择的选项为你生成，所以你不需要自己输入所有的代码。
基于CSSflexbox规格的布局助手，利用两项定制化html属性——layout与self——快速实现flexbox效果。
这款简单的应用程序允许学习者使用Flexbox的各种功能，并在屏幕上实时查看结果以及代码。学习者还可以编辑框中的文本，并查看框内布局的响应情况。这种有趣的学习方式让学习变得轻松又容易。
父元素使用flex布局，子元素使用margin:auto<divclass="parent-frame"style="display:flex;"><divstyle="margin:auto;">父元素使用flex布局，子元素配合margin:auto使用</div></div>父元素使用flex布局，子元素配合margin:auto使用
父元素使用flex布局,并定义两个属性值justify-content，align-items都为center，那么就定义为水平垂直居中justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。<divclass="parent-frame"style="display:flex;justify-content:center;...