display: flex; Flex布局的详细说明

前言

CSS display: flex；该技术在页面布局中的应用极为广泛；它能够较为简便地实现某些效果；然而，在属性概念上相对较多；因此想要深入掌握并灵活运用起来也不是易事；在这里我希望通过总结常见的 Flexbox 属性及其用法；为你提供一份实用的学习资料

一、什么是Flex布局？

Flex Grid layout was introduced by the W3C in 2009 as a new approach. It has achieved the ability to realize multiple responsive layout schemes. Currently, it is supported by all mainstream browsers.

Flex是Flexible Box这一术语的缩写形式，在中文环境中被定义为“弹性盒子”，这一名称旨在突出其在盒装模型中的独特灵活性特点。在Box建模软件中，默认情况下所使用的即为这种富有弹性的布局方式。为了实现更加灵活的建模效果，在实际操作中建议将各类基本形状的容器都配置为Flex布局方案

注意:

• 为了在webkit内核的浏览器中采用Flex布局, 需要在HTML元素中设置前置属性display:-webkit-flex;.
  • 行内元素同样可以采用Flex布