弹性盒模型冷门知识

2024年2月17日 152次阅读 来源: starcoding

可以出现居中的border，两边元素分别为49.5px

    <div style="display: flex;width: 100px">
        <div style="flex: 1; border-right:1px">a</div>
        <div style="flex: 1">b</div>
    </div>

弹性盒模型中的input标签可能会出现默认宽度，并且不可以用flex-basis覆盖，只能设置width为0

类似以下结构的dom

    <div style="display: flex;flex-direction:column;height: 600px">
        <header style="height: 30px">有一定高度</header>
        <!-- 这个容器占据下部剩余空间 -->
        <div class=a style="flex: 1">
            <!-- 这个容器在左边作为目录 -->
            <div class=b style="height: 100%;width: 300px;display: flex;flex-direction: column">
                <!-- 这个容器是一个搜索栏 -->
                <input type="text" style="height: 30px">
                <!-- 这里理论上是剩余空间，带滚动条却超出去了 -->
                <div class=c style="flex: 1;overflow:auto">
                    <div>123123 * 10000个</div>
                </div>
            </div>
        </div>
    </div>

此时的容器B的100%是无效的。abc的高度都是c的
解决方案

// 使用弹性盒模型的Y轴平铺属性（默认）来获得100%高度
        <div style="display: flex;flex-direction:column;height: 600px">
        <header style="height: 30px">有一定高度</header>
        <!-- 这个容器占据下部剩余空间 -->
        <div class=a style="flex: 1:display: flex">
            <!-- 这个容器在左边作为目录 -->
            <div class=b style="height: 100%;width: 300px;display: flex;flex-direction: column">
                <!-- 这个容器是一个搜索栏 -->
                <input type="text" style="height: 30px">
                <!-- 这里理论上是剩余空间，带滚动条却超出去了 -->
                <div class=c style="flex: 1;overflow:auto">
                    <div>123123 * 10000个</div>
                </div>
            </div>
        </div>
    </div>
// 或者 设置a overflow:hidden; 这个方案的原理目前未知
      <div style="display: flex;flex-direction:column;height: 600px">
        <header style="height: 30px">有一定高度</header>
        <!-- 这个容器占据下部剩余空间 -->
        <div class=a style="flex: 1:display: flex;overflow: hidden">
            <!-- 这个容器在左边作为目录 -->
            <div class=b style="height: 100%;width: 300px;display: flex;flex-direction: column">
                <!-- 这个容器是一个搜索栏 -->
                <input type="text" style="height: 30px">
                <!-- 这里理论上是剩余空间，带滚动条却超出去了 -->
                <div class=c style="flex: 1;overflow:auto">
                    <div>123123 * 10000个</div>
                </div>
            </div>
        </div>
    </div>
    原文作者：starcoding
    原文地址: https://segmentfault.com/a/1190000008265557
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞