flex布局(弹性布局)学习笔记

最近在写小程序，页面交互、逻辑、跳转都还可以搞定，只是这个页面布局让我头疼，so专门去找视频学习了一下现在比较主流的Flex布局，笔记仅供日后参考

认识： -->Flex布局是目前移动端用的和web开发中使用最多的布局方案。

两个重要概念：

1. 开起了flex布局的元素叫：flex container。
2. flex container 里面的直接子元素叫：flex items

布局模型：

Flex container上的css属性

1、flex-direction

• 作用：指定容器的主轴方向，主轴默认为水平向右方向，项目排列的方向
• row：默认值，主轴横向往右排列
• row-reverse：主轴横向往左反向排列
• column：垂直方向排列
• column-reverse：垂直方向反向排列

2、justify-content属性

• 作用：属性定义了flex items 在主轴上的对齐方式
• flex-start：默认的是从主轴开始位置对齐
• flex-end：默认的是从主轴结束位置对齐
• center：居中对齐，项目形成的总宽度不变
• space-between：flex items 之间的距离相等，与main star、 main end两端对齐
• space-around：flex items 之间的距离相等，两边的距离是item之间距离的一半
• space-evenly ：flex items 之间的距离相等，items与main star、 main end之间的距离等于items 之间的距离相等

3、align-items属性

• 作用：定义items在交叉轴上的堆砌方式
• flex-start：交叉轴的开始位置对齐
• flex-end：交叉轴的结束位置堆砌
• center：交叉轴居中
• baseline：基线对齐，以第一行文字为基准线
• stretch：（拉伸）默认值！！如果项目未设置高度或者设置为auto，将沾满整个容器的高度（自动填充）

4、flex-wrap

• 作用：如何换行（默认情况下所有的flex items 都会在同一行展示，宽度自动收缩）
• nowrap：默认不换行，会压缩子元素
• wrap：多行，第一行在上方
• wrap-reverse：多行行，第一行在下方

5、flex-flow

• 作用：是flex-direction和flex-wrap和合并缩写形式
• 取值：flex-direction || flex-wrap

 	// 下方写法一和写法二效果一样：
	// 写法一
    .box {
    	flex-flow: row wrap;
    }

    // 写法二
    .box {
    	flex-direction: row;
        flex-wrap: wrap;
    }

6、align-content

• 作用：定义了多行 flex items在交叉轴线上的对齐方式
• 说明：如果项目只有一个轴线（一行），该属性不起作用，如果wrap换行了，那么才有作用
• flex-start：所有轴线都是从头开始，交叉轴开始位置开始，主轴横轴的话，就是上对齐
• flex-end：从尾开始，交叉轴结束位置开始
• center：所有从中间开始
• space-between：flex items 之间的距离相等，与cross star、 cross end两端对齐
• space-around：flex items 之间的距离相等，两边的距离是item之间距离的一半
• space-evenly：flex items 之间的距离相等，items与cross star、 cross end之间的距离等于items 之间的距离相等
• stretch：默认!高度自动填充拉伸

Flex-items的属性

• 项目的属性规定的是项目在flex容器中的属性
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1、order

• 作用：定义项目的排列顺序
• 取值：可以设置任意整数（正整数、负整数、0），值越小就越排前面

2、flex-grow

• 作用：定义项目的成长比例，默认是0，即如果存在剩余空间，也不放大
• 取值：> 0
• 默认值为0，默认不会自动放大
• 如果都设置为1，那么所有项目会平分剩余的空间
• 如果有三个元素，一个设置为2，剩余为1，那么项目2的就会占一半，剩下两个会各占四分之一。
• 如果有三个元素，一个width设置为200，剩余都为1，那么剩余的会平分固定宽度200之外的空间

3、flex-shrink

• 作用：定义项目的缩放比例，和grow相反
• 取值：>0
• 默认值为1，默认会自动缩小
• 如果所有项目都为1，当空间不足时候，都会等比例缩小
• 如果有一个项目为0，其他都为1，当空间不足时候，0不变，1都缩小

4、flex-basis

• 作用：定义分配多余空间之前，项目占据的主轴空间，和width差不多，但是比width优先级高

5、flex

• 作用：flex-grow、flex-shrink、flex-basis的简写
• 默认值：0 1 auto

6、align-self

• 作用：允许项目有和其他项目不一样的对齐方式，可以覆盖父元素的align-items属性
• 取值：和align-items多了个auto
• 默认值为auto，表示继承align-items属性