主页 / coding / 问题 / 77878552
Accepted
Jim Macaulay
Asked: 2024-01-25 16:42:57 +0800 CST

CSS Flex 容器 - 调整内容

  • 772

我有下面的 html 代码，我在证明内容时面临。

<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>

目前的结果是， 在此输入图像描述

预期结果，

在此输入图像描述

正在尝试使用对齐内容方法，无法使其对齐。任何建议将不胜感激

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

1 个回答

  1. Best Answer

    “flex-items”的父级是“flex-container”，因此当您想要调整内容时，您应该将“justify-content:space- Between”放置到父容器而不是子容器本身。

    此外，对于底部容器，如果要使其扩展到视口的宽度，则应将表格的宽度设置为 100%，因为父容器具有“display:flex”样式。也许您可以将底部表格容器更改为“flex-item”以保持一致性并更轻松地管理样式。

    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

相关问题