2020-11-11

flex学习

flex弹性布局，为盒模型提供了很多灵活性，任何一个容器包括行内元素都可以指定为flex布局。需要注意的是当元素设置为flex属性之后，float、clear、vertical align属性都会失效。

flex属性要加在容器元素上

.box{
    display: flex;
}

行内元素支持flex属性

span{
    display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

目前所有的浏览器都支持flex属性

flex布局与常规布局的比较

常规布局：

• 块级元素自上而下依次排列
• 元素只有高度，没有设置宽度时，宽度默认100%
• 元素只有宽度，没有设置高度时，高度默认0

flex布局： 

• 容器内元素默认从左到右排列
• 元素只有宽度，没有设置高度时，高度默认为100%
• 元素只有高度，没有设置宽度时，宽度默认为0

基本概念：采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

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

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