在 flexbox 内实现通知气泡？答案

【问题标题】：Achieving notification bubble inside flexbox?在 flexbox 内实现通知气泡？
【发布时间】：2021-12-30 17:24:00
【问题描述】：

目标

尝试

问题

我正在寻找实现上图所示效果的最佳做法。不确定我是否过度使用 Flexbox，但我的布局中的所有内容要么是层次结构中每一层的 flex 容器（父容器或嵌套容器）。

我需要绝对定位吗？它如何处理响应式更改？

HTML 片段

      <div className={styles['admin-panel']} id={styles['management-btn-container']}>
        <button className={`${buttons['btn-default']} ${buttons['btn-admin-1']}`}>???? Manage Posts</button>
        <div className={`${buttons['test']}`}>
          <button className={`${buttons['btn-default']}`}>✍???? Manage Comments</button>
          <div className={`${buttons['notification-bubble']}`}>1</div>
        </div>
        <button className={`${buttons['btn-default']} ${buttons['btn-admin-1']}`}>⏰ Manage Schedules</button>
      </div>

按钮 CSS

.btn-default {
    border: 2px solid black;
    background-color: transparent;
    color: white;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Lucida Grande';
    border: 1px solid grey;
    border-radius: 2px;
    text-transform: uppercase;
}

.btn-admin-1 {
    min-width: 23.33%;
    max-width: 33.33%;
}

.btn-admin-1:hover,
.btn-admin-2:hover {
    border: 1px solid white;
}

.test {
}

.notification-bubble {
    border-radius: 50%;
    background-color: red;
    border: 2px solid white;
    height: 20px;
    width: 20px;
    position: absolute;
    margin-top: -60px;
    margin-left: 230px;
}

【问题讨论】：

嗨:) 目前尚不清楚尝试和问题之间的问题是什么。尝试看起来不错，您何时/如何遇到问题？
这个尝试看起来不错，但我觉得它被破解了。这似乎是因为中间子 div 打破了 flex 流，因为我在那里注入了一个中间 div。我希望崩溃一起发生。
您能添加浏览器呈现的相同 HTML 代码吗？从开发者工具复制它。

标签： html css reactjs flexbox

【解决方案1】：

问题在于您从按钮的左侧定位，如果按钮的宽度发生变化，您的位置将是错误的。所以它永远不会在响应式布局中工作。诀窍是相对于按钮的右侧定位：

Position:absolute 对 flex 布局没有影响。

在.btn-default 中添加position:relative;

删除您的 .notification-bubble 并将其替换为以下内容：

.notification-bubble:after {
    border-radius: 50%;
    background-color: red;
    border: 2px solid white;
    height: 20px;
    width: 20px;
    position: absolute;
    right:20px;
    top:-10px;
    content:"3";
    text-align:center;
    position:absolute;
}

你的 HTML 是

<div class="btn-default notification-bubble">
    Manage comment
</div>

摆弄top:-10px 和right:20px，直到你得到你想要的位置

这是一个工作示例：

.btn-default {
    border: 2px solid black;
    background-color: transparent;
    color: black;
    width:50vw;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Lucida Grande';
    border: 1px solid grey;
    border-radius: 2px;
    text-transform: uppercase;
    margin-top:100px;
    position:relative;
    margin:5px;
}

.btn-admin-1 {
    min-width: 23.33%;
    max-width: 33.33%;
}

.btn-admin-1:hover,
.btn-admin-2:hover {
    border: 1px solid white;
}

.test {
}


.notification-bubble:after {
    border-radius: 50%;
    background-color: red;
    border: 2px solid white;
    height: 20px;
    width: 20px;
    position: absolute;
    right:20px;
    top:-10px;
    content:"3";
    position:absolute;
    text-align:center;
}

.flexlayout {
display:flex;
flex-direction:row;

}

<div class="flexlayout">
<div class="btn-default">
Button 1
</div>

<div class="btn-default notification-bubble">
Button 2
</div>

<div class="btn-default">
Button 3
</div>
</div>

您的下一个问题是如何将content:"3" 更改为.notification-bubble:after 参见Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

【讨论】：

非常感谢约翰！这对我来说几乎是完美的。