flex布局,属性用法
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
display
指定 HTML 元素盒子类型
使用flex布局,必须将display属性设置为flex (display:flex)
flex-direction
指定了弹性容器中子元素的排列方式,属性值:
row | 默认值。灵活的项目将水平显示,正如一个行一样。 |
row-reverse | 与 row 相同,但是以相反的顺序。 |
column | 灵活的项目将垂直显示,正如一个列一样。 |
column-reverse | 与 column 相同,但是以相反的顺序。 |
initial | 设置该属性为它的默认值。 |
inherit | 从父元素继承该属性。 |
justify-content
设置弹性盒子元素在主轴(横轴)方向上的对齐方式,属性:
flex-start | 默认值。项目位于容器的开头。 | |
flex-end | 项目位于容器的结尾。 | |
center | 项目位于容器的中心。 | |
space-between | 项目位于各行之间留有空白的容器内。 | |
space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | |
initial | 设置该属性为它的默认值。 | |
inherit | 从父元素继承该属性。 |
align-items
设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
flex-wrap
设置弹性盒子的子元素超出父容器时是否换行,属性:
nowrap | 默认值。规定灵活的项目不拆行或不拆列。 |
wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。 |
initial | 设置该属性为它的默认值。 |
inherit | 从父元素继承该属性。 |
align-content
修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐,属性:
flex-flow
flex-direction 和 flex-wrap 的简写
flex-direction | 可能的值: row row-reverse column column-reverse initial inherit 默认值是 "row"。 规定灵活项目的方向。 |
flex-wrap | 可能的值: nowrap wrap wrap-reverse initial inherit 默认值是 "nowrap"。 规定灵活项目是否拆行或拆列。 |
initial | 设置该属性为它的默认值。 |
inherit | 从父元素继承该属性。 |
order
设置弹性盒子的子元素排列顺序。
number | 默认值是 0。规定灵活项目的顺序。 |
initial | 设置该属性为它的默认值。 |
inherit | 从父元素继承该属性。 |
align-self
在弹性子元素上使用。覆盖容器的 align-items 属性
flex
设置弹性盒子的子元素如何分配空间。
flex-grow | 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。 |
flex-shrink | 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。 |
flex-basis | 项目的长度。合法值:"auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。 |
auto | 与 1 1 auto 相同。 |
none | 与 0 0 auto 相同。 |
initial | 设置该属性为它的默认值,即为 0 1 auto。 |
inherit | 从父元素继承该属性。 |