flex杂谈-解决 Flex 子元素居中，溢出滚动后被裁切的问题

目录

一. 需求

为开发一个空状态通用组件，需要将所有内容水平垂直居中，还需要横向纵向排列，故选择flex布局。

  1. 组件内容分为三部分，图片、文字、其他（插槽）
  2. 默认状态，组件排列方式为纵向，图片307*145，所有内容水平垂直居中。
  3. 容器宽高任一小于330px，假设宽大于高组件排列方式变为横向，图片大小变为70px；否则维持默认。
  4. 容器宽高任一小于120px，组件只显示文字和其他。

二. 设计

  1. 组件最外层为自适应宽高，完全由内容撑开。
  2. 开放属性：
    1.类别：默认、横向、纵向、只有文字
    2.内置图片高度
    3.内置图片选择
    4.文字替换

三. 问题及解决方案

问题：当组件内容宽高大于组件设置的宽高，会导致内容显示不完整，Flex 子元素居中，溢出滚动后被裁切的问题。
个人解决方案：使用两层flex，外层只设置align-items: center;，内层设置align-items: center;justify-content: center;flex-shrink: 0;居中和不让内容缩放,重点设置margin: auto;设置居中，消除flex影响。

四. demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex容错</title>
</head>
<style>
    .warp {
        overflow: auto;
        width: 100%;
        height: 100%;
        border: 1px solid black;
    }

    .flex1 {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .flex2 {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin: auto;
        flex-direction: column;
    }

    .clear {
        flex-shrink: 0;
    }

    .image {
        border: 1px solid black;
    }

    .text {
        border: 1px solid black;
    }

    .other {
        border: 1px solid black;
    }
</style>

<body>
    <h2>消除flex居中后,子元素内容显示不完整 </h2>
    <div class="warp">
        <div class="flex1">
            <div class="flex2">
                <div class="clear">
                    <div class="image"><img src="http://www.baidu.com/img/flexible/logo/pc/result.png" alt=""></div>
                </div>
                <div class="clear">
                    <div class="text">提示文字</div>
                </div>
                <div class="clear">
                    <div class="other">其他</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

五. 空组件代码

posted @ 2022-01-20 16:21  暗鸦08  阅读(1682)  评论(0)    收藏  举报