Flex 布局介绍
CSS 2.1 定义了四种布局模式 — 根据框与同级和祖先框的关系确定框的大小和位置的算法:
- 块布局,设计用于布置文档
- 内联布局,设计用于设置文本布局
- 表格布局,设计用于以表格格式布置 2D 数据
- 定位布局,设计用于非常明确的定位,而不考虑文档中的其他元素
flex为新的布局模式,灵活布局,旨在布置更复杂的应用程序和网页。
Flex 布局的全称为 CSS Flexible Box Layout Module,是 W3C 提出的一种新型页面布局方案,第一个版本于 2009 年推出,到现在为止,W3C 一共发布了 13 个版本,最新版本于 20181119 推出,用于以Web应用程序和复杂网页通常需要的方式分配空间和对齐内容。
弹性容器的内容:
- 可以以任何流动方向布置(向左,向右,向下,甚至向上布局)
- 可以在样式层反转或重新排列其显示顺序(即,视觉顺序可以独立于源和语音顺序)
- 可以沿单个(主)轴线性布局,或沿次(交叉)轴缠绕成多条线
- 可以"灵活"其尺寸以响应可用空间
- 可以相对于它们的容器对齐,也可以在次级(交叉)上彼此对齐)
- 可以沿主轴动态折叠或取消折叠,同时保持容器的十字大小
Flex布局演示
点击体验
Flex 布局由容器flex container和项目flex item两部分组成,容器默认存在两根轴:水平的主轴main axis和垂直的交叉轴cross axis,项目默认以主轴排列。 Flex 属性包括容器属性和项目属性两部分,容器上可设置:flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content6 个属性,项目上同样可设置 6 个属性,分别为:order、flex-grow、flex-shrink、flex-basis、flex、align-self。
一、flex-direction 属性
描述:决定主轴的方向。
flex-direction: row | row-reverse | column | column-reverse;
属性介绍:
row:默认值,主轴为水平方向,表示从左向右排列
row-reverse:主轴为水平方向,从右向左排列
column:主轴为垂直方向,从上向下排列
column-reverse:主轴为垂直方向,从下向上排列
二、flex-wrap 属性
描述:决定项目在一条轴线排不下时如何换行。
flex-wrap: nowrap | wrap | wrap-reverse;
属性介绍:
nowrap:默认值,不换行
wrap:换行,第一行在上方
row-reverse:换行,第一行在下方
三、flex-flow 属性
描述:flex-direction属性和flex-wrap属性的简写形式,默认值为 row nowrap。
flex-flow: <flex-direction> || <flex-wrap>;
属性介绍:
row nowrap:默认值,主轴为水平方向,不换行
flex-direction:同flex-direction
flex-wrap:同flex-wrap
四、justify-content 属性
描述:定义项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-round | space-evenly;
属性介绍:
flex-start:默认值,左对齐
flex-end:右对齐
center:居中
space-evenly:每个项目之间及两端的间隔都相等
space-around:每个项目两侧间隔相等
space-between:两端对齐,项目之间间隔相等
五、align-items 属性
描述:定义项目在交叉轴(默认方向从上到下)上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch;
属性介绍:
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
cente:交叉轴的中心对齐
baseline:项目第一行文字的基线对齐
stretch:默认值,项目未设置固定高度时,将占满整个容器
六、align-content 属性
描述:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
属性介绍:
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中心对齐
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布等
space-around:每根轴线两侧的间隔都相
stretch:默认值,轴线占满整个交叉轴