初识flex布局

一、Flex布局

• 说明

  CSS3中的 Flexible Box，或者叫flexbox，是用于排列元素的一种布局模式。

  顾名思义，弹性布局中的元素是有伸展和收缩自身的能力的。 相比于原来的布局方式，如float、position，根据盒子模型，就可以计算出元素的展示尺寸（长宽非百分比），除非溢出，否则不依赖于父容器的大小。

  而弹性布局中元素的大小是高度依赖父容器的大小的。因为，**它所具有的“伸缩性”，目标就是为了撑满父元素。**当然这是在任其“野蛮生长”的情况下，你也可以通过相关css属性控制其是否撑满、撑满什么轴。

  弹性布局是一种全新的思维方式，让很多实现复杂的问题有了更好的理解方式（如垂直居中）。只需要给直接父容器设置为display: flex; 子元素就默认具有了可收缩性。
  Flex的语法规范也曾经有很多版本：

  • 最新版本是display: flex;

  • 中间版本是display: flexbox;

  • 最老版本display: box;

二、传统布局和flex布局对比

• 传统布局特点

  1. 兼容性好
  2. 布局繁琐
  3. 局限性，不能再移动端很好的布局

• flex布局特点

  1. 操作方便，布局极其简单，移动端使用比较广泛
  2. pc端浏览器支持情况比较差
  3. IE11或更低版本不支持flex或仅支持部分

• 建议

  1. 如果是pc端页面布局，还是采用传统方式
  2. 如果是移动端或者是不考虑兼容的pc则采用flex

三、Flex 初体验

• 说明

  行内元素也可以使用Flex布局，用FLex布局之后，就不分行内元素和块级元素了。
  

• 举例

   <div>
       <span>1</span>
       <span>2</span>
       <span>3</span>
  </div>
  
  <style>
      div{
          display: flex;
          width: 80%;
          height: 300px;
          background-color: pink;
          justify-content: space-around;
      }
      div span{
          width: 150px;
          height: 100px;
          background-color: red;
          margin-right: 5px;
      }
  </style>
  

四 、Flex布局原理

• 说明

  flex 是 flexible Box 的缩写，意为"弹性布局"，又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局。用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

• 注意

  1. 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

  2. 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称"项目"。

3. 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

   项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

• 总结

  就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式