flex布局

1.flex总结

名词解释:

主轴：默认x轴

交叉轴：默认y轴

项目：父盒子中的子盒子

对齐：排列方式

轴线：多行子元素

1.1 父盒子

1.1.1 flex-direction ；决定主轴方向

                row (默认) 主轴水平,起点左端

                row-reverse 主轴水平,起点右端

                column  主轴垂直,起点在上端

                column-reverse  主轴垂直,起点在下端

1.1.2  flax-wrap：如果一行(轴线)放不下元素，设置换行或不换行

                nowrap (默认)不换行

                wrap 换行

                wrap-reverse 换行，且第一行在下方

1.1.3 justify-content：项目在主轴上的对齐方式

                flex-start(默认)     主轴起点方向

                flex-end                主轴终点方向

                center                  主轴中间

                space-between   最左和最右靠边,空隙平分

                space-evenly       最左和最右不靠边,空隙平分

                space-around      最左和最右不靠边；两个项目之间的空隙是最左或最右的旁边的空隙的两倍

 1.1.4 align-items：定义项目在交叉轴上的对齐方式

                stretch(默认)   如果项目未设置高度或者设置为auto，将沾满整个容器的高度

                flex-start      交叉轴起点方向

                flex-end        交叉轴终点方向

                center          交叉轴中间

                baseline        项目的第一行文字的基线对齐

1.1.5  align-content：定义了多行轴线的对齐方式。如果只有一根轴线,该属性不起作用。

                stretch(默认)   轴线沾满整个交叉轴(高度自适应)

                flex-start      多行都在盒子上边

                flex-end        多行轴线在盒子的下方

                center          多行轴线在盒子的中间

                space-between   多行分开,第一行在最上边，最后一行在最下边,空隙平分

                space-between   多行分开,每两行之间空隙是第一行离顶部，最后一行离底部的空隙的两倍

1.2 单个子元素

1.2.1 order：定义自己的排列顺序,数值越小,排列越靠前

                0(默认)

1.2.2  flex-grow：项目的放大比例，默认即使有空隙也不放大

                0(默认)

                只有一个是1,其他都是0,1的项目会占据空余空间

                全是1,每个项目的一起平分空隙，转换为自己的宽度

                一个是2,有1,0的不改变自己的宽度,2的宽度占据的空隙是1的宽度占据空隙的两倍

1.2.3  align-self：定义单个项目的交叉轴方向上的对齐方式,可覆盖父盒子的align-items属性

                auto(默认)      继承父元素的align-items属性，如果没有父元素,则等于stretch

                stretch           项目未设置高度或者设置为auto，将沾满整个容器的高度

                flex-start        交叉轴起点位置

                center            交叉轴中间位置

                flex-end         交叉轴终点位置

                baseline        第一行文字的基线对齐

           

1.2.4  flex-shrink：项目的缩小比例，默认为1，即如果空间变小，该项目将缩小。

                               负值无效

                1(默认)   都是1的项目将同时缩小

                0             该项目值宽高不会发生变化        

                2             缩小的比例是1的两倍

1.2.5   flex-basis：在分配多余空间之前，项目占据的主轴空间(main size)，浏览器根据这个属性，计算主轴是否有多余空间。

                auto(默认)      项目的本来大小

                length(px)      设置项目占据的固定空间

1.2.6  flex：是flex-grow,flex-shrink和flex-basis的简写,

                0 1 auto(默认)  后两个属性可选

                auto(1 1 auto)  快捷键

                none(0 0 auto)  快捷键