如何删除由 display: flex 自动创建的边距？

Question

我有一个 div，其中包含带有显示的收藏夹的整个列表：带有一堆 div 的 flex（带有包含收藏夹框本身和旁边的图像的 favourites-entry 类）。 favourites-entry 除了字体之外没有 css。图像有浮动：对。我将 favourites-box 宽度设置为 90%，以为图像会紧挨着它，但图像位于 favourites-box div 下方。我将收藏夹框的左右边距设置为 0，但由于某种原因，它不断在右侧创建额外的边距。

我尝试将收藏夹框的宽度设置为较低的值，但图像没有移动。我还尝试在 favourites-box div 上设置不同的位置和显示属性，但似乎没有任何需要。

.favourites-container {
  display: flex;
  flex-direction: column;
  width: 70%;
  margin: 100px auto;
}

.favourites-entry {
  font-family: 'Open Sans', sans-serif;
  /*Sets fonts for the placeholder text inside inputs*/
}

.favourites-box {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  /*Adds a shadow around the whole container*/
  border-radius: 5px;
  /*Makes corners of container rounded*/
  font-family: 'Open Sans', sans-serif;
  /*Sets fonts for the placeholder text inside inputs*/
  border: 1px solid #929292;
  /*Adds a border around the inputs*/
  margin: 20px 0;
  padding: 20px;
  width: 90%;
}

img.favourites {
  height: 80px;
  width: 80px;
  float: right;
}

<div class="favourites-entry">
  <div class="favourites-box">
    <h2 class="favourites">Vegetable Kofta - Starter</h2>
    Fried balls mixed with spices and besan, deep fried till crisp
    <button class="x-button">x</button>
  </div>
  <img src="image src" class="favourites">
</div>

Answer 1

也许你想要这样

.favourites-entry {
  font-family: 'Open Sans', sans-serif;
  display: flex;
  align-items: center;
}

.favourites-box {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  /*Adds a shadow around the whole container*/
  border-radius: 5px;
  /*Makes corners of container rounded*/
  font-family: 'Open Sans', sans-serif;
  /*Sets fonts for the placeholder text inside inputs*/
  border: 1px solid #929292;
  /*Adds a border around the inputs*/
  margin: 20px 0;
  padding: 20px;
  width: 90%;
}

img.favourites {
  height: 80px;
  width: 80px;
}

<div class="favourites-entry">
  <div class="favourites-box">
    <h2 class="favourites">Vegetable Kofta - Starter</h2>
    Fried balls mixed with spices and besan, deep fried till crisp
    <button class="x-button">x</button>
  </div>
  <img src="https://picsum.photos/200/300" class="favourites">
</div>

Answer 2

我的解决方案使用 flex-wrap 并将所有元素保持在顶部（而不是对齐中心）
另外 - 我的一个建议 - 你为什么不开始使用 Bootstrap 的 12 点网格系统 - 你会喜欢它的。
链接-https://getbootstrap.com/docs/4.0/layout/grid/

当前解决方案：

.favourites-container {
  display: flex;
  flex-direction: column;
  width: 70%;
  margin: 100px auto;      
}

.favourites-entry {
  display: flex;
  flex-wrap: wrap;      
  font-family: 'Open Sans', sans-serif;
  /*Sets fonts for the placeholder text inside inputs*/
}

.favourites-box {
  flex: 0 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  /*Adds a shadow around the whole container*/
  border-radius: 5px;
  /*Makes corners of container rounded*/
  font-family: 'Open Sans', sans-serif;
  /*Sets fonts for the placeholder text inside inputs*/
  border: 1px solid #929292;
  /*Adds a border around the inputs*/
  /*margin: 20px 0;*/
  padding: 20px;
  width: 90%;
}

img.favourites {
  flex: 0 40%;
  height: 80px;
  width: 80px;
  float: right;
}

<div class="favourites-entry">
  <div class="favourites-box">
    <h2 class="favourites">Vegetable Kofta - Starter</h2>
    Fried balls mixed with spices and besan, deep fried till crisp
    <button class="x-button">x</button>
  </div>
  <img src="image url" class="favourites">
</div>