CSS3 flex 布局

  • container 属性
  • item 属性
    • order——————-/ 项目排列顺序，值小靠前 /
    • flex-grow—————/ item 有剩余空间缩放比例，默认为0，不缩放 /
    • flex-shrink————-/ item 空间不足时缩小比例，默认为1，该项目将缩小。 /
    • flex-basis————–/ 在分配多余空间之前，项目占据的主轴空间 /
    • flex——————–/ 前三项的缩写，默认为 0 1 auto /
    • align-self————–/ 允许单个项目有与其他项目不一样的对齐方式 覆盖align-items /

Flex 是Flexible Box的缩写，意为”弹性布局“，
用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

1
2
3
.box{
  display: flex;
}

行内元素:

1
2
3
.box{
  display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀。

1
2
3
4
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意:设为Flex布局以后，子元素的

float、

clear 和

vertical-align
属性将失效。

概念

概念

container 属性

flex-direction


决定主轴的方向 ( 项目的排列方向 )
1
2
3
4
row（默认值）：       //主轴为水平方向，起点在左端。
row-reverse：        //主轴为水平方向，起点在右端。
column：             //主轴为垂直方向，起点在上沿。
column-reverse：     //主轴为垂直方向，起点在下沿。

flex-wrap


主轴不能容纳如何换行
1
2
3
nowrap（默认值）：    //不换行。
wrap:                //换行，第一行在上方。
wrap-reverse：       //换行，第一行在下方。

flex-flow


flex-direction 属性和 flex-wrap 属性 的简写形式

justify-content


项目在主轴上的对齐方式
1
2
3
4
5
flex-start（默认值）：    //左对齐
flex-end：               //右对齐
center：                 //居中
space-between：          //两端对齐，项目之间的间隔都相等。
space-around：           //每个项目两侧的间隔相等

align-items


项目在交叉轴上如何对齐
1
2
3
4
5
flex-start：         //交叉轴的起点对齐。
flex-end：           //交叉轴的终点对齐。
center：             //交叉轴的中点对齐。
baseline:            //项目的第一行文字的基线对齐。
stretch（默认值）：   //如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content


多根轴线的对齐方式，只有一根轴不起作用
1
2
3
4
5
6
flex-start：         //与交叉轴的起点对齐。
flex-end：           //与交叉轴的终点对齐。
center：             //与交叉轴的中点对齐。
space-between：      //与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：       //每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：   //轴线占满整个交叉轴。

item 属性

order


项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow


项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink


项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis


在分配多余空间之前，项目占据的主轴空间

flex


flex-grow, flex-shrink 和 flex-basis
的简写，默认值为0 1 auto。后两个属性可选。

align-self


属性允许单个项目有与其他项目不一样的对齐方式

可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，
如果没有父元素，则等同于stretch。
1
2
3
4
5
flex-start：         //交叉轴的起点对齐。
flex-end：           //交叉轴的终点对齐。
center：             //交叉轴的中点对齐。
baseline:            //项目的第一行文字的基线对齐。
stretch（默认值）：   //如果项目未设置高度或设为auto，将占满整个容器的高度。

文章参考：原文链接