CSS Flex弹性布局模块详解及属性说明.pdfVIP

CSSFlex弹性布局模块

mainaxis主轴

flexcontainer容器(比喻段落/窗口)

flexitem项(比喻文字/盒子)flexitem项flexitem项

cross

axis……

侧轴

……

flexitem项flexitem项flexitem项

……

CSS弹性布局模块之flex-direction(作用在container)

属性名属性值解释

row(默认)主轴为水平方向，item从左到右

flex-direction:row-reverse主轴为水平方向，item从右到左

主轴方向column主轴为垂直方向，item从上到下

column-reverse主轴为垂直方向，item从下到上

CSS弹性布局模块之flex-wrap(作用在container)

属性名属性值解释

nowrap(默认)不换行

flex-wrap:

wrap换行，第一个item在上方

item如何换行

wrap-reverse换行，第一个item在下方

备注当flexcontainer容器行空间不足时，设置item的换行情况

备注:flex-flow:flex-direction||flex-wrap简写形式

—例如：flex-flow:rownowrap

CSS弹性布局模块之justify-content(作用在container)

属性名属性值解释

flex-start(默认)左对齐

center居中对齐

justify-content:flex-end右对齐

item在主轴上的对齐方式

space-weenitem两端对齐

space-arounditem平均分布

备注当flexitem在主轴方向上，还有剩余空间时

CSS弹性布局模块之align-items(作用在container)

属性名属性值解释

flex-start侧轴的起点对齐

center侧轴的点对齐

align-items:flex-end