时间戳

首页 > 解决方案 > 角度弹性布局未正确换行

angular - 角度弹性布局未正确换行

问题描述

我们有一个 Angular 站点，仪表板上有多个部分。在全屏上，它们显示为 2 列。右列正确显示，没有间隙，但当右侧的框太大时，左列有间隙。我附上了一个显示差距的plunkr。我尝试了多种配置，但似乎无法让左列与右列一样工作。确保将预览扩大到有 2 列。

Plunker 示例

模板.html 

<head>
</head>

<body>
    <div>
        <h2>Hello {{name}}</h2>
    </div>

    <div id="wrapper">
        <!-- Main page wrapper -->
        <div id="page-wrapper" class="gray-bg">
            <!-- Main view/routes wrapper-->
            <div class="wrapper wrapper-content">

                <div class="row">
                    <div class="content" fxLayout="row" fxLayout.xs="column">
                        <div fxFlexOrder="0">
                            <div class="col-sm-6 sec1">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>Box 1 Title</h5>
                                    </div>
                                    <div class="ibox-content text-center">
                                        <h2>Box 1 content</h2>
                                        <h2>Box 1 content</h2>

                                    </div>
                                    <div class="ibox-footer text-center">
                                        <h4>box footer </h4>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div fxFlexOrder="1">
                            <div class="col-sm-6 sec2">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>Box 2 Title</h5>
                                    </div>
                                    <div class="ibox-content text-center">
                                        <h2>Box 2 content</h2>

                                    </div>
                                    <div class="ibox-footer text-center">
                                        <h4>box footer </h4>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div fxFlexOrder="2">
                            <div class="col-sm-6 sec3">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>Box 3 Title</h5>
                                    </div>
                                    <div class="ibox-content text-center">
                                        <h2>Box 3 content</h2>

                                    </div>
                                    <div class="ibox-footer text-center">
                                        <h4>box footer </h4>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div fxFlexOrder="3">
                            <div class="col-sm-6 sec4">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>Box 4 Title</h5>
                                    </div>
                                    <div class="ibox-content text-center">
                                        <h2>Box 4 content</h2>

                                    </div>
                                    <div class="ibox-footer text-center">
                                        <h4>box footer </h4>
                                    </div>
                                </div>
                            </div>
                        </div>




                        <div fxFlexOrder="5">
                            <div class="col-sm-6 no-padding sec5">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>Box 5 Title</h5>
                                    </div>
                                    <div class="ibox-content text-center">
                                        <h2>Box 5 content</h2>
                                        <h2>Box 5 content</h2>

                                    </div>
                                    <div class="ibox-footer text-center">
                                        <h4>box footer </h4>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div fxFlexOrder="6">
                            <div class="col-sm-6 sec6">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>Box 6 Title</h5>
                                    </div>
                                    <div class="ibox-content text-center">
                                        <h2>Box 6 content</h2>

                                    </div>
                                    <div class="ibox-footer text-center">
                                        <h4>box footer </h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
        <!-- End wrapper-->
    </div>

</body>

</html>

css

.sec1 {
  background: red;
  color:white;
  text-transform: uppercase
}

.sec2 {
  background: yellow;
  color:blue;

}

.sec3 {
  background: blue;
  color:white;
  text-transform: uppercase
}

.sec4 {
  background: green;
  color:white;
  text-transform: uppercase
}

.sec5 {
  background: purple;
  color:white;
  text-transform: uppercase
}

.sec6 {
  background: orange;
  color:white;
  text-transform: uppercase
}

标签： angularangular-flex-layout

解决方案

推荐阅读