Flex - Baseline, children content alignment horizontally, stretching sub boxes

Question

I'm thinking I'n a decent way of managing my content not quite sure if it's possible thou.

Thought that fexbox can be handy... There are 3 simple cases on how I divided my problem

I want to have a grid with a background for items which aligns with the biggest element in the row.
I want to have all the stuff starting in the same line, like: title,description
I would like to have some items to stretch depending on the amount of content, but then I would like to have the other elements in the grid line, to start at the same row.

As currently this is mostly what I need, although I cannot manage the content to stretch depending on the amount. Some fields can be longer/shorter like description.

Another problem that comes to my mind is:

How to deal with the unnecessary white spaces?
Why is my grid element in the second row, the button is cut?

Additionally

First And Last Element can have fixed size.

//===========================
.wrapper {
   width: 1000px;      
   background: #7BB643;
}    
.flex-box {
  display: flex;
  flex-flow: row wrap;
  flex: 1;
}    
.grid-item {
  margin: 10px;
  background: #FFF;
  flex: 0 1 300px;
  display: inline-flex;
  flex-flow: column nowrap;
}    
.flex-item {
  color: black;
  display: flex;
  flex: 1;
  overflow: hidden;
  flex-flow: column wrap;
}    
.wishlist-item {}    
.name {}    
.long-name {}    
.desc {}    
.price-item {}    
.button-item {
  justify-content: flex-end;
}

//============================
//===========colors===========
//============================
.wishlist-item {
  color: red;
}    
.name {
  color: grey;
}    
.long-name {
  color: brown;
}    
.desc {
  color: orange
}    
.before-price {
  color: blue;
}    
.price {
  color: green;
}

https://jsfiddle.net/Przmak/feeyL8L4/

To make that possible using CSS alone, you need to drop the `.grid-item`'s so all the `flex-item`'s can _see_ each other (be siblings). — Asons, Oct 01 '17 at 17:59
Yeah, still how then maintain it to be 3x column in a row ? I guess my box can be a row where I will put data for only 3 columns, but how to handle then the data so it could be in each column? — Gosu Przmak, Oct 01 '17 at 20:26
Here is an answer of mine, and a possible duplicate, that show how to accomplish that (use 2 columns but the approach is the same) https://stackoverflow.com/a/46406863/2827823 — Asons, Oct 02 '17 at 06:46

kukkuz · Answer 1 · 2017-09-30T12:39:05.393

For flex-item change flex: 1 to flex: 1 1 auto - this means each flex-item will have flex-basis set to auto. This will stretch the flex-item as much as the content.

.wrapper {
  width: 1000px;
  
  background: #7BB643;
}

.flex-box {
  display: flex;
  flex-flow: row wrap;
  flex: 1;
}

.grid-item {
  margin: 10px;
  background: #FFF;
  flex: 0 1 300px;
  display: inline-flex;
  flex-flow: column nowrap;
}

.flex-item {
  color: black;
  display: flex;
  flex: 1 1 auto; /*CHANGED*/
  overflow: hidden;
  flex-flow: column wrap;
}

.wishlist-item {}

.name {}

.long-name {}

.desc {}

.price-item {}

.button-item {
  justify-content: flex-end;
}

//============================
//===========colors===========
//============================
.wishlist-item {
  color: red;
}

.name {
  color: grey;
}

.long-name {
  color: brown;
}

.desc {
  color: orange
}

.before-price {
  color: blue;
}

.price {
  color: green;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="wrapper">
  <div class="flex-box">
    <div class="grid-item">
      <div class="flex-item wishlist-item">
        <div>Add to wishlist</div>
      </div>
      <div class="flex-item name">
        <div>Qtlxy-name Qtlxy-name Qtlxy-name</div>
      </div>
      <div class="flex-item long-name">
        <div>
          Qtlxy-G3-V2-112-Qtlxy-G3-V2-112-1
        </div>
      </div>
      <div class="flex-item desc">
        <div>
          <span>
            This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ? 
                    </span>
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="before-price">
          Price
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="price">
          $567.00
        </div>
      </div>
      <div class="flex-item button-item">
        <button class="btn">
          Try It
        </button>
      </div>
    </div>
    <!-- GridItem/FlexItem -->
    <div class="grid-item">
      <div class="flex-item wishlist-item">
        <div>Add to wishlist
        </div>
      </div>
      <div class="flex-item name">
        <div>Qtlxy-name Qtlxy-name Qtlxy-name This can be pretty long 2 can it expand/shrink depending on CONTENT ?
        </div>
      </div>
      <div class="flex-item long-name">
        <div class="product-sku">
          Qtlxy-G3-V2-112-Qtlxy-G3-V2-112-1
        </div>
      </div>
      <div class="flex-item desc">
        <div>
          <span>
   As well as it can be short
                    </span>
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="before-price">
          Price
        </div>
      </div>
      <div class="flex-item price">
        <div class=" before-price ">
          $567.00
        </div>
      </div>
      <div class="flex-item button-item ">
        <button class="btn ">
          Try It
        </button>
      </div>
    </div>
    <!-- GridItem/FlexItem -->
    <div class="grid-item">
      <div class="flex-item wishlist-item">
        <div>Add to wishlist</div>
      </div>
      <div class="flex-item name">
        <div>Qtlxy-name Qtlxy-name Qtlxy-name</div>
      </div>
      <div class="flex-item long-name">
        <div>
          Qtlxy-G3-V2-112-Qtlxy-G3-V2-112-1
        </div>
      </div>
      <div class="flex-item desc">
        <div>
          <span>
            This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ? 
                    </span>
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="before-price">
          Price
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="price">
          $567.00
        </div>
      </div>
      <div class="flex-item button-item">
        <button class="btn">
          Try It
        </button>
      </div>
    </div>
    <!-- GridItem/FlexItem -->
    <div class="grid-item">
      <div class="flex-item wishlist-item">
        <div>Add to wishlist</div>
      </div>
      <div class="flex-item name">
        <div>Qtlxy-name Qtlxy-name Qtlxy-name</div>
      </div>
      <div class="flex-item long-name">
        <div>
          Qtlxy-G3-V2-112-Qt
        </div>
      </div>
      <div class="flex-item desc">
        <div>
          <span>
            This text can be small as well
                    </span>
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="before-price">
          Price
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="price">
          $567.00
        </div>
      </div>
      <div class="flex-item button-item">
        <button class="btn">
          Try It
        </button>
      </div>
    </div>
    <!-- GridItem/FlexItem -->
  </div>
  <!-- FlexBox -->
</div>
<!-- Wrapper -->

Additionally, to handle the whitespaces, maybe you can use flex: 0 0 auto for the wishlist-item, price-item and button-item. You can pull the price section down using margin-top: auto - see demo below:

.wrapper {
  width: 1000px;
  
  background: #7BB643;
}

.flex-box {
  display: flex;
  flex-flow: row wrap;
  flex: 1;
}

.grid-item {
  margin: 10px;
  background: #FFF;
  flex: 0 1 300px;
  display: inline-flex;
  flex-flow: column nowrap;
}

.flex-item {
  color: black;
  display: flex;
  flex: 1 1 auto; /*CHANGED*/
  overflow: hidden;
  flex-flow: column wrap;
}

.wishlist-item {
  flex: 0 0 auto; /* ADDED */
}

.name {}

.long-name {}

.desc {}

.price-item, .price {
  margin-top: auto; /* ADDED */
  flex: 0 0 auto; /* ADDED */
}

.button-item {
  /*justify-content: flex-end;*/
  margin-top: auto; /* ADDED */
  flex: 0 0 auto; /* ADDED */
}

//============================
//===========colors===========
//============================
.wishlist-item {
  color: red;
}

.name {
  color: grey;
}

.long-name {
  color: brown;
}

.desc {
  color: orange
}

.before-price {
  color: blue;
}

.price {
  color: green;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="wrapper">
  <div class="flex-box">
    <div class="grid-item">
      <div class="flex-item wishlist-item">
        <div>Add to wishlist</div>
      </div>
      <div class="flex-item name">
        <div>Qtlxy-name Qtlxy-name Qtlxy-name</div>
      </div>
      <div class="flex-item long-name">
        <div>
          Qtlxy-G3-V2-112-Qtlxy-G3-V2-112-1
        </div>
      </div>
      <div class="flex-item desc">
        <div>
          <span>
            This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ? 
                    </span>
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="before-price">
          Price
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="price">
          $567.00
        </div>
      </div>
      <div class="flex-item button-item">
        <button class="btn">
          Try It
        </button>
      </div>
    </div>
    <!-- GridItem/FlexItem -->
    <div class="grid-item">
      <div class="flex-item wishlist-item">
        <div>Add to wishlist
        </div>
      </div>
      <div class="flex-item name">
        <div>Qtlxy-name Qtlxy-name Qtlxy-name This can be pretty long 2 can it expand/shrink depending on CONTENT ?
        </div>
      </div>
      <div class="flex-item long-name">
        <div class="product-sku">
          Qtlxy-G3-V2-112-Qtlxy-G3-V2-112-1
        </div>
      </div>
      <div class="flex-item desc">
        <div>
          <span>
   As well as it can be short
                    </span>
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="before-price">
          Price
        </div>
      </div>
      <div class="flex-item price">
        <div class=" before-price ">
          $567.00
        </div>
      </div>
      <div class="flex-item button-item ">
        <button class="btn ">
          Try It
        </button>
      </div>
    </div>
    <!-- GridItem/FlexItem -->
    <div class="grid-item">
      <div class="flex-item wishlist-item">
        <div>Add to wishlist</div>
      </div>
      <div class="flex-item name">
        <div>Qtlxy-name Qtlxy-name Qtlxy-name</div>
      </div>
      <div class="flex-item long-name">
        <div>
          Qtlxy-G3-V2-112-Qtlxy-G3-V2-112-1
        </div>
      </div>
      <div class="flex-item desc">
        <div>
          <span>
            This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ?This text can be really long, can it shrik/expand depending on content ? 
                    </span>
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="before-price">
          Price
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="price">
          $567.00
        </div>
      </div>
      <div class="flex-item button-item">
        <button class="btn">
          Try It
        </button>
      </div>
    </div>
    <!-- GridItem/FlexItem -->
    <div class="grid-item">
      <div class="flex-item wishlist-item">
        <div>Add to wishlist</div>
      </div>
      <div class="flex-item name">
        <div>Qtlxy-name Qtlxy-name Qtlxy-name</div>
      </div>
      <div class="flex-item long-name">
        <div>
          Qtlxy-G3-V2-112-Qt
        </div>
      </div>
      <div class="flex-item desc">
        <div>
          <span>
            This text can be small as well
                    </span>
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="before-price">
          Price
        </div>
      </div>
      <div class="flex-item price-item">
        <div class="price">
          $567.00
        </div>
      </div>
      <div class="flex-item button-item">
        <button class="btn">
          Try It
        </button>
      </div>
    </div>
    <!-- GridItem/FlexItem -->
  </div>
  <!-- FlexBox -->
</div>
<!-- Wrapper -->

Maybe educated a bit, although this doesn't solve my problem, I need all items to start in the same line while they are all expandable and corelate which each other in terms of length, which could be dynamic on all fields expect the first and last one — Gosu Przmak, Oct 01 '17 at 14:53
that may not be possible since you *can't* align the flex-items "cousins" that are in different flexboxes... — kukkuz, Oct 01 '17 at 15:57

Flex - Baseline, children content alignment horizontally, stretching sub boxes

1 Answers1