flex弹性盒子布局

一、作用：网页布局---实现子元素标签在父元素标签中的空间排列

二、属性：

    1、父属性：

1. 1、display属性

要启用Flex布局，首先需要将容器的display属性设置为flex或inline-flex。

.flex-container {

  display: flex; //块级容器

  //或者

  display: inline-flex; //内联容器

}

1.2、flex-direction属性

flex-direction属性决定了主轴的方向，影响项目的排列方式。

.flex-container {

  flex-direction: row; //默认值，横向排列

  //也可以设置为

  flex-direction: row-reverse; //横向反向排列

  flex-direction: column; //纵向排列

  flex-direction: column-reverse; //纵向反向排列

}

1.3、flex-wrap属性

flex-wrap属性定义了如果一行不足以放下所有项目，是否换行。

.flex-container {

  flex-wrap: nowrap; //默认值，不换行

  //也可以设置为

  flex-wrap: wrap; //换行

  flex-wrap: wrap-reverse; //换行，项目反向排列

}

1.4、justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.flex-container {

  justify-content: flex-start; //默认值

  justify-content: flex-end; //尾部对齐

  justify-content: center; //居中对齐

  justify-content: space-between; //两端对齐

  justify-content: space-around; //每个元素两侧的间隔相等

  justify-content: space-evenly:每个元素两侧的间隔相等，包括首尾元素

}

1.5、align-items属性

align-items属性定义了项目在交叉轴上如何对齐。

.flex-container {

  align-items: stretch; //拉伸对齐

  align-items: flex-start; //默认值

  align-items: flex-end; //尾部对齐

  align-items: center; //居中对齐

  align-items: baseline; //基线对齐

}

1.6、align-content属性

align-content属性定义了多行之间的空间分配和对齐方式。

.flex-container {

  align-content: flex-start; //默认值

  align-content: flex-end; //尾部对齐

  align-content: center; //居中对齐

  align-content: space-between; //两端对齐

  align-content: space-around; //每个元素两侧的间隔相等

  align-content: stretch; //占据整个交叉轴空间

  align-content: space-evenly:每个元素两侧的间隔相等，包括首尾元素

}

1.7、flex-grow, flex-shrink 和 flex-basis属性

这三个属性用于控制项目的放大和缩小比例以及基础尺寸。

.flex-item {

  flex-grow: number; //默认值是0

  flex-shrink: number; //默认值是1

  flex-basis: length; //默认值是auto

}

    2、子属性：

        order：子元素排列顺序--- 数值越小，排列越靠前

        flex:子元素占据的空间比例--- 数值越大，占据的空间越大

    3.特点：

        父元素定义为flex属性后，所有的子元素都会横向排列，并且子元素的宽度会根据子元素的内容自动调整

        vw--- viewport width  视口宽度-- 1vw=视口宽度的1%

        vh--- viewport height  视口高度-- 1vh=视口高度的1%