flex 行中只有一个 item 的元素是可选的

问题描述

我正在通过开始构建一个简单的网页来学习 React（我知道，矫枉过正。）但我遇到了一个奇怪的问题。

所以我的主页上有三个“气泡”，每个都包含一个图标、标题和文本。我在其父容器中使用 flex 将它们对齐为一行，但是当我这样做时，我只能选择最后一个“气泡”的标题和文本。

如果我选择 flex-direction: column;（或者如果我没有设置方向），我可以选择所有三个气泡的文本。如果我选择：flex-direction: row; 和 flex-wrap: wrap;，然后将窗口变小，以便其中一个气泡进入下一行，我可以从第一行的 1/2 气泡中选择文本，然后第二行气泡中的文字。

此外，:hover 在 CSS 代码的最后一部分不再起作用。

在这个问题上已经解决了几天，对我来说毫无意义。先谢谢您的帮助。请参阅下面的代码。

.home-services {
  padding: 50px;
  background-color: bisque;
  transform: skewY(-3deg) translateY(-55px);
  z-index: -1;
}

.home-bubbles {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  transform: skewY(3deg) translateY(50px);
  width: 100%;
  user-select: all;
  z-index: -1;
}

.home-services-bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  padding: 10px 30px;
  background-color: #ffffff;
  border-radius: 10px;
  Box-shadow: 2px 3px #ddd;
  width: 29%;
}

.bubble-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f64a01;
  height: 100px;
  width: 100px;
  font-size: 3vw;
  text-align: center;
  border-radius: 100px;
  color: #ffffff;
}

.home-services-bubble:hover .bubble-icon {
  transform: translateY(-5px);
  background-color: black;
  Box-shadow: 2px 3px #ddd;
  transition: 0.5s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<div class="home-services">
  <div class="home-bubbles">
    <div class="home-services-bubble">
      <div class="bubble-icon">
        <i class="fas fa-search fa-2x"></i>
      </div>
      <div class="bubble-title">
        <h2>Lorem ipsum dolor</h2>
      </div>
      <div class="bubble-text">
        <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="home-services-bubble">
      <div class="bubble-icon">
        <i class="fas fa-wind  fa-2x"></i>
      </div>
      <div class="bubble-title">
        <h2>Lorem ipsum dolor</h2>
      </div>
      <div class="bubble-text">
        <p>Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="home-services-bubble">
      <div class="bubble-icon">
        <i class="fas fa-sign  fa-2x"></i>
      </div>
      <div class="bubble-title">
        <h2>Lorem ipsum dolor</h2>
      </div>
      <div class="bubble-text">
        <p>Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
</div>

解决方法

值为 all 的 user-select 属性只需单击即可选择整个文本。只需像这样删除它：

.home-bubbles {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  transform: skewY(3deg) translateY(50px);
  width: 100%;
  z-index: -1;
}