角材料对话框内的 4 列布局答案

【问题标题】：4 column layout inside angular material dialog角材料对话框内的 4 列布局
【发布时间】：2019-06-05 16:30:22
【问题描述】：

我需要在没有引导程序的情况下在材质对话框中显示 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;
}

【问题讨论】：

您能否在问题中加入一些html 和css？
@AndyJenkins 我添加了，请检查一次

标签： css flexbox angular-material

【解决方案1】：

通过对您的标记进行一些简化，下面的 sn-p 应该使用 flex-box 演示 4 个响应列。

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

flex-grow CSS 属性设置剩余空间的多少弹性容器应该分配给那个项目（弹性增长因子）。

允许容器（或对话框）控制大小。

希望这会有所帮助。

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

【讨论】：