justify-content
space-between
Résultat
Boîtes repoussées vers les bords opposés
Outils de design
Générateur Flexbox — Mise en page visuelle unidimensionnelle
Ajustez la direction flexible, la justification du contenu, l'alignement des éléments, le retour à la ligne et l'espacement avec un aperçu en direct. Ajoutez ou supprimez des cases pour voir l'habillage et l'espacement, puis copiez le CSS (et l'échafaudage HTML) généré dans votre projet.
ConceptionCSSMise en page
Accès rapide:Générateur de grille CSS
Ajouter cet outil aux favoris
Aucun mode de stockage des favoris n’a été sélectionné.
Actions rapides
Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.
设计配色
Générateur Flexbox
4 项
Flex 容器 row · nowrap
.container {
display: flex;
} Cas d’usage
- Prototype de lignes et d'espacement de même hauteur
- Expérience avec le comportement d'enroulement en fonction du nombre d'éléments grandit
- Copiez un extrait de conteneur Flexbox comme point de départ
Mode d’emploi
- Définissez les règles d'alignement de l'axe principal et de l'axe transversal
- Ajustez le retour à la ligne, l'écart et le nombre d'éléments
- Copiez le CSS ou le HTML généré
Exemples d’entrée et de sortie
FAQ
Est-il exposé en entier Contrôles flex-basis ?
Il se concentre sur le flux au niveau du conteneur. Les éléments utilisent actuellement une configuration simple de croissance/rétrécissement/base plutôt que chaque cas limite par élément.
Outils
Outils associés
Poursuivez avec un autre outil traduit pour une tâche proche.
Générateur de grille CSS
Générateur de grille CSS – Lignes, colonnes et espaces
Définissez le nombre de colonnes et de lignes ainsi que les espaces pour générer un affichage de base : disposition en grille. Prévisualisez la structure des pistes, essayez des modèles rapides et copiez du CSS ou du HTML pour les mises en page d'administration et les grilles de cartes.
CSS Grille Mise en page