html - display flex 是否将元素从文档流中取出？

问题描述

我有一个带有两个子 div 的 div，每个 div 里面都有一个 svg 图标，这是我拥有的 HTML 和相应的 CSS：

.gallery-nav {
    width: 120px;
    height: 120px;

    display: flex;
    flex-direction: row;
}

.gallery-nav div {
        background-color: yellow;
        //width: 50%;
    }

#white-bg {
    background-color: #fff;
}

<div class="gallery-nav">
                <div>
                    <?xml version="1.0" encoding="iso-8859-1"?>
                    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
                    <svg
                        version="1.1"
                        id="Layer_1"
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        x="0px"
                        y="0px"
                        viewBox="0 0 492.004 492.004"
                        style="enable-background: new 0 0 492.004 492.004"
                        xml:space="preserve"
                    >
                        <g>
                            <g>
                                <path
                                    d="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12
            c-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028
            c0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265
            c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z"
                                />
                            </g>
                        </g>
                    </svg>
                </div>
                <div id="white-bg">
                    <?xml version="1.0" encoding="iso-8859-1"?>
                    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
                    <svg
                        version="1.1"
                        id="Layer_1"
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        x="0px"
                        y="0px"
                        viewBox="0 0 492.004 492.004"
                        style="enable-background: new 0 0 492.004 492.004"
                        xml:space="preserve"
                    >
                        <g>
                            <g>
                                <path
                                    d="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12
            c-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028
            c0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265
            c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z"
                                />
                            </g>
                        </g>
                    </svg>
                </div>
            </div>

当我在具有 gallery-nav 类的 div 上应用 flex 显示时，两个图标都会消失，唯一让它们再次出现的方法是给它们一个宽度。
这是为什么？flex 是否从文档流中获取这些元素，或者这是某种与 SVG 相关的行为。

标签： htmlcsssvgflexbox

html - display flex 是否将元素从文档流中取出？

问题描述

解决方案

推荐阅读