调整大小时保持容器和儿童的比例

Question

我有基于flexbox的带或不带图像的模块化网格。 通常没有图像的卡是宽度的50％，带有图像的卡是宽度的100％，而那些没有图像的卡也不是100％。

----------------
[[ txt ][ img ]] – card with an image
----------------
[  txt ][ txt  ] – 2 cards without image
----------------
[      txt     ] – card without image
----------------
[[ txt ][ img ]] – card with an image
----------------

在调整大小时是否可以保持卡片及其内容的比例，并且还可以使用css保持模块化？

以下是代码 让我保持比例，但当我尝试将这种技术应用于卡片时，一切都会破坏

<div class="wrapper">
  <div class="card">
    <div class="card-text">
    </div>
    <div class="card-image">  
    </div>
  </div>
</div>

.wrapper
  display: flex
  flex-wrap: wrap
  justify-content: space-between
  width: 620px

.card
  height: 0
  padding-bottom: 50%
  display: flex
  flex-direction: row
  justify-content: space-between
  flex: 1 1 300px

.has-card-image .card-text,
.has-card-image .card-image
  height: 300px
  width: 300px

Answer 1

我可以看到一种方法可以用脚本完成。

在这种情况下，使用px值，或者例如使用vw，原因是card-text和card-image需要知道wrapper的宽度，以便根据预期的输出（这意味着百分比）不能用。）

Fiddle demo

Stack snippet

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
}

.card {
  display: flex;
  flex: 1 300px;
}

.card .card-text,
.card .card-image {
  height: 100px;
  width: 300px;
}

.card .card-text:only-child {
  flex: 1 300px;
}

/*  demo styles  */
.card .card-text, .card .card-image {
  border: 1px solid;
  box-sizing: border-box;
}
.card .card-text::before {
  content: 'text';
}
.card .card-image::before {
  content: 'image';
}

<div class="wrapper">
  <div class="card">
    <div class="card-text">
    </div>
    <div class="card-image">
    </div>
  </div>

  <div class="card">
    <div class="card-text">
    </div>
  </div>

  <div class="card">
    <div class="card-text">
    </div>
  </div>

  <div class="card">
    <div class="card-text">
    </div>
  </div>

  <div class="card">
    <div class="card-text">
    </div>
    <div class="card-image">
    </div>
  </div>  
</div>

如果您需要保证金，则需要额外的包装

Fiddle demo

Stack snippet

.wrapper {
  width: 620px;
  overflow: hidden;
}

.inner {
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
}

.card {
  display: flex;
  flex: 1 300px;
}

.card .card-text,
.card .card-image {
  height: 100px;
  width: 300px;
  margin-left: 20px;
}

.card .card-text:only-child {
  flex: 1 300px;
}


/*  demo styles  */
.card .card-text,
.card .card-image {
  border: 1px solid;
  box-sizing: border-box;
}

.card .card-text::before {
  content: 'text';
}

.card .card-image::before {
  content: 'image';
}

<div class="wrapper">
  <div class="inner">
    <div class="card">
      <div class="card-text">
      </div>
      <div class="card-image">
      </div>
    </div>

    <div class="card">
      <div class="card-text">
      </div>
    </div>

    <div class="card">
      <div class="card-text">
      </div>
    </div>

    <div class="card">
      <div class="card-text">
      </div>
    </div>

    <div class="card">
      <div class="card-text">
      </div>
      <div class="card-image">
      </div>
    </div>
  </div>
</div>

更新

以下是使用vw和保证金的版本，并且是响应式的。

注意，也可以在每个项目上设置包装上设置边距的补偿，但我发现它更简单。

Fiddle demo

Stack snippet

.wrapper {
  width: calc(80vw + 20px);  /*  20px extra for margin  */
  margin: 0 auto;
  overflow: hidden;
}

.inner {
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
}

.card {
  display: flex;
  flex: 1 40vw;
}

.card .card-text,
.card .card-image {
  height: 100px;
  width: 40vw;
  margin-left: 20px;
}

.card .card-text:only-child {
  flex: 1 40vw;
}


/*  demo styles  */
.card .card-text,
.card .card-image {
  border: 1px solid;
  box-sizing: border-box;
}

.card .card-text::before {
  content: 'text';
}

.card .card-image::before {
  content: 'image';
}

<div class="wrapper">
  <div class="inner">
    <div class="card">
      <div class="card-text">
      </div>
      <div class="card-image">
      </div>
    </div>

    <div class="card">
      <div class="card-text">
      </div>
    </div>

    <div class="card">
      <div class="card-text">
      </div>
    </div>

    <div class="card">
      <div class="card-text">
      </div>
    </div>

    <div class="card">
      <div class="card-text">
      </div>
      <div class="card-image">
      </div>
    </div>
  </div>
</div>