css弹性盒子属性及其用法

弹性盒子模型

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:设置弹性盒子的子元素超出父容器时是否换行

Tip:横轴的方向决定了新行堆叠的方向。

    属性值：

        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.

=================================================================================

转载于:https://www.cnblogs.com/mixcoding/p/10655521.html