Question

我无法使用flex更改文章图片的大小。我是flex的新手（也是编码的新手）并且已经阅读过：https://css-tricks.com/snippets/css/a-guide-to-flexbox/但仍然无法解决我的问题。我很欣赏一些指导。谢谢！

CSS

.prezi-container {
  display: flex;
  flex-wrap: wrap;
}

article {
  flex: 1 1 100%;
}

HTML

<section class="prezi-container">
  <article>
    <a href="http://www.domain/image1.com">
      <img class="presentation" src="images/image1" alt="Some alt text.">
    </a>
    <h4>Title</h4>
    <p>Click image to see presentation.</p>
  </article>
  <article>
    <a href="http://www.domain/image2.com">
      <img class="presentation" src="images/image2" alt="Some alt text.">
    </a>
    <h4>Title</h4>
    <p>Click image to see presentation.</p>
  </article>
   <article>
    <a href="http://www.domain/image3.com">
      <img class="presentation" src="images/image3" alt="Some alt text.">
    </a>
    <h4>Title</h4>
    <p>Click image to see presentation.</p>
  </article>
 </section>

Answer 1

article {
  flex: 1 1 100%;
}

基本上你的CSS代码的第一部分使你的文章元素彼此具有相同的大小，而不管可用的空间（flex：1 1）。 100％确保100％填充其容器的大小。因此，您有两个选项，要么将容器的大小设置为特定值，然后您的文章标签和图像将自己平均分配到该大小，或者您可以设置img标记的大小。在这两种情况下，您都需要使用width和height属性。见下文：

.presentation {
  width: 100px;
  height: 100px;
}

请注意，您必须包含/结束第2条和第3条，因为您忘记包含/

Answer 2

这似乎有效。我得到了我母亲的建议。耶！

.prezi-container {
  padding: 0;
  margin: 0;
  list-style: none;
  box-orient: horizontal;
  display: flex;
  flex: 1 1;
}

.presentation{
  max-width: 100%;
}

article {
  flex: 1 1;
}

图像不会随着flex而改变大小

2 个答案: