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
标签：

相关文章