元素表现为 flex 框时,它们沿着两个轴来布局:
给flex容器设置display属性 .container{display:flex|inline-flex} flex-direction
设置主轴的方位和方向。 .container { flex-direction: row(default) | row-reverse | column | column-reverse;} flex-wrap
设置换行 .container { flex-wrap: nowrap(default) | wrap | wrap-reverse;} flex-flow
集合属性,同时定义flex-direction和flex-wrap。 .container { flex-flow: row-reverse wrap-reverse;} justify-content
设置行内的项目如何水平对齐 .container { justify-content: flex-start(default) | flex-end | center | space-between | space-around | space-evenly;} align-items
设置行内的项目如何垂直对齐。 .container { align-items: stretch(default) | flex-start | flex-end | center | baseline;} align-content
如果容器的交叉轴方向有富余空间,设置每行应该如何垂直对齐。 .container { align-content: stretch(default) | flex-start | flex-end | center | space-between | space-around | space-evenly;} 二、flex item属性 order
设置弹性项目在布局时的顺序。 .item { order: <integer>;} 默认值是0order 值大的 flex 项比 order 值小的在显示顺序中更靠后。 flex-grow
设置flex项怎么瓜分行内的富余空间。定义flex项(flex item)的拉伸因子。 .item { flex-grow: <number>; } 默认值是0。按照总份数瓜分富余空间。 flex-shrink
设置flex项怎么承担行内的负债空间。定义flex项(flex item)的收缩规则。 .item { flex-shrink: <number>; } 默认值是1。按照总份数承担行内的负债空间。 flex-basis
设置了 flex 元素在主轴方向上的初始大小。它是width属性的替代品,优先级比width高。 .item { flex-basis: <'width'>;} 默认值是auto依赖flex项目的content flex
一个集合属性,可以同时设置flex-grow、flex-shrink和flex-basis。 .item { flex: <'flex-grow'> | <'flex-grow'> <'flex-shrink'> <'flex-basis'>;} align-self
设置弹性项目自身在行内的垂直对齐方式。 .item { align-self: auto(default) | stretch | flex-start | flex-end | center | baseline;} 默认值是auto。