天天讯息：打开MASA Blazor的正确姿势4.2：Flex弹性布局

2023-02-13 22:08:37 来源：博客园

(资料图)

MASA Blazor预定义了Flex弹性布局的样式，可以直接在class属性中直接使用。

一、复习一下之前提到过的Flex样式（转为MASA Blazor样式类）：

.d-flex.d-inline-flex：
- 打开Flex弹性布局
- 此样式对应于CSS的display属性
- 块级容器中使用d-flex，行内容器中使用d-inline-flex
.flex-row.flex-row-reverse.flex-column.flex-column-reverse：
- 子元素的排列方向，即主轴方向
- 此样式对应于CSS的flex-direction属性
- 默认为flex-row，延X轴排列，主轴为X轴
.flex-nowrap.flex-wrap.flex-wrap-reverse：
- 当主轴上无法排列项目时是否换行，因屏幕显示纵向扩展的原因，大多数情况下，横向排列时才有意义
- 此样式对应于CSS的flex-wrap属性
- 默认值为flex-nowrap，不换行
.justify-start.justify-end.justify-center.justify-space-between .justify-space-around：
- 项目在主轴上的对齐方式
- 此样式对应于CSS的justify-content属性
- 默认值为justify-start，起点对齐
.align-start.align-end.align-center.align-baseline.align-stretch：
- 每行项目在交轴上的对齐方式
- 此样式对应于CSS的align-items属性
- 建议nowrap情况下使用
.align-content-start.align-content-end.align-content-center.align-content-space-between.align-content-space-around.align-content-stretch：
- 所有项目作为一个整体在交轴上的对齐方式
- 此样式对应于CSS的align-content属性
- 建议wrap情况下使用

.order-first.order-{0~12}.order-last：
- 本项目在所有容器中排序，数值越小越靠前，默认值为0
- 此样式对应于CSS的order属性
- order-first为排名第1，order-last为排名最后，当子元素数据不定时很有用
.align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-auto.align-self-stretch：
- 本项目在交叉轴上的对齐方式，将覆盖容器上设置的align-{}，nowrap时有效
- 此样式对应于CSS的align-self属性
.flex-grow-{0~n}：
- 如果主轴方向上存在剩余空间，本项目参与分配剩余空间的比例
- 此样式对应于CSS的flex-grow属性
- 默认值为0，即不参与分配剩余空间
.flex-shrink-{0~n}：
- 如果主轴方向上的空间不够，本项目参与承担缩小空间的比例
- 此样式对应于CSS的flex-shrink属性
- 所有子元素的默认值均为1，即空间不够时大家都等比缩小
特别说明：相比于Flex，少了一个flex-basis，所以容器在计算剩余空间时，都是按项目本身的大小来计算

        Son1
    Son2
    Son3
    Son4
    Son5
    Son6
    Son7
    Daughter1
    Other1

    Son1
    Son2
    Son3
    Son4
    Son5
    Son6
    Son7
    Daughter1
    Other1

    Son1
    Son2
    Son3
    Son4
    Son5
    Son6
    Son7
    Daughter1
    Other1

    Son1
    Son2
    Son3
    Son4
    Son5
    Son6
    Son7
    Daughter1
    Other1

    Son1
    Son2
    Son3
    Son4
    Son5
    Son6
    Son7
    Daughter1
    Other1

注：justify-start、justify-end、justify-space-between、justify-space-around的表现和交叉轴上的对齐效果差不多，不再举例

    Son1
    Son2
    Son3
    Son4
    Son5
    Son6
    Son7
    Daughter1
    Other1

    Son1
    Son2
    Son3
    Son4
    Son5
    Son6
    Son7
    Daughter1
    Other1

    Son1
    Son2
    Son3
    Son4
    Son5
    Son6
    Son7

    Son1
    Son2
    Son3
    Son4
    Son5
    Son6
    Son7
    Daughter1

stretch：align和align-content中的stretch，为交叉轴方向上的拉伸。如果设置了交叉轴方向的尺寸（如主轴为X轴时，设置了高度），则为设置好的尺寸，表现为stretch没有效果。如未设置，才会在交叉轴方向上拉伸至父元素的尺寸。
baseline：以子元素中的文字为基线，进行对齐
flex-basis flex-grow flex-shrink：MASA Blaozr应该是对这三个样式做了简化，取消了flex-basis，flex-grow和flex-shrink，只能设置0和1值。关于这点，需要再查证一下~~~