Использование двух Flexbox в таблице - PullRequest
Новая
       8

Использование двух Flexbox в таблице

0 голосов
/ 02 августа 2020

Я пытаюсь научиться использовать flex-box и наткнулся на препятствие. Кажется, я не могу решить проблему. Я стараюсь, чтобы сторона «Flex-box Test» реагировала на его содержимое, но мне хотелось бы, чтобы на стороне «Сотрудник недели» была фиксированная позиция, но при этом его содержимое было гибким. Но когда я изменяю его размер, я хотел бы, чтобы сторона «Сотрудник недели» всегда начиналась вверху справа.

Есть ли что-то исправить? Есть ли какой-нибудь учебник о том, как правильно структурировать код html и CSS? Или лучше использовать таблицы? 

.body {
  background-color: white;
  display: none;
  margin: 0;
  border: 0;
}

.flexbox-container-flex {
  display: flex;
  flex-wrap: wrap;
  vertical-align: top;
  width: 100%;
  border-color: gray;
  background-color: black;
}

.flexbox-container-column {
  display: block;
  width: 100%;
  border-color: gray;
  background-color: black;
}

.flexbox-item {
  border: 5px solid black;
  background-color: gray;
}

.flexbox-item1 {
  height: 400px;
  width: 400px;
}

.flexbox-item2 {
  height: 200px;
  width: 200px;
}

.flexbox-item3 {
  height: 100px;
  width: 100px;
}

.textalignment {
  display: block;
  position: relative;
  text-align: left;
}
<body>
  <div>
    <table>
      <tr>
        <th>
          <h1 class="textalignment">FLEX Box Test</h1>
        </th>
        <th>
          <h1 class="textalignment">EMPLOYEE OF THE WEEK</h1>
        </th>
      </tr>
      <tr>
        <td>
          <div class="flexbox-container-flex">
            <div class="flexbox-item flexbox-item1"></div>
            <div class="flexbox-item flexbox-item2"></div>
            <div class="flexbox-item flexbox-item3"></div>
            <div class="flexbox-item flexbox-item1"></div>
            <div class="flexbox-item flexbox-item2"></div>
            <div class="flexbox-item flexbox-item3"></div>
          </div>
        </td>
        <td>
          <div class="flexbox-container-column">
            <div class="flexbox-item flexbox-item1"></div>
            <div class="flexbox-item flexbox-item2"></div>
            <div class="flexbox-item flexbox-item3"></div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</body>

Изображения: enter image description here введите описание изображения здесь

...