HTML中的flex布局

flex布局也就是常说的弹性布局（个人觉得应用的比较广泛，常用于移动端布局）。当一个元素的父容器设置display:flex的时候，这个容器就会变成一个弹性盒子，默认情况下这个盒子里的子元素都会左右排列（宽度有内容决定，高度由父容器决定），当你给子元素设置高度并且高度超过父容器的高度的时候，他也不会溢出（会自动收缩），因为弹性的优先级大于自身固定大小。（但是当你给父容器最小宽高的时候，你的子元素还多，并且没设置折行，那么在手机上就会出现溢出现象。个人感觉不是很重要）

flex布局目前学到的添加在父容器上的语法

（主轴与侧轴排列方向）（个人感觉弄清主轴和侧轴比较重要）（默认情况下主轴侧轴是按下面图片所示） flex-direction：布局的排列方向（默认主轴排列方向）
        row：显示为行（默认值）。方向为当前文档水平流方向，默认情况下从左到右排列
        row-reverse：显示为行，但方向与row属性值相反
        column：显示为列（主轴侧轴换位置）
        column-reverse：显示为列，但方向与column属性值相反
flex-wrap：是否折行
        nowrap：不折行（默认值）
        wrap：折行处理
        wrap-reverse：反向折行
justify-content：主轴方向上的子项对齐和分布方式
        flex-start：子项都去起始位置对齐
        flex-end：子项都去结束位置对齐
        center：子项都去中心位置对齐
        space-between：两端对齐，多余的空白区域在中间平均分配
        space-around：环绕，每个子项两侧都环绕互不干扰的等距空白，视觉上边缘的两侧空白只有中间空白的一半
        space-evenly：匀称、平等，视觉上每个子项两侧空白间距完全相等
效果展示

align-items：当子项只有一行时，每一行中子元素的上下对齐方式（最好是只写一行）
        flex-start / flex-end / center（同上）
align-content：当子项多行时，侧轴的对齐方式
        默认下有几行就会把容器划分为几部分（默认拉伸）
        flex-start / flex-end / center / space-between / space-around / space-evenly （同上）

目前学到的添加在子容器上的语法：

order：排序 数值大的在后面
felx-grow：扩展（想要看到扩展的效果必须要有空隙）
        0：不去扩展（默认值）
        1：扩展（把间隙占满）
        （补充：子元素会按照设置的比例来分配空隙，如果比例值总和小于1，那么还会有空隙；如果比例值总和大于1，将不会有空隙但也不会溢出，会收缩）
flex-shrink：收缩
        1：会收缩（默认值）
        0：不收缩
        （补充： 当给的比例值小于1时会收缩的小一些，当比例值大于1时会收缩的大一些）
flex-basis：给子项设置一个具体的值
align-self：单独一个子项的上下对齐方式
        flex-start / flex-end / center

flex会常用于移动端布局，所以这些属性需要记一下，以免自己写的时候记不住还要翻笔记！！！