Flex 页面布局

2018-03-19 0 By admin

传统的页面布局方案基于盒状模型;依赖display属性+position属性+float属性。
2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。

一、基本概念

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局:isplay: flex;
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。
它的所有子元素自动成为容器成员,称为 Flex 项目(flex item)。

二、名词

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
主轴的开始位置叫做main start,结束位置叫做main end;
交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

三、容器的属性

flex-direction 决定主轴的方向(即项目的排列方向)
flex-wrap 项目换行设置
flex-flow 由flex-direction和flex-wrap属性组成
justify-content 项目在主轴上的对齐方式
align-items 项目在交叉轴上对齐方式
align-content 多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用

四、项目的属性

order 目的排列顺序
flex-grow 项目的放大比例
flex-shrink 项目的缩小比例
flex-basis 在分配多余空间之前,项目占据的主轴空间
flex flex-grow, flex-shrink 和 flex-basis组成
align-self 单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性