Question

我有一个带有flexbox的两列布局。在第二列中，存在具有属性width = 100％和min-width = 100px的图像。我希望它缩小，直到达到最小宽度然后流到下一行。但它并没有。它只缩小到原始图像宽度，然后流向下一行，并且只有在流动后才开始再次收缩。如何在不流入下一行的情况下让它缩小？您可以在此处查看我的页面：https://codepen.io/davjdek/pen/WMKbrY

＆＃13;

.container {
  display: -webkit-flex;
  /* Safari */
  -webkit-flex-wrap: wrap;
  /* Safari 6.1+ */
  display: flex;
  flex-wrap: wrap;
}

h1 {
  font-size: 2em;
}

h1,
h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.containwrap {
  flex-grow: 1;
  margin-right: 50px;
}

#container1 {
  margin-left: auto;
  height: 120px;
}

#endtitleline {
  height: 4px;
  background-color: #aaa;
  border: 0;
  width: 100%
}

#pagetitle {
  margin-left: auto;
}

#name,
#subtitle {
  text-align: right;
}

.header {
  margin-top: 25px;
  display: -webkit-flex;
  /* Safari */
  -webkit-flex-wrap: wrap;
  /* Safari 6.1+ */
  display: flex;
  flex-wrap: wrap;
}

#pagetitle {
  font-family: 'Raleway', arial, sans-serif;
}

.sidebar {
  margin-top: 100px;
  margin-left: 25px;
  margin-right: 20px;
  width: 80px;
  height: 300px;
  background-color: red;
}

.central-img {
  width: 100%;
  min-width: 100px;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />

<header class="header">
  <aside class="sidebar">
  </aside>
  <section class="containwrap">
    <section class="container" id="container1">
      <div id="pagetitle">
        <h1 id="name">
          PORTFOLIO
        </h1>
        <h3 id="subtitle">
          FLEXBOX LAYOUT
        </h3>
      </div>
      <hr id="endtitleline">
    </section>

    <img src="https://s13.postimg.org/xkfa8rtvr/image.gif" class="central-img" />

  </section>
</header>
<section class="main">
</section>

＆＃13;

Answer 1

img强制.containwrap元素的宽度。可以将width: 0; max-width: 100%;添加到.containwrap，使其折叠到比图像的实际宽度窄的宽度。

这是Codepen，因此您可以尝试响应。

.container {
  display: -webkit-flex;
  /* Safari */
  -webkit-flex-wrap: wrap;
  /* Safari 6.1+ */
  display: flex;
  flex-wrap: wrap;
}

h1 {
  font-size: 2em;
}

h1,
h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.containwrap {
  flex-grow: 1;
  margin-right: 50px;
  width: 0;
  max-width: 100%;
}

#container1 {
  margin-left: auto;
  height: 120px;
}

#endtitleline {
  height: 4px;
  background-color: #aaa;
  border: 0;
  width: 100%
}

#pagetitle {
  margin-left: auto;
}

#name,
#subtitle {
  text-align: right;
}

.header {
  margin-top: 25px;
  display: -webkit-flex;
  /* Safari */
  -webkit-flex-wrap: wrap;
  /* Safari 6.1+ */
  display: flex;
  flex-wrap: wrap;
}

#pagetitle {
  font-family: 'Raleway', arial, sans-serif;
}

.sidebar {
  margin-top: 100px;
  margin-left: 25px;
  margin-right: 20px;
  width: 80px;
  height: 300px;
  background-color: red;
}

.central-img {
  width: 100%;
  display: inline-block;
  min-width: 100px;
}

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />

<header class="header">
  <aside class="sidebar">
  </aside>
  <section class="containwrap">
    <section class="container" id="container1">
      <div id="pagetitle">
        <h1 id="name">
          PORTFOLIO
        </h1>
        <h3 id="subtitle">
          FLEXBOX LAYOUT
        </h3>
      </div>
      <hr id="endtitleline">
    </section>

    <img src="https://s13.postimg.org/xkfa8rtvr/image.gif" class="central-img" />

  </section>
</header>
<section class="main">
</section>

Answer 2

添加此代码并查看其是否有效

.containwrap {
    width: 10%;
}

我能够让它工作，我下载了你的codepen，这段代码工作

图像流向下一行而不是在flexbox双列布局中缩小

2 个答案: