Why when applying flex-direction column and justify-content center when trying to align a flex item at the start this doesn't work?

127 views Asked by At

I amm trying that the tomato color stripes in the columns are aligned at the top of each column, the left column is applied the property justify-content: center; and flex-direction: column; I have tried to align itself from the start using justify-self: flex-start; or align-self: flex-start; but neither achieves the effect I want.

Here the relevant section

Column

.one {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

The css for the element that I requires moving to the top

.mark {
  background-color: tomato;
  min-height: 50px;
  width: 100%;
  /* justify-self: flex-start; */
  align-self: flex-start;
}

Please take a look to the current state

#app {
  display: flex;
  
}

.one, .two {
  flex: 1
}

.one {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mark {
  background-color: tomato;
  min-height: 50px;
  width: 100%;
  justify-self: flex-start;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table th, table td {
  border: none;
  padding: 10px;
}

table tbody > tr:nth-child(2n) > td, table tbody > tr:nth-child(2n) > th {
  background-color: #fff7db;
}

table tbody > tr:nth-child(2n+1) > td, table tbody > tr:nth-child(2n+1) > th {
    background-color: #e5e6f3;
}

table th {
  height: 50px;
}

.collection {
  background-color: tomato;
}
<div id="app">
  <div class="one">
    <div class="mark"></div>
    <h1>Text</h1>
    <p>Lorem ipsum dolor sit amet consectetur.</p>
  </div>
  <div class="two">
    <table>
      <thead>
        <tr>
          <th colspan="3" class="collection">Collection</th>
          <th>A</th>
          <th>B</th>
          <th>C</th>
        </th>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>ABC</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>ABC</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>ABC</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>ABC</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>1</td>
          <td>ABC</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Thank you for your advices

0

There are 0 answers