flex弹性布局

弹性布局-Flexible Box Layout Model

一.前言：

1.什么是布局(Layout)？

使用CSS将各种类型的HTML元素进行合理的结构性安排

2.布局方式的分类

（1）传统布局-盒模型布局(Box Layout Model)

流+display+float+position,兼容性好,效率低,移动端限制大;

（2）flex(flexible)布局 - 弹性布局模型(Flexible Layout Model)

历史版本：

2009年 第一次草案

{
    display:box}

2011年 第二次草案

{
    display:flexbox | inline-flexbox}

2012年 第五次草案，确定的推荐标准,至今

{
    display:flex | inline-flex}

兼容性查询推荐网站：http://caniuse.com

起源：独立于传统布局,有自己的一套属性,效率高,学习成本低,移动端比PC端兼容性好。特别适用于小程序与移动网络终端的广泛应用

3.flex的作用

Flex是CSS3中定义的一种新的布局模式。

• 控制在容器内的子元素的对齐方式、排列方式以及排序顺序
• 调整其子元素的宽度或者高度以使其能在不同分辨率的屏幕下能用最好的方式去填充可用空间。

案例：元素自适应水平垂直居中

<div class="container">
    	<div class="item">item项</div>
</div>

方法一：

缺点：要参与运算，且无法自适应变化

      .container{
   
        width: 300px;
        height: 300px;
        background: #069;
        border:1px solid #333;
      }
      .container .item{
   
          width: 100px;
          height: 100px;
          background: pink;
          margin: 0 auto;
          margin-top: calc((300px - 100px) / 2);
      }

方法二：

缺点：需要用到绝对定位，要考虑参照物；要参与运算；