Область блоков

Область на странице или панели, в которой информация визуально разделена по смыслу или содержанию на отдельные блоки.

<!-- WML -->
<div class="controls__block-layout" style="height: 600px;">
    <div class="ws-flexbox">
        <div class="ws-flexbox ws-flex-column ws-flex-grow-1">
            <div class="controls__block-layout-item">
                <div class="controlsDemo-newBlocks__block">1</div>
            </div>
            <div class="controls__block-layout-item">
                <div class="controlsDemo-newBlocks__block">2</div>
            </div>
        </div>
        <div class="ws-flex-grow-1 ws-flexbox ws-flex-column">
            <div class="controls__block-layout-item ws-flex-grow-1">
                <div class="controlsDemo-newBlocks__block">3</div>
            </div>
        </div>
    </div>
</div>

Чтобы организовать область блоков, есть два основных элемента, описание которых происходит с помощью css-классов:

• раскладка — controls__block-layout;
• блок — controls__block-layout-item.

Класс controls__block-layout-item нужно использовать для каждого блока.

Раскладка является контейнером для блоков. Раскладка должна быть определена в любом случае, даже если она содержит один блок.

Блоком является контейнер с рамками, в котором размещается пользовательский контент.

Если при организации области блоков требуется Controls/scroll:Container, то структура остается прежней:

<!-- WML -->
<Controls.scroll:Container>
   <div class="controls__block-layout">
      <div class="controls__block-layout-item"></div>
      <div class="controls__block-layout-item"></div>
      <div class="controls__block-layout-item"></div>
   </div>
</Controls.scroll:Container>

Примеры позиционирования блоков

Алгоритм позиционирования блоков в раскладке задается прикладным разработчиком. Для настройки позиционирования блоков в раскладке, необходимо обернуть раскладку в контейнер и задать на нем СSS-класс для позиционирования.

В простейшем случае блоки располагаются вертикально друг относительно друга благодаря стандартной потоковой блочной верстке.

Для более сложных правил позиционирования необходимо пользоваться богатым набором возможностей CSS-раскладок Flexbox и Grid Layout.