简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison> interface Web> tutoriel CSS> le corps du texte

CSS Flex 布局 space-between 最后一行左对齐

Guanhui
Libérer： 2020-07-21 12:48:29
original
5373 Les gens l'ont consulté

CSS Flex 布局 space-between 最后一行左对齐

首先看代码和效果

  
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
Copier après la connexion

可以看到最后一个p并没有在中间，而是在最后了

因为我们设置了justify-content为space-between，意思就是两边贴边

这时候我们可以给最外层p设置个伪元素，宽度和里面的p宽度一样就好了

只需要两行css就可以

.main:after { content: ""; width: 100px; }
Copier après la connexion

这时候看效果

其实原理就是最后一个伪元素把他挤过来了

就算有9个也没影响，因为他的高度是0，看下图↓

推荐教程：《CSS教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
flex
source：jb51.net
Article précédent：CSS Flex 布局实现无缝滚动 Article suivant：CSS 中 @ 用法详解
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Conteneur rétractable pour s'adapter aux éléments enfants enveloppés J'essaie de comprendre comment flexbox fonctionne (devrait fonctionner ?...) pour une situ...
Depuis 2023-10-21 10:33:50
0
2
276
Le conteneur n'augmente pas sa largeur lorsque l'élément Flexbox est renvoyé en mode colonne Je développe une disposition Flexbox imbriquée qui fonctionne comme suit : le niveau le pl...
Depuis 2023-10-17 22:05:01
0
2
176
Pourquoi les éléments flexibles ne peuvent-ils pas être réduits en dessous de la taille du contenu ? J'ai 4 colonnes flexbox et tout fonctionne bien, mais lorsque j'ajoute du texte aux colonn...
Depuis 2023-10-15 22:06:39
0
2
286
Aligner les éléments flexibles dans les lignes en utilisant l'espacement spécifié J'ai deux lignes contenant des
, chaque ligne a display:flex; et chaque ligne c...
Depuis 2023-09-17 19:34:16
0
1
244
Est-il impossible d'avoir une mise en page CSS-Flex pleine page sur trois lignes dans un safari mobile ? Exemple de code : https://jsfiddle.net/Lsfvotd2/2/ ne semble pas résoudre le problème de l...
Depuis 2023-09-15 18:24:47
0
1
200
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！