CSS3 Flexbox espacement entre les éléments
Être un peu nouveau pour Flexbox (bien connu dans le CSS), il me semble qu'une chose idéalement "éclipsée" par la plupart des tutos que j'ai lu est l'espacement entre la flex éléments.
Par exemple, l'un des plus cités tutoriels est celui-CSS Astuces.
C'est très bon et a été utile, schémas de ce genre ont jeté moi off:
Notez les espaces entre la flex éléments. Bien que non mentionné nulle part, ni dans le code de l'échantillon, il semble que la seule façon d'obtenir les espaces est avec css marges.
Correct, ou alors j'ai loupé quelque chose d'important ici?
Parce que ce que j'ai besoin de créer est cela, un peu comme le "centre" de la démo ci-dessus:
Cependant, lorsque j'essaie moi-même, j'ai bien sûr d'obtenir ceci:
si j'utilise l'espace autour, j'obtiens ceci à la place. Un espace énorme.
Par conséquent, il semble que je besoin d'ajouter de marge de droite pour les 2 premières cases pour obtenir 3 centré sur des boîtes avec un petit espace entre eux.
Est-ce simplement une mauvaise utilisation de Flexbox? Parce que je vois peu d'avantages de la création de mes 3 boîtes avec Flexbox plus de l'aide de simples marges et de centrage.
Ai-je raté quelque chose d'évident ici?
source d'informationauteur Steve
Vous devez vous connecter pour publier un commentaire.
Non, tu ne perds rien. Flexbox est formidable pour la commande d'éléments et de définir l'alignement général de ces éléments, soit les principaux ou de la croix-axes, mais ne parle pas directement à chaque élément d'espacement. Si vous jetez un oeil à cette Codepen utilisé dans la Flexbox articlevous remarquerez qu'ils utilisent:
pour définir l'élément d'espacement. Espérons que cette aide!