flex布局

flex布局

flex布局原理
flex是flexible Box的缩写，意为‘弹性布局’，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局后，子元素的float(浮动)、clear和vertical-align(对齐方式)属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
flex里面采用flex布局的父盒子叫容器，子盒子称为项目，子容器可以横向排列或纵向排列。
flex布局原理就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

设置方法

    .box {
        display:flex;/*这是父类
        /*布局一般加在父盒子上，子盒子会会变成行内块元素，可以设置宽高
    }

flex布局父项常见属性

1. flex-direction

flex-direction默认的主轴是x轴、行、row 我们的元素是跟着主轴来排列的
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴

2. justify-content

justify-content设置主轴上的子元素排列方式(对齐方式)
注意：使用这个属性之前一定哟啊确定好主轴是哪个

3. flex-wrap

    .box {
        display:flex;
        flex-wrap:nowrap://(默认)不换行
        
        flex-wrap:wrap;//换行，第一行在上方
        
        flex-wrap:wrap-reverse;//换行，第一行在下方
    }

4. align-items

(适用单行)侧轴align-items和justify-content的属性用法差不多，align-items里面有flex-start、flex--end、center(垂直居中)
stretch(拉伸)如果项目未设置高度或设为auto，将沾满整个容器的高度
baseline：项目的第一行文字的基线对齐

5. align-content

align-content设置侧轴上的子元素的排列方式换行(多行)的情况

6. flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写，默认是 row nowrap

flex子项常见属性

flex属性
flex属性定义子项目分配剩余空间，用flex表示占多少份数，flex后面跟数字表示分成几份。
如果盒子有宽度则从剩余的空间分配选择分配份数
align-self设置在侧轴单个盒子的排列方式，除了auto属性，其他都与align-items属性完全一致
order属性定义项目排列顺序，数值越小，排列越靠前，默认是0。