更改宽度而不更改 flex 中的其他元素

Question

我正在做一个网站。在我的 HTML 文件中，我有一个 div 显示为弹性框。它是一个包含 7 个元素的水平 div（'cards'，带有图像和标题）。悬停时，我希望元素增加宽度。当我这样做时，它可以工作，但行中的其他元素会减少以正确填充弹性行。我宁愿他们散开，走开，即使离开屏幕一点点。我想制作一些类似于 Netflix 网站上关于悬停的电影卡片。

所以这里是我的网站（相关部分）的简化：

body {
  margin: 0;
  font-family: sans-serif;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.element {
  width: 12%;
  margin: 1.1428571vw;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  cursor: pointer;
  transition: all .28s;
}

.element:hover {
  width: 35%;
}

.element img {
  width: 100%;
  height: 17vw;
  margin: 0;
}

.element h1 {
  width: 100%;
  height: 35px;
  font-size: 16px;
  font-weight: lighter;
  margin: 14px 0;
}

<div class="row">
  <div id="element1" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 1</h1>
  </div>
  <div id="element2" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 2</h1>
  </div>
  <div id="element3" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 3</h1>
  </div>
  <div id="element4" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 4</h1>
  </div>
  <div id="element5" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 5</h1>
  </div>
  <div id="element6" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 6</h1>
  </div>
  <div id="element7" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 7</h1>
  </div>
</div>

所以也许我应该使用 JavaScript 来满足我的需求。我不知道我在这里有点迷路。

这是我的objective：
当您将鼠标放在一个元素上时，我想增加很多宽度，稍微增加高度，模糊图像并在模糊图像（h1、h2 和 p）上显示一些文本。

我真的需要一个方向来实现这一切。非常感谢您的帮助。

Answer 1

为防止缩水，只需将flex-shrink:0添加到.element即可：

body {
  margin: 0;
  font-family: sans-serif;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.element {
  width: 12%;
  margin: 1.1428571vw;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  cursor: pointer;
  transition: all .28s;
  flex-shrink:0; /* <------ Add this */
}

.element:hover {
  width: 35%;
}

.element img {
  width: 100%;
  height: 17vw;
  margin: 0;
}

.element h1 {
  width: 100%;
  height: 35px;
  font-size: 16px;
  font-weight: lighter;
  margin: 14px 0;
}

<div class="row">
  <div id="element1" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 1</h1>
  </div>
  <div id="element2" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 2</h1>
  </div>
  <div id="element3" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 3</h1>
  </div>
  <div id="element4" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 4</h1>
  </div>
  <div id="element5" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 5</h1>
  </div>
  <div id="element6" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 6</h1>
  </div>
  <div id="element7" class="element">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzNkMWNmZGUtNWFlZi00MTYwLWIwMjQtOGViN2QzNmI2MWYwXkEyXkFqcGdeQXVyODA1MDc5NjM@._V1_.jpg" />
    <h1>Element 7</h1>
  </div>
</div>

更改宽度而不更改 flex 中的其他元素

Change width without changing other elements in flex

html

css

hover

sizing

flexbox