Угловая флекс-верстка - PullRequest
Новая
       14

Угловая флекс-верстка

0 голосов
/ 26 июня 2018

У нас есть сайт Angular и на панели инструментов есть несколько разделов. На полном экране они отображаются в 2 столбцах. Правый столбец корректно отображается без зазоров, но в левом столбце есть пробелы, если поля справа слишком велики. Я приложил plunkr, который показывает пробелы. Я пробовал несколько конфигураций, но не могу заставить левый столбец работать так же, как правый. Убедитесь, что предварительный просмотр расширен до двух столбцов.

Пример Plunker

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

1010 * 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
}
...