Início / coding / Perguntas / 77878552
Accepted
Jim Macaulay
Asked: 2024-01-25 16:42:57 +0800 CST

CSS Flex Container - Justificar conteúdo

  • 772

Tenho abaixo o código html, estou enfrentando enquanto justifico o conteúdo.

<style>
flex-container {
 display: flex;
}
</style>
<div class = "content" style="border: 2px solid;">

<flex-container>
  <flex-item class="flex1">
     <div>
    <table>
     <tr><th>1</th><td>Left line1</td></tr>
    <tr><th>2</th><td>Left line2</td></tr>
   <tr><th>3</th><td>Left line3</td></tr>
   <tr><th>4</th><td>Left line4</td></tr>
    </table>
    </div>
</flex-item>

<flex-item class="flex2">
    <div>
     <table>
     <tr><th>1</th><td>Right line1</td></tr>
    <tr><th>2</th><td>Right line2</td></tr>
   <tr><th>3</th><td>Right line3</td></tr>
   <tr><th>4</th><td>Right line4</td></tr>
    </table>
    </div>
</flex-item>

<flex-container>
<table style = "border: 1px solid black;">
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    <th>Column4</th>
    <th>Column5</th>
    
     <tr>
        <td>Data1 for Column1</td>
        <td>Data1 for Column2</td>
        <td>Data1 for Column3</td>
        <td>Data1 for Column4</td>
        <td>Data1 for Column5</td>
     </tr>
<tr>
        <td>Data2 for Column1</td>
        <td>Data2 for Column2</td>
        <td>Data2 for Column3</td>
        <td>Data2 for Column4</td>
        <td>Data2 for Column5</td>
     </tr>
    
</table>
</flex-container>

</div>

O resultado atual é, insira a descrição da imagem aqui

Resultado esperado,

insira a descrição da imagem aqui

Estava tentando usar o método justificar conteúdo, mas não consegui alinhá-lo. Qualquer sugestão seria apreciada

.flex1 {
    justify-content: flex-start;
}
.flex2 {
    justify-content: flex-end;
}
html

1 respostas

  1. Best Answer

    O pai de "flex-items" é "flex-container", portanto, quando você quiser justificar o conteúdo, coloque o "justify-content:space-between" no contêiner pai e não no próprio filho.

    Além disso, para o contêiner inferior, você deve definir a largura como 100% para a tabela se quiser expandi-la para a largura da janela de visualização, já que o contêiner pai tem o estilo "display:flex". Talvez você possa alterar o contêiner da tabela inferior para "item flexível" para obter consistência e facilitar o gerenciamento do estilo.

    flex-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex-3{
  width: 100%;
}

.flex-3 table{
  width:100%; 
}
    <div class = "content" style="border: 2px solid;">
  <flex-container>
    <flex-item class="flex1">
      <div>
        <table>
          <tr><th>1</th><td>Left line1</td></tr>
          <tr><th>2</th><td>Left line2</td></tr>
          <tr><th>3</th><td>Left line3</td></tr>
          <tr><th>4</th><td>Left line4</td></tr>
        </table>
      </div>
    </flex-item>

    <flex-item class="flex2">
      <div>
        <table>
          <tr><th>1</th><td>Right line1</td></tr>
          <tr><th>2</th><td>Right line2</td></tr>
          <tr><th>3</th><td>Right line3</td></tr>
          <tr><th>4</th><td>Right line4</td></tr>
        </table>
      </div>
    </flex-item>
    
    <flex-container class="flex-3">
      <table style = "border: 1px solid black;">
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
        <th>Column4</th>
        <th>Column5</th>
        <tr>
          <td>Data1 for Column1</td>
          <td>Data1 for Column2</td>
          <td>Data1 for Column3</td>
          <td>Data1 for Column4</td>
          <td>Data1 for Column5</td>
        </tr>
        <tr>
          <td>Data2 for Column1</td>
          <td>Data2 for Column2</td>
          <td>Data2 for Column3</td>
          <td>Data2 for Column4</td>
          <td>Data2 for Column5</td>
        </tr>
      </table>
    </flex-container>
  </flex-container>
</div>

    • 1

relate perguntas