Conception Flexbox : je veux que tous les côtés de la bulle de texte se touchent
P粉002546490
P粉002546490 2024-04-01 10:59:44
0
1
304

.fm-bubbles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
}
.fm-bubble {
  flex: 1 1 10%;
  height: max-content;
  border: 1px solid royalblue;
  border-radius: 5px;
}
        <div class="fm-content">
          <div class="fm-bubbles">
            <p class="fm-bubble">Lorem, ipsum.</p>
            <p class="fm-bubble">lorem</p>
            <p class="fm-bubble">adsadad</p>
            <p class="fm-bubble">sss</p>
            <p class="fm-bubble">asdasda asdasda</p>
            <p class="fm-bubble">asss</p>
            <p class="fm-bubble">sss</p>
            <p class="fm-bubble">asdas asd</p>
            <p class="fm-bubble">adadaddd</p>
            <p class="fm-bubble">adadasd</p>
            <p class="fm-bubble">addd</p>
            <p class="fm-bubble">adadd</p>
            <p class="fm-bubble">ss</p>
          </div>

Actuellement, mes boîtes ne se touchent qu'horizontalement, mais j'aimerais aussi qu'elles se touchent verticalement. J'ai essayé de chercher des informations à ce sujet, mais lorsque j'ai trouvé quelque chose qui fonctionnait, cela leur donnait plus de hauteur que nécessaire.

P粉002546490
P粉002546490

répondre à tous(1)
P粉738346380

p 标签默认有一个 margin 属性。设置 margin: 0 pour fixer l'espacement vertical.

EDIT : Cela ne crée pas de disposition en maçonnerie, supprime simplement l'espace entre les boîtes.

.fm-bubbles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
}

.fm-bubble {
  flex: 1 1 10%;
  border: 1px solid royalblue;
  border-radius: 5px;
  margin: 0;
}

Lorem, ipsum.

lorem

adsadad

sss

asdasda asdasda

asss

sss

asdas asd

adadaddd

adadasd

addd

adadd

ss

Edit 2

Vous pouvez :

align-items: flex-start;
   align-content: flex-start;

Aux parentsfm-bubbles. Cela permettra à l'enfant de maintenir la hauteur de son contenu et d'éliminer l'espace vertical entre les enfants.

.fm-bubbles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
  align-items: flex-start;
  align-content: flex-start;
}

.fm-bubble {
  flex: 1 1 10%;
  border: 1px solid royalblue;
  border-radius: 5px;
  margin: 0;
}

Lorem, ipsum.

lorem

adsadad

sss

asdasda asdasda

asss

sss

asdas asd

adadaddd

adadasd

addd

adadd

ss

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!