Question

我刚开始使用flex布局并遇到一个问题。我有以下代码：

        wrapper  {display: flex; width: 100%; }
        graphic  {flex-grow: 1; flex-shrink: 1; text-align: center;}
        graphic img {width: 100%; max-width: 400px;}
        nav      {width: 200px;}

    <wrapper>
        <nav><img src="http://lorempixel.com/200/200/" /></nav>
        <graphic><img src="http://lorempixel.com/200/100/" /></graphic>
        <nav><img src="http://lorempixel.com/200/200/" /></nav>
    </wrapper>

左右是固定宽度;调整浏览器窗口大小时，中心会增长和缩小 - 好了到目前为止。但是我想防止中心图像超出它的自然尺寸。我希望max-width可以完成这项工作，但事实并非如此。你能以正确的方式解释原因和方法吗？我的浏览器是Opera。 PS：对不起自制的标签，我从另一个论坛得到了这个代码，但还没有更正。

Answer 1

通过查看代码，看起来max-width: 400px应该应用于图像的父元素，在这种情况下<graphic>这将阻止图像容器大于400px。

graphic  {
  flex-grow: 1; 
  flex-shrink: 1; 
  max-width: 400px;
  text-align: center; 
}
graphic img {
  width: 100%;
}

flex项目内的图像忽略max-width

1 个答案: