flex布局

注意当我们父元素使用了float,clear,vertical-align属性将失效

常见父元素属性

flex-direction(设置主轴是X轴还是Y轴)

row:默认值从左到右
默认主轴是X轴行row 那么Y轴就是侧轴了
row-reverse:从右到左
column:从上到下
column-reverse:从下到上

just-content(设置主轴上的子元素的排列方式)

flex-start:默认值从头开始如果主轴为X轴则从左到右
flex-end:从尾部开始排列
center:在主轴居中(如果主轴是X轴则水平居中)
space-around平均剩余空间
space-between:先两边贴边在平分剩余空间(重要常用)
space-evenly(flex item之间的距离相等)

flex-wrap(设置子元素是否换行，默认是不换行的，默认子元素都是排一排的装不开的话会缩小子元素)

flex-wrap:nowrap;默认值不换行
flex-wrap:wrap;换行

align-items(设置侧轴上的子元素的排列方式:如果主轴是X测轴就是Y)
注意这种只适合与单行align-content适合多行见下面

flex-start:从上到下
flex-end:从下到上
center:挤在一起(垂直居中)
stretch:拉伸(默认值)不设置高度默认为父盒子高度没有设置就是设置的高度

---

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

flex-start:默认值在侧轴的头部开始排列
flex-end:在侧轴的尾部开始排列
center:在侧轴的中间显示
space-around:子项在侧轴平分空间
space-between:子项在侧轴先分布在两头,在平均分配剩余空间
stretch:设置子项元素高度平分父元素高度

flex-flow(上面属性的和写)

flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素排列方式(单行)
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap(例子：flex-flow: row wrap)

常见子元素的属性

flex（子项所占的份数默认为0）

	section{
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: auto;
            display: flex;
            
        }
        section div:nth-child(1){
            width: 100px;
            height: 150px;
            background-color: red;
        }
        section div:nth-child(2){
            height: 150px;
            background-color: yellow;
            flex: 1;
        }
        section div:nth-child(3){
            width: 100px;
            height: 150px;
            background-color: red;
        }
     <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    主要是flex起重要作用，剩余空间排满即为1+

效果图

section{
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: auto;
            display: flex;
            
        }
        section div:nth-child(1){
            width: 100px;
            height: 150px;
            background-color: red;
            flex:1.5
        }
        section div:nth-child(2){
            height: 150px;
            background-color: yellow;
            flex: 2;
        }
        section div:nth-child(3){
            width: 100px;
            height: 150px;
            background-color: red;
            flex: 1;
        }

效果图

align-self（控制子项自己在侧轴上的排列方式）
让自己脱离组织就是单独排列和align-item效果等同
order(默认是0数值越小越靠前)
order:-1
***flex-shrink:1 （默认） flex-shrink:0保持原始宽度在弹性盒子不会因为没有设置换行而压缩（还是保持原始宽度）