Flex弹性布局 Q&A

1、Flex项目出现拉伸与收缩的前提条件

出现 拉伸 要同时满足以下2个条件：

1. Flex项目的flex-grow值不能为0
2. 所有Flex项目的主尺寸 < Flex容器可用空间尺寸时（有剩余空间时）

出现 收缩 要同时满足以下2个条件：

1. Flex项目的flex-shrink值不能为0
2. 所有Flex项目的主尺寸 > Flex容器可用空间尺寸时（有不足空间时）

2、Flex项目的flex-basis为auto或0px/0%时，假设主尺寸是多少？

• flex-basis:auto 等同于 flex-basis:max-content
• flex-basis:0px/0% 等同于 flex-basis:min-content

3、Flex项目的flex-basis值小于max-content时，会出现什么效果？

内容不会溢出，只会换行

4、Flex项目未显式设置flex时，flex默认值是什么？

flex: 0 1 auto; 等同于 flex: initial;

• 不可拉伸
• 可收缩
• flex-basis为auto

5、Flex项目显式设置flex为1时，代表什么？

flex: 1 1 0%;

• 可拉伸
• 可收缩
• flex-basis为0%/0px

6、Flex项目显式设置flex为auto时，代表什么？

flex: 1 1 auto;

• 可拉伸
• 可收缩
• flex-basis为auto

7、Flex项目显式设置flex为none时，代表什么？

flex: 0 0 auto;

• 不可拉伸
• 不可收缩
• flex-basis为auto

8、Flex容器的相关属性（flex布局）

• flex-wrap —— 是否换行，默认不换行
• flex-direction —— 主轴的方向
• justify-content —— 主轴的对齐方式
• align-items —— 侧轴的对齐方式
• align-content —— 侧轴的对齐方式（flex-wrap非nowrap时生效）
• gap —— 设置Flex项目间的间距

9、Flex项目的相关属性（flex布局）

• flex —— 复合属性
• flex-grow —— 拉伸因子
• flex-shrink —— 收缩因子
• align-self —— 侧轴的对齐方式
• order —— 排序
• flex-basis —— 假设主尺寸

10、Flex项目内长单词如何打断换行

当遇到单词长度大于Flex项目的假设主尺寸时，可以使用如下代码进行打断换行

.long-word{
    overflow-wrap: break-word;
    min-width: 0;
}

如果没有长单词，默认也会换行，无需上面代码

11、overflow-wrap与word-break区别

同：它们都允许在单词内换行

• overflow-wrap: break-word;
• word-break: break-all;

异: overflow-wrap会尽可能确保单词完整性，而word-break不会，只要到达边界就打断换行

12、单行文本过长时，如何进行省略处理

.text-overflow{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

13、多行文本过长时，如何进行省略处理

.line-clamp{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

14、Flex布局的换行实践

实现的效果图：

<div class="box">
    <img src="./img/my.jpg"/>
    <div class="content">
        <h5 class="text-overflow">我是一个笑笑笑笑的标题而已</h5>
        <p class="line-clamp">收到JFK的身份教练的身份九点十六分的角色路上的
        风景的开发贷款时尚大技术的肥反倒是开发技术技术的肥反倒是开发技术技术的
        肥反倒是开发技术方的开发贷款空间空间打开但是</p>
    </div>
    <button>查看详情</button>
</div>

.box{
    display: flex;
    width: 100%;
    height: 60px;
    gap: 10px;
}

.box img{
    flex-shrink: 0;
}

.box .content{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    min-width: 50px;
}

.box h5{
    margin: 0px;
    font-size: 14px;
}

.box p{
    font-size: 12px;
}

.box button{
    flex: 0 0 70px;
    height: 28px;
    border-radius: 6px;
    border-width: 0px;
    color: #fff;
    background-color: #1e9fff;
    align-self: center;
}

/* 多行文本截取，末尾添加... */
.line-clamp {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 单行文本截取，末尾添加... */
.text-overflow{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

15、Flex项目内仅有文本和元素的区别

<div class="flex-container>
    <div class="flex-item>
        Flex项目内仅有文本的情况下会发生什么？
    </div>
</div>


<div class="flex-container>
    <div class="flex-item>
        <p>Flex项目内仅有元素的情况下会发生什么？</p>
    </div>
</div>

区别： 元素可以设置宽高，因此可以改变Flex项目的最小内容宽度和最大内容宽度，如果没有设置宽高的情况下，和文本效果一致