谈谈你对 flex 的理解？(面试)

(1) 概念：flex布局是flexible box的缩写，任何一个容器都可以指定为弹性布局 (2) flex布局原理: flex 它是一种布局方式。 主要目的是通过父盒子控制子盒子如何排列。 flex就是通过给父盒子添加flex属性，来控制子盒子的位置和排列等。 (3) flex布局常见父元素属性: 主轴默认是水平方向, 侧轴默认是垂直方向

父元素设置为 flex布局时，子元素的宽度和高度会 宽度由内容撑开，高度变为 100%

(3) flex布局常见父元素属性:

flex-direction 作用：设置主轴方向，默认为水平从左到右 属性值：row（从左到右，默认）、row-reverse（从右到左）、column（从上到下）、column-reverse（从下到上） 设置主轴方向为垂直方向:flex-direction: column; 让我们的主轴设置为垂直。 默认的是 row 水平的。

justify-content 作用：设置主轴上子元素的排列方式（默认从头部方向） 属性值：flex-start（从头部开始，默认）、flex-end（从尾部开始排列）、center（主轴居中对齐）、space-around（平分剩余空间）、space-between（先两边贴边再平分剩余空间） 主轴排列方式: 如果给父盒子添加 display: flex justify-content: center; justify-content: space-between; 左右两侧无缝隙 justify-content: space-around; 两倍关系 justify-content: space-evenly; 缝隙均等

flex-wrap 作用：设置子元素是否换行（默认不换行） 属性值：nowrap（不换行，默认）、wrap（换行） 弹性盒子换行: 特别是多行的情况下，我们需要给弹性盒子换行，给 父盒子 弹性容器加。 flex-wrap: wrap;

align-items 作用：设置侧轴上的子元素排列方式，需要子项为单行（默认为拉伸，需要子盒子未指定高度） 属性值：flex-start（从上到下）、flex-end（从下到上）、center（挤在一起居中）、stretch（拉伸，默认） 侧轴对齐方式-单行对齐 默认的对齐方式 stretch 拉伸 顶对齐 flex-start align-items: center; (重点)

align-content 作用：设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（默认拉伸） 属性值：flex-start（侧轴头部开始）、flex-end（侧轴尾部开始）、center（侧轴中间显示）、space-around（平分侧轴剩余空间）、space-bwtween（先占据两边再平分）、stretch（拉伸，默认） 侧轴对齐方式-多行: align-content: space-between; align-content: space-around; align-content: space-evenly; align-content: center;