flex布局原理

1、能够说出flex盒子的布局原理

	flex是 flexble Box的缩写,简称为弹性布局，用来为盒子状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
    采用flex布局的元素，称为flex容器。它的所有子元素自动成为容器成员。
    通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
1
2
3

2、flex布局父项常见属性
display:flex 父元素这个必须要用到的；不然后边的flex属性就不起任何作用了。

flex-direction:设置主轴的方向

    	flex-direction:设置主轴的方向
        有主轴和侧轴两个方向；分别为x轴和y轴；或者叫行和列
        默认主轴方向就是x轴方向；水平向右。
        默认侧轴方向就是y轴方向，水平向下。
        主轴和侧轴是会变化的，看flex-direction设置为主轴，剩下就是侧轴；子元素跟着主轴来排列的。
        row：从左到右
        row-reverse:从右到左
        column:从上到下
        column-reverse:从下到上
1
2
3
4
5
6
7
8
9
10

justify-content:设置主轴上的子元素排列方式

---

        属性定义了项目在主轴的对齐方式
        flex-start :默认从头部开始；如果主轴是x轴，则从左到右
        flex-end:从尾部开始排列
        center：在主轴居中对齐（如果主轴x轴，则水平居中）
        space-around :均匀排列每个元素；每个元素周围分配相同的空间
        space-between:先两边贴边，再平分剩余空间（重要）```

1
2
3
4
5
6
7

flex-wrap:设置子元素是否换行

        flex布局当中，默认的子元素是不换行的，如果装不下；会缩小子元素的宽度，放到父元素里面。
        nowrap:不换行
        warp:换行
1
2
3

flex-direction:设置主轴的方向

align-items:设置侧轴上的子元素排列方式(单行)

        该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项的时候使用
        flex-start :默认值从上到下
        flex-end :默认从下到上
        center：挤在一起居中
        stretch:拉伸（去下子元素的高度）


1
2
3
4
5
6
7

align-content:设置侧轴上的子元素的排列方式（多行）

    设置子项在侧轴的排列方式并且只能用于子项出现换行的情况（多行);在单行下是没有效果的
    flex-start：默认值在侧轴的头部开始排列
    flex-end:在侧轴的尾部开始排列
    center：在侧轴中间显示
    space-around:子项在侧轴先分布在两头，再平分剩余空间
    apace-between:子项在侧轴先分布两头，再平分剩余空间
    stretch：设置子项元素高度平分父元素高度
1
2
3
4
5
6
7

flex-flow:复合属性（常见使用的）

        属性是：flex-direction;flex-wrap属性的复合属性
        flex-flow: column-reverse wrap;
1
2

3、flex布局子项常见属性

flex子项目占的份数

            flex属性定义子项目分配剩余空间，用flex占多少份（比如移动端搜索框和两边）
            flex：1  平均分成几份 flex也可以写2 3 4等等
            div span:nth-child(2){
                flex: 1;
                /* width: 200px; */
                height: 300px;
                background-color: green;
            }
1
2
3
4
5
6
7
8
9

align-self控制子项自己在侧轴的排列方式

  属性允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。
            默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等于stretch
            span:nth-child(2){
                /* 设置第二个bottom对齐 */
                align-self: flex-end;
            }
1
2
3
4
5
6

order属性定义子项的排列顺序（前后顺序）

  数值越小，排列越靠前，默认为0，注意和z-index不一样
            div span:nth-child(2){
                /* 默认是0，-1比0小所以在前面 */
                order: -1;
            }
1
2
3
4
5

4、能够使用felex布局的常用属性
就是把上边的父元素属性和子元素属性就是常用的属性

项目实战注意事项

1、传统布局和flex弹性布局两者区别

传统布局：兼容性好；布局繁琐；局限性，不能再移动端，很好的布局
flex弹性布局：操作方便，布局极为简单，移动端应用的广泛；PC端浏览器支持情况较差；E11或更低版本，不支持，或者仅部分支持
建议：如果PC端页面布局，建议使用传统布局
如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

2、 传统布局：兼容性好；布局繁琐；局限性，不能再移动端，很好的布局

分清主轴和侧轴；先主后侧
1

3、align-content和align-items区别？
align-items:适合侧轴单行情况下，只有上对齐、下对齐、居中和拉伸
align-content:适合侧轴多行的情况下，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值

总结就是：单行找align-items;多行找align-items。
1