更改宽度，而无需更改flex中的其他元素

Question

我正在制作网站。在我的HTML文件中，我显示了一个Div作为Flexbox。这是一个水平div，具有7个元素(带有图像和标题的"卡"(。在悬停时，我希望该元素增加宽度。当我这样做时，它起作用了，但是行中的其他元素会降低以正确填充flex行。我宁愿他们传播，搬走，即使从屏幕上脱颖而出。我想在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使我想要。我不知道我在这里迷路了。

这是我的目标：
当您将鼠标放在元素上时，我想增加很多宽度，高度，模糊图像并在模糊的图像上显示一些文本(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>