flex布局（弹性布局）

一、使用方法

注：设置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

flex布局（弹性布局）

猜你喜欢