Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Layout – Padding, Border et Gap

Padding, Border et Gap sont des propriétés de style qui permettent de contrôler comment les children d'un conteneur sont positionnés. Le padding contrôle l'espace entre un enfant et son conteneur et est utilisé dans les conteneurs de type Box, Tile ou Grid. Les Borders sont comprises dans la plupart des conteneurs et représente la bordure appliquée autour de la bounding box du composant. Enfin, les Gap contrôlent l'espace entre les enfants.

Pour mieux comprendre ces différents style, voici un schéma récapitulatif:

Il est important de garder ces propriétés en tête quand on met en place une application car ces propriétés sont prises en compte lors des routines de mesure permettant de savoir combien de place est nécessaire pour un container. Certains conteneurs, comme Application par exemple, on par défaut un padding de 24 pixels sur chaque côté. Si vous voulez faire une application qui prend vraiment 100% de l'espace, il faudra mettre les propriétés paddingTop, paddingBottom, paddingRight et paddingLeft à 0, comme dans cet exemple:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
	<mx:Button width="100%" height="100%" label="Bouton de taille maximale"/>
</mx:Application>