CSS flex 布局(入门)

flex 简称弹性布局,是2009年W3C提出的 css3 新属性。

在页面布局上,通常使用 display + position + float,这能解决大部分的布局,只是有些就很不方便。 比如,让最后一个 div 占满剩余空间、元素垂直居中,flex 就能很方便的实现。

/* 块元素 */ 
display: flex;

/* 行内元素 */
display: inline-flex;

元素设置为 flex 或者 inline-flex 后,称为容器,不能被继承。容器直接子元素称为项目。 项目的 float、clear 和 vertical-align 属性也无效。

容器有主轴和交叉轴。默认情况下存在两根轴:水平的主轴和垂直的交叉轴。 也可以设置为垂直的主轴和水平的交叉轴。

默认情况下,当项目在水平排列为一排,则为一条主轴;当项目在水平排为2行,则为多条主轴。

flex 解释图 1-1

CSS flex 弹性布局 - flex 布局的相关属性

属性 描述
设置在容器上
flex-direction 设置项目的排列方向
flex-wrap 设置项目换行
flex-flow 简写:<flex-direction>  <flex-wrap>
justify-content 设置项目在主轴方向的对齐方式
align-items 设置项目在交叉轴的对齐方式
align-content 设置多根轴线的对齐方式
设置在项目上
order 设置项目的排列顺序
align-self 设置单个项目的对齐方式
flex-grow 设置项目的放大比例
flex-shrink 设置项目的缩小比例
flex-basis 设置项目的基准值
flex 简写:<flex-grow>  <flex-shrink>  <flex-basis>