零零散散之flex相关属性、布局以及flex缩放

flex相关属性、布局以及flex缩放

默认情况下，容器中的所有子元素都将进行水平排列，类似于强制进行了一个左浮动，所以容器子元素的float和clear属性会失效。同时，容器中的子元素的对齐方式将不受vertical-align控制，即vertical-align也会失效。

display:flex子元素垂直水平居中的方式

    display: flex;
    /*
    	水平方向对齐方式（上中下）:
    		flex-start、center、flex-end
    */
    justify-content: center;
    /*
    垂直方向对齐方式（左中右）：
        flex-start、center、flex-end
    */
    align-items: center;
    /*
    主轴排列方式（行列）：
        row、column、row-reverse、column-reverse
    */
    flex-direction: column;
    /*
    子元素放不下时是否换行：
        nowrap、wrap
    */
    flex-wrap: nowrap;
    /*
    flex-direction 属性和flex-wrap属性的简写形式
    */
    flex-flow: row nowrap;

flex缩放

正常情况下，flex布局的元素，如果子元素的宽度和大于父元素，那么就会按照子元素宽度比例进行等比例缩放，容器中的子元素默认可以压缩到最小，但是如果子元素压缩到最小还是超过父元素宽度，则子元素会被放到容器外面（比如一个字所需最小宽度为20px，也即拥有字的子元素的最小压缩到20px）

单独flex属性

flex缩放设置组的一些属性

    /*
    设置容器元素放大比例：
        默认为0，只放大了宽度，放大比例是按照子元素自身尺寸放大
    */
    flex-grow: 0.5;
    /*
    设置元素缩小比例
        默认为1，缩放要么达到与父元素一致，要么达到相应的缩放比例停止，受到flex-basis控制，默认auto即缩到与容器元素一致
    */
    flex-shrink: 2;
    /*
    设置子元素占容器元素的大小，缩放时候的参考指标，auto表示与容器元素一致，也可以自己设置宽度，达到这个宽度就会停止
    */
    flex-basis: 500px;

felx:1 和flex: auto的区别

    /*
    flex是flex-grow、flex-shrink、flex-basis的简化写法
        flex: flex-grow flex-shrink flex-basis
    */
    flex: 0 1 auto;

① none: 此时等于 0 0 auto。

.item {
    flex: none; // 值为none
}
// 等价于
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

② auto: 此时等于 1 1 auto。

.item {
    flex: auto; // 值为auto
}
// 等价于
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

③ 一个非负数字: 此时这个非负数字指的是flex-grow的值，flex-shrink采用默认值1，但是flex-basis值为0%，如:

.item {
    flex: 1; // 值为一个非负数字
}
// 等价于
.item {
    flex-grow: 1;
    flex-shrink: 1;
    /*表示缩小的时候可以缩到0*/
    flex-basis: 0%; /*这里比较特殊为0%*/
}