Flex布局属性浅解 #18

Anuluca     Date : 2020-08-25   Tags : 2

1、父元素属性

display:flex 定义了一个flex容器

flex-direction 决定主轴的方向
- row 默认值
- column 垂直由上到下
- row-reverse 水平从右到左
- column-reverse 垂直从下到上

flex-wrap 定义如何换行
- nowrap默认值，不换行
- wrap换行
- warp-reverse换行，由下往上

flex-flow 属性是flex-direction属性和flex-wrap属性的简写。格式是前者+后者
- row nowrap默认值

justify-content 设置元素在横轴上的对齐方式
- flex-start默认值，向起始位置对齐
- flex-end、向结束位置对齐
- center向中间对齐
- space-between平均分布
- space-around平均分布，两端保留子元素和子元素之间的间距大小的一半

align-items 设置元素在纵轴上的对齐方式

• flex-start 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界
• flex-end 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界
• center 弹性盒子元素在该行的侧轴(纵轴). 上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)
• baseline 如弹性盒子元素的行内轴与侧轴为同一条,则该值与flex-start等效。其它情况下,该值将参与基线对齐。
• stretch 如果指定侧轴大小的属性值为’auto ',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制

align-content 设置或检索弹性盒堆叠伸缩行的对齐方式

• flex-start 各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一
  行都紧靠住前面一行
• flex-end 各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界 紧靠住该弹性.盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行
• center 各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐,保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等
• space-between 各行在弹性盒容器中平均分布。第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界,剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等
  stretch各行将会伸展以占用剩余的空间。剩余空间被所有行平分，以扩大它们的侧轴尺寸

2、子元素上属性

order 默认情况下flex order会按照书写顺训呈现,可以通过order属性改变，数值小的在前面，还可以是负数

flex-grow 设置或检索弹性盒的扩展比率，根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间

flex-shrink 设置或检索弹性盒的收缩比率，根据弹性盒子元素所设置的收缩因子作为比率来收缩空间

flex-basis 设置或检索弹性盒伸缩基准值，如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间

flex flex属性是flex grow, flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选

align-self 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式，可以覆盖父容器align-items的设置