flex布局简单介绍:
2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
目录
一,flex 布局是什么?
- flex是flexible Box 的缩写,意为“弹性布局” 有很大的灵活性。
- 任何一个容器都可以指定为Flex布局,
- 行内元素也可以指定为 Flex 布局
- Webkit内核浏览器必须加上前缀-webkit
- 注意设为Flex布局后,子元素的float, clear, vertical-algin属性会失效
二,基本概念
- 采用flex布局的元素,成为flex容器(felx-container),他所有的子元素自动成为容器成员,称为flex项目(flex-item)。
- 容器有两条主轴线,水平轴main axis,交叉轴(垂直)cross axis,主轴开始的位置叫做 main start ,结束位置叫做main end。交叉轴开始的位置叫做cross start,结束位置叫做cross end。
- 项目(子元素)默认按照主轴排列,单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做cross size。
三,flex容器属性
父容器属性
属性 值 作用 1 flex-direction
row(正序水平轴)
row-reverse(倒序水平轴)
comuln(正序交叉轴)
comuln-reverse(倒序交叉轴)
定义子元素在容器内的排列方向 2 flex-wrap nowrap(不换行), wrap(换行——第一行在上方), wrap-reverse(换行——第一行在下方) 定义子元素是否换行,换行形式 3 flex-flow flex-flow为flex-direction,flex-wrap属性的简写,默认值为row wrap 4 justify-contern
felx-start(左对齐)
flex-end(右对齐)
center(居中)
space-between(两端对齐--项目之间间隔相等)
space-around(每个项目两侧间隔相等,项目之间间隔会比边框要大)
定义子元素在容器内水平对齐方式 5 align-items
flex-start(交叉轴起点对其)
flex-end(交叉轴终点对其)
center(交叉轴居中位置)
baseline(轴线项目上第一行文字基线对其)
stretch(默认值,如果项目未设置高度或设为auto,将占满真个容器的高度)
定义子项在容器人的交叉轴对齐方式 6 align-content
flex-start(与交叉轴起点对齐)
flex-end(与交叉轴终点对齐)
center(交叉轴居中对齐)
space-between(交叉轴两端对其,每个轴线之间间隔平均)
space-around(每根轴线两侧间隔相等,轴线间要比边框间隔要大)
stretch(轴线占满整个交叉轴)
定义多根轴线的对齐方式,如果该项目只有一根轴线,该属性不起作用。
子项属性
属性 值 作用 1 order 需整数integer
属性定义项目的排列顺序,数值越小,排列越靠前,默认为0 2 flex-grow number
定义子项宽度不足父容器宽度时,子项拉伸的比例,无需直接设置宽度.
如果所有项目的flex-grow
属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow
属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
3 flex-shrink number
定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
如果所有项目的flex-shrink
属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink
属性为0,其他项目都为1,则空间不足时,前者不缩小。
4 flex-basis number || 百分比
属性定义了再分配多余之前空间之前,项目占据的主轴空间(main size).浏览器根据这个属性,计算主轴是否有多余空间.默认为auto,及项目原本大小.
可以设为width/height属性一样的值(比如300px),则项目占据固定空间.
5 flex 0 1 auto
flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。
该属性有两个快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
6 align-self
auto()
flex-start()
flex-end()
center()
baseline()
stretch()
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch