0

I have a flex container with multiple flex items, 2 of which I need to flex grow based on the text so all divs space out the same way.

I was able to accomplish this like this:

<div class="outer product-grid">
  <div class="inner product-component">
    <a class="image"><img class="product-image" /></a>
    <a class="upper-text title">
      Short Upper Text
    </a>
    <div class="lower-text author">
      Short Lower Text
    </div>
    <h5 class="price"> <span>price</span> </h5>
  </div>

  <div class="inner">
    <a class="image"><img class="product-image" /></a>
    <a class="upper-text">
      Long Upper Text - Long Upper Text
    </a>
    <div class="lower-text">
      Long Lower Text - Long Lower Text
    </div>
    <h5 class="price"> price </h5>
  </div>

    <div class="inner">
      <a class="image"><img class="product-image" /></a>
    <a class="upper-text">
      Even Longer Upper Text - Even Longer Upper Text
    </a>
    <div class="lower-text">
      Even Longer Lower Text - Even Longer Lower Text
    </div>
    <h5 class="price"> price </h5>
  </div>
</div>

SCSS

.outer {
  display: flex;
  flex: wrap;
  .inner {
    border: 5px solid yellow;
    display: flex;
    text-align: center;
    margin-right: 1em;
    margin-bottom: 1.5em;
    width: 200px;
    flex-direction: column;
    font-size: 1.00em;
    a.image{
      border: 5px solid orange;
      img {
        width: em(160px);
        height: em(210px);
      }
    }
    a.upper-text {
      border: 5px solid red;
      flex: auto;
      margin: 0.2em auto;
      line-height: normal;
    }
    .lower-text {
      border: 5px solid green;
      flex: auto;
    }
  }
}

My upper-text and lower-text need to be different sizes. When I put a font-size into either of those classes, I lose the whole flex grow.

You can try on my codepen https://codepen.io/mxdavis/pen/KxxmKE by inserting font-size: 20px; to between line 24 and 25 (in the a.upper-text class) and you will see the red border no longer ends at the same point like it does when the font is not adjusted. https://codepen.io/mxdavis/pen/dqqzMy

I need the even sized boxes, and the adjusted font size. Flex seems to be the easiest route since upper-text and lower-text cannot be predicted.

Any advice is greatly appreciated.

Thanks!

Update: I realize now if I play with the text sizes and don't make upper and lower texts equal even my first code snippet doesn't work, which is probably why a font increase is throwing it off. Is there a way to accomplish this or should I just set a fixed height and then click to reveal more? https://codepen.io/mxdavis/pen/KxxedE

4

1 回答 1

0

I was able to accomplish this (for the most part) using flex and grid together.

I still have to guestimate a max template row for unpredictable text but at least I can guarantee the starting points with this.

https://codepen.io/mxdavis/pen/KxxedE

Here's the new css with the .inner now using display: grid instead of flex.

.outer {
  display: flex;
  flex-flow: row wrap;
  .inner {
    border: 5px solid yellow;
    display: grid;
    grid-template-rows: 210px minmax(max-content, 3fr) minmax(max-content, 2fr) 30px;
    grid-row-gap: 5px;
    text-align: center;
    margin-right: 1em;
    margin-bottom: 1.5em;
    width: 150px;
    font-size: 1.00em;
    a.image{
      border: 5px solid orange;
      img {
        width: em(160px);
        height: em(210px);
      }
    }
    a.upper-text {
      border: 5px solid red;
      line-height: normal;
    }
   .lower-text {
     border: 5px solid green;
    }
    .price {
      border: 5px solid blue;
      margin:  0;
    }
  }
}

I still would be interested to see how to rely ONLY on the most content for that row, without using tables.

于 2018-09-17T11:34:27.033 回答