flex布局(弹性布局)

时间:2022-12-04 05:26:53

一、使用方法

注:设置flex布局后,子元素的float、clear、vertical-align属性将失效

.box{
display:flex;
}
.box{
display:inline-flex;
}
//webkit内核的浏览器
.box{
display:-webkit-flex;
display:flex;
}

兼容性:IE9及以下不支持,主流浏览器都支持。兼容性处理

    display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

二、基本概念(flex容器——flex container)

主轴(main axis)

主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end,

单个项目占据的主轴空间叫做main size

侧轴(cross axis)

交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列,

占据的交叉轴空间叫做cross size。

三、外部容器的属性

  • flex-direction 主轴的方向
    .box{
    flex-direction:row | row-reverse | column | column-reverse;
    //row(默认值)主轴,从左到右
    //column 从上到下
    }

  • flex-wrap 主轴的换行方式
    .box{
    flex-wrap: nowrap | wrap | wrap-reverse;
    //nowrap 默认,不换行
    //wrap 正常换行,第一行在上
    //wrap-reverse 换行,第一行在下
    }

  • flex-flow 主轴的方向 || 换行方式 (连写)
    .box{
    flex-flow:row || wrap;
    }

  • justify-content 主轴的对齐方式
    .box{
    justify-content:flex-start | flex-end | center | space-between | space-around;
    //flex-start:从左对齐
    //flex-end:从右对齐
    //center:中间对齐
    //space-between:两端对齐,盒子之间相同的间隔。
    //space-around: 盒子两侧的间隔都相等,上面的没有两边
    }

  • align-items 侧轴上的对齐方式
    .box{
    align-items: flex-start | flex-end | center | baseline | stretch;
    //flex-start: 顶端对齐
    //flex-end: 底端对齐
    //center: 中间对齐
    //baseline: 盒子第一行文字的基线对齐
    //stretch: (默认值) 如果项目没用设置高度或设置auto,将占满整个盒子的高度
    }

  • align-content 多跟轴线的对齐方式
    .box{
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    //flex-start与侧轴的起点对齐
    //flex-end与侧轴的重点对齐
    //center与侧轴的中点对齐
    //space-between在侧轴上两端对齐
    //space-around:每根轴线两侧的间隔都相等,轴线到边框是间隔的一半
    //stretch:(默认值)轴线占满整个侧轴
    }

四、内部盒子的属性

  • order 内部盒子的排列顺序,默认为0,从小到大,从上到下排列
    .item{
    order:数值;
    }

  • flex-grow内部盒子的放大比例,默认为0,就是放不大。
    .item{
    flex-grow:数值
    }

  • flex-shrink 内部盒子的缩小比例,默认为1,如果空间不够就会将盒子缩小
    .item{
    flex-shrink:数值
    }

  • flex-basis计算主轴是否有多少多余空间,默认auto,盒子本来的项目大小
    .item{
    flex-basis:数值+px | auto;
    }

  • flex是flex-grow,flex-shrink和flex-basis的简写,后面两个可选
    .itme{
    flex: 1 1 auto;
    }
    该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

  • align-self允许单个盒子和其他盒子不一样的对齐方式。可以覆盖align-item的属性,默认auto,表示继承align-items属性
    .item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }

注:参考自阮一峰大神的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html