时间戳

首页 > 解决方案 > Flexbox div 不占用整个水平空间

html - Flexbox div 不占用整个水平空间

问题描述

我有一个带有 3 个组件的角度页面，我试图填满整个水平空间。目前，父 flexbox div 没有扩展到全长，即使我有 width: 100% 。我可以使用像素值来更改宽度，但是我不知道加载页面时视口的宽度。我尝试将边距和填充设置为 0，确保子 flexdiv 的宽度加起来为 100%，等等...

相关html：

<div fxLayout="row" fxLayoutGap="15px" id="bottomContainer">
      <div fxFlex="1 0 40%"><mat-card gdArea="chart">
        <mat-card-subtitle>Messages Flagged <br>{{period}}<button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button></mat-card-subtitle>
        <mat-menu #menu="matMenu">
          <button mat-menu-item (click)="period = 'Week'; periodInt = 0; changeMessagesFlaggedChartPeriod('Week')">Week</button>
          <button mat-menu-item (click)="period = 'Month'; periodInt = 1; changeMessagesFlaggedChartPeriod('Month')">Month</button>
          <button mat-menu-item (click)="period = 'Year'; periodInt = 2; changeMessagesFlaggedChartPeriod('Year')">Year</button>
        </mat-menu>
        <mat-card-content gdAreas="chart | list" gdRows="auto">
          <div style="display: block">
            <canvas baseChart
                    [datasets]="this.currentMessagesFlaggedDataset"
                    [labels]="this.MESSAGES_FLAGGED_LABELS"
                    chartType="radar"
                    [options]="this.messagesFlaggedChartOptions"
                    [colors]="this.channelData.chartColors"
                    height="100%"
                    width="100%"
          ></canvas>
          </div>
        </mat-card-content>
      </mat-card></div>

      <div fxFlex="1 1 30%"><mat-card class="mat-elevation-z2 channelUserTableContainer">
        <mat-card-subtitle>Most Negative Users</mat-card-subtitle>
        <table mat-table class="channelUserTable" [dataSource]="channelData.negativeUsers">
          <!-- Username column -->
          <ng-container matColumnDef="username">
            <th mat-header-cell *matHeaderCellDef>Username</th>
            <td mat-cell *matCellDef="let element"> {{element.username}}</td>
          </ng-container>

          <!-- Number of flags column -->
          <ng-container matColumnDef="numFlags">
            <th mat-header-cell class="textAlignRight" *matHeaderCellDef>Number of Flags</th>
            <td mat-cell class="textAlignRight" *matCellDef="let element"> {{element.numFlags}}</td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="userTableColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: userTableColumns;"></tr>
        </table>
      </mat-card></div>

      <div fxFlex="1 1 30%"><mat-card class="mat-elevation-z2 channelUserTableContainer">
        <mat-card-subtitle>Most Positive Users</mat-card-subtitle>
        <table mat-table class="channelUserTable" [dataSource]="channelData.positiveUsers">
          <!-- Username column -->
          <ng-container matColumnDef="username">
            <th mat-header-cell *matHeaderCellDef>Username</th>
            <td mat-cell *matCellDef="let element"> {{element.username}}</td>
          </ng-container>

          <!-- Number of flags column -->
          <ng-container matColumnDef="numFlags">
            <th mat-header-cell class="textAlignRight" *matHeaderCellDef>Number of Flags</th>
            <td mat-cell class="textAlignRight" *matCellDef="let element"> {{element.numFlags}}</td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="userTableColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: userTableColumns;"></tr>
        </table>
      </mat-card></div>
    </div>

CSS：

  padding-left: 16px;
  padding-top: 16px;
}

#channelHeaderText {
  font-size: x-large;
  font-weight: bold;
}

.mindChartNoMargin :nth-child(1) {
  margin: 0;
}

.channelUserTable {
  width: 100%;
}

.channelUserTableContainer {
  background-color: white;
}

.textAlignRight {
  text-align: right;
}

#bottomContainer {
  width: 100%;
}

问题

非常感谢帮助

标签： htmlcssangularflexbox

解决方案

尝试将宽度移动到容器中，也尝试使容器成为 flexbox 并且项目也可以弯曲。

.channelUserTableContainer { 
    background-color: white; 
    width: 100%;
    display: flex; 
}

.channelUserTable {
    display: flex;
}

我喜欢添加虚线来了解 flexbox 是如何工作的，因此您也可以添加虚线边框

border: dotted;

推荐阅读