Установить отступы макета контейнера Flex с помощью CSS

Question

Есть ли способ использовать Flex CSS для установки заполнения этого BorderContainer?

<s:BorderContainer width="100%" height="100%">
   <s:layout>
      <s:VerticalLayout />
   </s:layout>

   <s:Label text="asdfasdf" />
</s:BorderContainer>

Я пытаюсь избежать добавления лишних VGroup. Установка отступов с помощью CSS не имеет никакого эффекта. (Я предполагаю, что paddingLeft не является определенным стилем в BorderContainer.)

s|BorderContainer {
   paddingLeft: 10;
}

Есть ли способ изменить свойства макета с помощью CSS? Я не хочу использовать жесткие дополнения кода во многих местах.

Answer 1

Вы можете добавить собственный стиль к обложке вашего BorderContainer. Что-то вроде этого:

override protected function updateDisplayList(unscaledWidth:Number,
                                              unscaledHeight:Number):void {
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    var paddingLeft:* = getStyle('paddingLeft');

    elementToPad.left = paddingLeft;
    //or
    layoutToPad.paddingLeft = paddingLeft;
    //or
    elementToPad.setStyle('paddingLeft', paddingLeft);
    //depending on what kind of element you wish to pad
}

Таким образом, вы можете применять различные отступы через CSS, используя один класс Skin, и вы можете избежать дублирования кода.
Единственный недостаток: вы не получите поддержку IDE, потому что хост-компонент не будет знать о стиле, который вы добавили; и компилятор выдаст ошибку, если вы попытаетесь установить стиль в MXML, но именно этого вы и пытались избежать в первую очередь.

Answer 2

Определите пользовательский стиль, который определяет отступы.

   .myCustomStyle { paddingLeft: 10;}

В коде получите это значение стиля с помощью styleManager и установите его для вертикального макета

    <s:layout>
         <s:VerticalLayout paddingLeft= "value got from the style manager"/>
   </s:layout>