弹性盒模型冷门知识

时间 2019-11-09

标签弹性模型冷门知识繁體版

原文原文链接

能够出现居中的border，两边元素分别为49.5pxdom

<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 flex

相似如下结构的domcode

<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的
解决方案input

// 使用弹性盒模型的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>