CSS3：弹性盒子-Flexbox

CSS3弹性盒子 -Flexbox

display:flex;

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

flex-direction:指定主轴的方向；

：column；列

：row；水平，左->右

：column-reverse

：row-reverse

 

 

 

flex-wrap：

：nowrap；不换行

：wrap；换行

：wrap-reverse；换行，向上换行

 

justify-content：

flex-start：左对齐

flex-end ：右对齐

center ：居中

space-between ：两端对齐，间隔相等

space-around ：两侧的间隔相等；项目之间的间隔比项目与边框的间隔大一倍。

space-evenly：距离相等（每个项目左右边的空隙相等）

 

align-items

flex-start ：交叉轴的起点对齐

 

 

flex-end ：交叉轴的终点对齐

 

 

center ：交叉轴的中点对齐

 

 

baseline ：第一行文字的基线对齐

 

 

stretch：如果项目未设置高度或设置为auto，将沾满整个容器高度；

 

 

 

align-content

 

 

flex-start

 

 

flex-end

 

 

center

 

 

space-between

 

 

space-around

 

 

stretch

 

 

 

项目属性

flex-grow

放大比例；默认为0；

flex-grow：number；

1 1 1：三个项目平分容器空间

容器剩余空间x比例

flex-shrink

缩小比例，默认为1；

flex-shrink：number；

（总宽-容器宽）x比例

align-self

align-self：baseline；

1. 如果主轴方向是水平方向，则基线对齐（至少两个项目设置baseline才看的出来效果）

2. 如果主轴方向是垂直方向，则与flex-start等效

align-self：

： auto

：flex-start

： flex-end

：center

： baseline 文字基线

：stretch