如何将 flexbox 应用于 CSS 切换开关元素？答案

【问题标题】：How to apply flexbox to CSS toggle-switch elements?如何将 flexbox 应用于 CSS 切换开关元素？
【发布时间】：2021-12-25 04:23:47
【问题描述】：

我在将 flex-box 应用于此 CSS 切换开关扩展时遇到问题：https://ghinda.net/css-toggle-switch/index.html

我是作为 CDN 下载的，所以我没有它的 CSS 文件

这是我的示例 index.html 代码：

<div class="settings">
            <p>Settings</p>

            <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Send Email Notifications
            </strong>
            <span class="switch-light-span">
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
            </label>

            <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Set Profile to Public
            </strong>
            <span>
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
            </label>

            <select name="timezone">
                <option value="volvo" selected>Select a Timezone</option>
                <option value="volvo">Volvo</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat">Fiat</option>
                <option value="audi">Audi</option>
            </select>

            <div class="buttons">
                <button>Save</button>
                <button>Cancel</button>
            </div>

        </div> 

    </div>

这是一个示例 CSS 代码：

/* 设置 */

.settings {
    display: flex;
    flex-direction: column;
}

.switch-light {
    display: flex !important;
    justify-content: space-between !important;
}

如果您使用 CDN 覆盖其样式表，显然您必须应用 !important 关键字。所以这就是我所做的，但我没有得到我想要的效果。

我试图将属性应用到 span 元素，即整个按钮，但它不起作用。

这是我想要实现的示例：

有什么建议吗？

【问题讨论】：

标签： javascript css flexbox toggle togglebutton

【解决方案1】：

您的 flexbox 确实在工作，我想您可能会感到困惑，因为切换按钮的宽度设置为 100%。如果您减小宽度，我认为它看起来会更像您的预期，请参见下面的 sn-p。

此外，您不一定必须使用!important 来覆盖通过 CDN 加载的资源的样式。只是因为它是在您的样式表之后加载的，所以它的样式会有更大的先例。有更好的方法可以在不使用!important的情况下覆盖样式，请参阅这篇文章What is the order of precedence for CSS?

希望这会有所帮助！

.settings {
    display: flex;
    flex-direction: column;
}

.switch-light {
    display: flex !important;
    justify-content: start !important;
}
.switch-ios.switch-light > span {
    width: 100px !important;
}
.switch-ios.switch-light > strong {
    width: 250px !important;
}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/css-toggle-switch@latest/dist/toggle-switch.css" />
<div class="settings">
            <p>Settings</p>

            <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Send Email Notifications
            </strong>
            <span class="switch-light-span">
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
            </label>

            <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Set Profile to Public
            </strong>
            <span>
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
            </label>

            <select name="timezone">
                <option value="volvo" selected>Select a Timezone</option>
                <option value="volvo">Volvo</option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat">Fiat</option>
                <option value="audi">Audi</option>
            </select>

            <div class="buttons">
                <button>Save</button>
                <button>Cancel</button>
            </div>

        </div> 

    </div>

【讨论】：

这行得通，但是如何让两个按钮与文本的距离相同？
太棒了！给这些文本元素一个定义的宽度，你应该很高兴。类似： .switch-ios.switch-light > strong { width: 250px !important; }
修改了我的答案/sn-p。
谢谢！现在我只想从概念上理解这一点，因为我仍然是初学者。但是当宽度为 100% 时，这是否会导致它扩展其 flex 容器的整个宽度，这就是为什么 justify 内容可能不起作用的原因？或者它正在处理它，但我只是看不到它，因为宽度正在完全扩展？为什么我们要为 span 和 text 指定特定的维度？我记得以前使用过 flexbox，通常你可以让这些元素之间的距离相等—— justify-content 属性、margin 属性和其他一切都可以。
是的，所以 flexbox 将获取 flex 元素并展开它们以占据 flex 容器的整个空间，除非您在其中一些上指定了固定宽度。因此，在这种情况下，按钮占据了 100% 的宽度，因此 flexbox 为其他 flex 项目提供了所需的最小空间，并将其余部分留给了按钮。我个人推荐 Wes Bos 关于 Flexbox（和 CSS Grid）Link 的免费课程。看完视频，你很快就会成为大师！

【解决方案2】：

你需要将你想要显示的两个按钮放在带有容器元素的 flexbox 中。像这样：

<div class="container">
    <div class="item">
        <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Send Email Notifications
            </strong>
            <span class="switch-light-span">
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
        </label>
    </div>
    <div class="item">
        <label class="switch-light switch-ios" onclick="">
            <input type="checkbox">
            <strong>
                Set Profile to Public
            </strong>
            <span>
                <span>Off</span>
                <span>On</span>
                <a></a>
            </span>
        </label>
    </div>
</div>

然后将flexbox应用到容器元素上：

.container {
  display: flex;
  justify-content: space-around;
}

【讨论】：

【解决方案3】：

我现在正在处理同一个项目，并且处理同一个问题超过一天。我的解决方法是，我的 HTML 文档头部中的切换开关样式表的链接出现在我的 styles.css 链接之后。所以切换样式表在那里占据了主导地位。

【讨论】：