取值: row: 主轴与行内轴方向作为默认的书写模式。即横向从左到右排列(左对齐)。 row-reverse: 对齐方式与row相反。 column: 主轴与块轴方向作为默认的书写模式。即纵向从上往下排列(顶对齐)。 column-reverse: 对齐方式与column相反。
该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。这将决定flex需要如何进行排列
取值: nowrap: flex容器为单行。该情况下flex子项可能会溢出容器 wrap: flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行 wrap-reverse: 反转 wrap 排列。
取值: flex-start: 弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。 flex-end: 弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。 center: 弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐,同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距(如果剩余空间是负数,则保持两端相等长度的溢出)。 space-between: 主轴边界两侧各一个,其余在之间间距平均分配。 弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数,或该行只有一个子元素,则该值等效于’flex-start’。在其它情况下,第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。 space-around: 弹性盒子元素会平均地分布在行里,两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数,或该行只有一个伸缩盒项目,则该值等效于’center’。在其它情况下,伸缩盒项目则平均分布,并确保两两之间的空白空间相等,同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。 说明: 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
flex-start: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。 flex-end: 弹性盒子元素的侧轴(纵轴)结束位置的边界紧靠住该行的侧轴结束边界。 center: 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。 baseline: 如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。 stretch: 如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。 定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。 当子元素没有设置和交叉轴同一方向的宽/高属性时,会拉伸至父元素的相应属性值
适用于:多行的弹性盒模型容器 取值: flex-start: 各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界,之后的每一行都紧靠住前面一行。 flex-end: 各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界,之后的每一行都紧靠住前面一行。 center: 各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐,保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。(如果剩下的空间是负数,则各行会向两个方向溢出的相等距离。) space-between: 各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于’flex-start’。在其它情况下,第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界,最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界,剩余的行则按一定方式在弹性盒窗口中排列,以保持两两之间的空间相等。 space-around: 各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于’center’。在其它情况下,各行会按一定方式在弹性盒容器中排列,以保持两两之间的空间相等,同时第一行前面及最后一行后面的空间是其他空间的一半。 stretch: 各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于’flex-start’。在其它情况下,剩余空间被所有行平分,以扩大它们的侧轴尺寸。 说明: 当伸缩容器的侧轴还有多余空间时,本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式,这与调准伸缩项目在主轴上对齐方式的 <’ justify-content '> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。
默认值:0
适用于:flex子项和flex容器中的绝对定位子元素 取值: integer: 用整数值来定义排列顺序,数值小的排在前面。可以为负值
取值: auto: 如果’align-self’的值为’auto’,则其计算值为元素的父元素的’align-items’值,如果其没有父元素,则计算值为’stretch’。 flex-start: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。 flex-end: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。 center: 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。 baseline: 如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。 stretch: 如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。 说明: 定义flex子项单独在侧轴(纵轴)方向上的对齐方式。 子项作为一个个体基于交叉轴的分配情况 和父级align-items冲突后听自己的,和父级align-content冲突后听父级的
取值: none: none关键字的计算值为: 0 0 auto flex-grow : 当主轴方向还有剩余空间时,子项会根据此值按照比例,使盒子伸张瓜分剩余空间(是剩余的空间按照比例被瓜分) 用来指定扩展比率,即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。 在「flex」属性中该值如果被省略则默认为「1」 flex-shrink : 用来指定收缩比率,即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。 在收缩的时候收缩比率会以伸缩基准值加权 在「flex」属性中该值如果被省略则默认为「1」 flex-basis : 用来指定伸缩基准值,即在根据伸缩比率计算出剩余空间的分布之前,「flex子项」长度的起始数值。 在「flex」属性中该值如果被省略则默认为「0%」 在「flex」属性中该值如果被指定为「auto」,则伸缩基准值的计算值是自身的 <’ width '> 设置,如果自身的宽度没有定义,则长度取决于内容。 说明: 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。 如果缩写「flex: 1」, 则其计算值为「1 1 0%」 如果缩写「flex: auto」, 则其计算值为「1 1 auto」 如果「flex: none」, 则其计算值为「0 0 auto」 如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」,即「flex」初始值
默认值:0 取值: number: 用数值来定义扩展比率。不允许负值 flex-grow的默认值为0,如果没有显示定义该属性,是不会拥有分配剩余空间权利的。
默认值:1 取值: number: 用数值来定义收缩比率。不允许负值 flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
设子项a flex-shrink: x; 子项b flex-shrink: y; 子项c flex-shrink: z; 一共超了off sum = a.widthx + b.widthy + c.widthz; 公式为 a.widthx/sum*off 此处的width是指content-box的width一般没人知道
默认值:auto length: 用长度值来定义宽度。不允许负值 percentage: 用百分比来定义宽度。不允许负值 auto: 无特定宽度值,取决于其它属性值 content: 基于内容自动计算宽度 说明: 设置或检索弹性盒伸缩基准值。 如果所有子元素的基准值之和大于剩余空间,则会根据每项设置的基准值,按比率伸缩剩余空间
flex-basis取代width且权重比width高 只写basis或basis>width,basis值为元素最小宽度,元素宽度可被内容撑开 basis < width时 basis<= 元素宽度<=width,元素宽度最多能被撑开至width 当内容区能把设置了flex-basis的容器撑开时,此容器将不参与压缩的计算,所以要加一个 word-break: break-word;(把不会自动换行的长英文串换行)