css - Angular Material 对话框内的 4 列布局

Question

我需要在没有 Bootstrap 的情况下在 Material 对话框中显示 4 列。它即将到来的困惑，它也没有响应。我也尝试使用 flexbox 和普通的 css。但没有运气。我需要 4 个响应列，前 3 个是行取决于我的模型。但是，最后一个是具有行跨度的单个列(完整)

<mat-dialog-content class="mat-typography" style="padding: 0;margin:0;">
    <ul class="widthAuto">
        <li style="width:70%;">
            <div class='wrapper'>
                <ng-container *ngFor="let columnInfo of columnsDefinitions">
                    <ng-container *ngIf="columnInfo.isVisibleInsideFilterPopup">
                        <div class='row'>
                            <div class='column first-col'>
                                <label>{{columnInfo.title}}</label>
                                <!-- If any issue , add {{columnInfo.field}} and debug for more clarity  -->
                            </div>
                            <div class='column justify-content-center'>
                                <!-- CRITERIA SELECTION ACTION BUTTONS -->
                                <ng-container *ngFor="let criteriaKey of objectKeys(columnInfo.filterCriteria)">

                                    <span>
                                        <input type="submit" matTooltip=""
                                            class="button cursor-pointer"

                                            value="abc" />
                                    </span>
                                </ng-container>
                            </div>
                            <div class='column'>
                                <div [ngSwitch]="columnInfo.control">
                                   //All controls
                                </div>
                            </div>
                        </div>
                    </ng-container>
                </ng-container>
            </div>
        </li>
        <li style="width:30%;background:pink;vertical-align: top">
            <ul style=" padding: 0px;">
                <li>
                    <label class="bold">Fruit:</label>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>
                    <ul>
                        <li>Apple</li>
                        <li>Pear</li>
                        <li>Organge</li>
                    </ul>

                </li>
                <br />


            </ul>

        </li>
    </ul>
</mat-dialog-content>

.wrapper {
    margin: 1px;
  }

  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;margin-bottom:5px;
  }

  .column {
    display: flex;
    /* flex-direction: column; */
    flex-basis: 100%;
    flex: 1;
    margin:auto;
  }

  .justify-content-center{
    justify-content: center;
  }

.first-col{
    flex: 0 0 76px;
}
.widthAuto{
    width:auto;
}

Answer 1

通过对您的标记进行一些简化，下面的代码片段应该展示 4 个使用 flex-box 的响应列。

您可以使用flex-grow以响应式方式控制每一列的大小:

The flex-grow CSS property sets how much of the remaining space in the flex container should be assigned to that item (the flex grow factor).

允许容器(或对话框)控制大小。

希望这对您有所帮助。

.content {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

<html>
  <body>
    <div class='content'>
      <div class='column' style='background-color: red;'>
        <div class='row'>Column 1, Row 1</div>
        <div class='row'>Column 1, Row 2</div>
      </div>
      <div class='column' style='background-color: blue;'>
        <div class='row'>Column 2</div>
      </div>
      <div class='column' style='background-color: yellow;'>
        <div class='row'>Column 3</div>
      </div>
      <div class='column' style='background-color: green;'>
        <div class='row'>Column 4</div>
      </div>
    </div>
  </body>
</html>