How to position the cells while maintaining the baseline levelling



  • There's a table. The table uses a flex baseline. How in the case of two or more, raise the content of the cells above?

    нужно так


  • QA Engineer

    Turning the data cells into two emplacements:

    • The internal equates the cells with the base line text.
    • And the outside compares it with its central axis.

    If the text in the cell is two rows instead of one, the cell increases the height of the internal unit, and it rises inside the outside.

    Added the boundaries between the lines to show how the text was moving in the cells.

    https://codepen.io/glebkema/pen/XWaZNEP?editors=1100

    /* Суть дела */
    .mainrow {
      display: flex;
      align-items: center;
    }
    .subrow {
      display: flex;
      align-items: baseline;
    }
    

    /* Красота для наглядности */
    .mainrow {
    border-top: 2px solid blue;
    font: bold 14px Verdana, sans-serif;
    margin: 0;
    min-height: 80px;
    }
    .mainrow:last-of-type {
    border-bottom: 2px solid blue;
    }
    .text {
    padding: 0 15px;
    }
    .subrow,
    .text:nth-child(2) {
    flex-grow: 1;
    }

    <div class="mainrow">
    <div class="subrow">
    <div class="text">03/01/2021</div>
    <div class="text">Одна строка</div>
    <div class="text">9,999,999 MXN</div>
    <div class="text">1234567890</div>
    </div>
    </div>

    <div class="mainrow">
    <div class="subrow">
    <div class="text">03/01/2021</div>
    <div class="text">Две <br>строки</div>
    <div class="text">9,999,999 MXN</div>
    <div class="text">1234567890</div>
    </div>
    </div>

    <div class="mainrow">
    <div class="subrow">
    <div class="text">03/01/2021</div>
    <div class="text">Три строки <br>начинаются <br>ещё выше</div>
    <div class="text">9,999,999 MXN</div>
    <div class="text">1234567890</div>
    </div>
    </div>



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2