弹性盒子模型
display:flex;先将元素变成弹性容器,那么这个元素中的子元素自然而然就变成了弹性子元素。(容器是一个块状元素)
display:inline-flex;容器是一个行内flex元素
弹性盒子属性:
flex-direction:弹性子元素的排列方式(主轴排列方式)
flex-warp:设置弹性盒子的子元素是否换行
flex-flow:flex-direction 和 flex-wrap 的简写
align-item:设置弹性盒子在纵轴对其方式
align-content:修改flex-wrap属性行为,类似align-items.但是不是设置元素对其,而是设置行对其(行与行的对其方式)
justify-content:设置弹性盒子元素在主轴对其方式
flex-direction:弹性容器中子元素的排列方式(主轴排列方式)【子元素在主轴上的排列方式】
属性值:
row:默认在一行排列
row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。)
column:纵向排列。
column-reverse:反转纵向排列,从下往上排,最后一项排在最上面
flex-wrap:设置弹性盒子的子元素超出父容器时是否换行
属性值:
nowrap: 默认值。规定元素不拆行或不拆列。
wrap:规定元素在必要的时候拆行或拆列。
wrap-reverse:规定元素在必要的时候拆行或拆列,但是以相反的顺序。
align-item:设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式
相关属性:
flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
align-content:修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,
而是设置行对齐(行与行的对其方式)
相关属性:
说明:
当伸缩容器的侧轴还有多余空间时,本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式,这与调准伸缩项目在主轴上对齐方式的 <' justify-content'> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。
■ flex-start没有行间距
■ flex-end底对齐没有行间距
■ center居中没有行间距
■ space-between两端对齐,中间自动分配
■ space-around自动分配距离
justify-content:设置弹性盒子元素在主轴(横轴)方向上的对齐方式
说明:
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐
■ flex-start默认,顶端对齐
■ flex-end末端对齐
■ center居中对齐
■ space-between两端对齐,中间自动分配
■ space-around自动分配距离
弹性子元素
弹性子元素的相关属性
order:设置弹性盒子的子元素排列顺序。 number排序优先级,数字越大越往后排,默认为0,支持负数。
flex-grow:设置或检索弹性盒子元素的扩展比率。
flex-shrink:指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。
flex-basis:用于设置或检索弹性盒伸缩基准值。
flex:设置弹性盒子的子元素如何分配空间。
align-self:在弹性子元素上使用。覆盖容器的 align-items 属性。
order:设置弹性盒子的子元素排列顺序。 number排序优先级,数字越大越往后排,默认为0,支持负数。
flex-grow:设置或检索弹性盒子元素的扩展比率。
参数:
<integer>:一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
瓜分容器的剩余空间。
什么是剩余空间?
假设父元素的宽度是500px,
有三个子元素,每个宽度是100,那么剩余空间就是500 - 100 * 3 = 200。
而flex-grow就是用来瓜分剩余空间的。
例如第一个盒子属性为flex-grow:1;那么剩余空间就会被分成一份,第一个盒子额外的占据了这一份。
如果这个时候第二个盒子flex-grow:2;那么此时剩余空间就被分成三分,第一个盒子占一份,第二个盒子占两份。
flex-basis:用于设置或检索弹性盒伸缩基准值。
参数:<integer>:一个长度单位或者一个百分比,规定元素的初始长度。
auto:默认值。长度等于元素的长度。如果该项目未指定长度,则长度将根据内容决定。
flex-basis是width的替代品。如果子元素设置了flex-basis或者width,那么在分配空间之前,就会跟父容器预约这么多
的空间,然后剩下的才归到剩余空间,然后父容器再把剩余空间分配给flex-grow的容器。如果同时设置了flex-basis
和width,那么width的属性就会被覆盖,也就是说flex-basis的优先级比width高。
flex-shrink:指定了 flex 元素的收缩规则。
参数:<integer>:一个数字,规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。
当父容器的剩余空间为0的时候,并且默认处于非换行状态的情况下,子元素是没有办法利用弹性容器的剩余空间
进行扩展的。
如果如容器的剩余宽度为负数的情况下(子元素的宽度之和大于父容器的宽度),那么子元素就会被收缩。
收缩的比例为1:1.
例如,一个弹性容器中有三个子元素,那么他们的收缩比例就为1:1:1.
如果这个时候,第一个子元素设置了flex-shrink:2;那么我们就会发现,这个元素比其他两个元素收缩的幅度更大。
同时呢,因为第一个子元素空间的更多收缩,所以第二个和第三个元素就会获得更多的空间。
我们假设第二个和第三个盒子收缩比例为x1,那么第一个盒子的收缩比例就为x2.
=================================================================================