H3 文本推动 flexbox 元素太宽答案

【问题标题】：H3 text pushing flexbox element too wideH3 文本推动 flexbox 元素太宽
【发布时间】：2014-10-15 10:33:53
【问题描述】：

我有一排 3 个元素，它们使用 JS 在悬停时显示 flex 属性。它可以工作，但是嵌套在每个元素内的 H3 元素中的文本具有不同的长度。此文本的长度将宽度推出。如果我将它们全部设置为它们正确显示的相同文本。

我将使用此代码两次，因此最终会有两列。但是，第二行的每个 H3 元素中的文本将完全不同。

我希望这些框不受文本的影响。我尝试的一切似乎都不起作用。有什么建议吗？

HTML

<ul id="ul2">
    <section class="secLI">
        <a href="plan/plan.html" class="li4">
            <li>
                <h3>Plan an Event</h3> 
            </li>
        </a>
    </section>
    <section class="secLI">
        <a href="bands/bands.html" class="li5">
            <li>
                <h3>Band Promo</h3>
            </li>
        </a>
    </section>
    <section class="secLI">
        <a href="contact/contact.html" class="li6">
            <li>
                <h3>Contact</h3>
            </li>
        </a>
    </section>
</ul>

<script>
    $(document).ready(function() {
        $("ul section").hover(function(){
           $(this).addClass("wrapper-hovered");
            $(this).siblings("section").removeClass("wrapper-hovered")
        });

    });
</script>

CSS

ul {
    display: -webkit-flex;
}

.wrapper-hovered {
    -webkit-flex: 1.5;
}

【问题讨论】：

您在寻找要换行的文本吗？
不，JS 和 CSS 使悬停的 LI 更宽。当悬停状态移动到不同的 LI 时，第一个会恢复到原始大小，而新的会变宽。基本上，除了 padding 和 margin，UL 的宽度都是 100%，每个 LI 占 33%，直到悬停。

标签： javascript jquery css flexbox

【解决方案1】：

首先，除了<li> 元素之外，您不能直接在<ul> 之后放置任何内容。

将 ul 替换为 wrap div 并完全删除 li。
将 flex 属性放置在节上。未悬停的部分为 flex: 1，在悬停时更改为 flex: 2 以调整大小。
使用 CSS :hover pseudo class 而不是使用 jQuery
在悬停时使用transition 让它看起来很漂亮。 transition property 应用于非悬停部分

在前缀版本之后为现代浏览器提供无前缀的 flex 属性。

演示

#wrap {
  display: -webkit-flex;
  display: flex;
}
#wrap section {
  -webkit-flex: 1;
  flex: 1;
  cursor: pointer;
  background: #cddc39;
  transition: all 0.2s;
  text-align: center;
}
#wrap section:hover {
  -webkit-flex: 2;
  flex: 2;
  background: #e6ee9c
}

<div id="wrap">
  <section class="secLI">
    <a href="plan/plan.html" class="li4">
      <h3>Plan an Event</h3> 
    </a>
  </section>
  <section class="secLI">
    <a href="bands/bands.html" class="li5">
      <h3>Band Promo</h3>
    </a>
  </section>
  <section class="secLI">
    <a href="contact/contact.html" class="li6">
      <h3>Contact</h3>
    </a>
  </section>
</div>

【讨论】：