2
votes

CSS Flexbox: alignez l'élément flex avec une largeur différente

J'essaie d'aligner certains éléments flexibles avec des largeurs différentes. Je ne peux pas frapper certains éléments. https://jsfiddle.net/sistel/m1vu9exf/2/

Je ne peux pas alignez les textes et les carrés de couleur comme indiqué sur cette figure http://www.farmacom.it/baseball.jpg

.flex-container-4 {
  display: flex;
  height: 70px;
  align-items: center;
  background-color: Black;
  justify-content: space-around;
  position:relative;
}

.flex-container-4 > div {
  background-color: BLACK;
  width: 500px;
  margin: 5px;
  text-align: center;
  line-height: 50px;
  font-size: 40px;
  color: white;
}

html css flexbox

1 commentaires

J'ai un petit problème. Je devrais séparer les deux conteneurs flexibles, afin d'avoir les numéros dans un conteneur et les boutons dans un autre. De cette manière, le contenu du second ne s'aligne pas sur le premier. Existe-t-il un moyen de faire en sorte que les deux conteneurs aient la même largeur? Voici mon lien JS Fiiddle: jsfiddle.net/sistel/m1vu9exf/7 Merci! -

3 Réponses :

0
votes

Ceci est dû au fait que vous avez créé des lignes et des cellules à partir de ces lignes ne connaît pas les dimensions des autres lignes - c'est pourquoi dans la dernière partie, "VIII" prend plus de largeur que les autres éléments.

Une solution consiste à créer des colonnes au lieu de lignes, car de cette manière, le conteneur flex aura la largeur de l'élément le plus large.

0 commentaires

0
votes

J'ai réécrit votre code en utilisant flex css et supprimé certains styles indésirables. J'espère que cela aidera votre problème

HTML

.flex-container {
  display: flex;
  background-color: Black;
  justify-content: start;
  padding: 10px 10px;
  width: fit-content;
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.flex-row>.number {
  background-color: #444;
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 75px;
  font-size: 60px;
  color: yellow;
}

.flex-row>.roman-numeric {
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 45px;
  font-size: 50px;
  color: white;
}

.flex-row>.text {
  background-color: BLACK;
  margin: 5px;
  text-align: center;
  line-height: 50px;
  font-size: 40px;
  color: white;
}

.green {
  background-color: green;
  width: 40px;
  height: 40px;
  margin: 25px;
}

.red {
  background-color: red;
  width: 40px;
  height: 40px;
  margin: 25px;
}

.orange {
  background-color: orange;
  width: 40px;
  height: 40px;
  margin: 25px;
}

.seperator {
  background: #a5a2a2;
  width: 10px;
  margin: 0px 15px;
}

CSS

<div class="flex-container">

  <div class="flex-column">
    <div class="flex-row">
      <div class="number">18</div>
      <div class="number">18</div>
      <div class="number">18</div>
    </div>
    <div class="flex-row">
      <div class="roman-numeric">I</div>
      <div class="roman-numeric">II</div>
      <div class="roman-numeric">III</div>
    </div>
    <div class="flex-row">
      <div class="number">18</div>
      <div class="number">18</div>
      <div class="number">18</div>
    </div>
    <div class="flex-row">
      <div class="text">BALL</div>
    </div>
    <div class="flex-row">
      <div class="green"></div>
      <div class="green"></div>
      <div class="green"></div>
    </div>
  </div>

  <div class="seperator"></div>

  <div class="flex-column">
    <div class="flex-row">
      <div class="number">18</div>
      <div class="number">18</div>
      <div class="number">18</div>
    </div>
    <div class="flex-row">
      <div class="roman-numeric">IV</div>
      <div class="roman-numeric">V</div>
      <div class="roman-numeric">VI</div>
    </div>
    <div class="flex-row">
      <div class="number">18</div>
      <div class="number">18</div>
      <div class="number">18</div>
    </div>
    <div class="flex-row">
      <div class="text">STRIKE</div>
    </div>
    <div class="flex-row">
      <div class="red"></div>
      <div class="red"></div>
    </div>
  </div>

  <div class="seperator"></div>

  <div class="flex-column">
    <div class="flex-row">
      <div class="number">18</div>
      <div class="number">18</div>
      <div class="number">18</div>
    </div>
    <div class="flex-row">
      <div class="roman-numeric">VII</div>
      <div class="roman-numeric">VIII</div>
      <div class="roman-numeric">IX</div>
    </div>
    <div class="flex-row">
      <div class="number">18</div>
      <div class="number">18</div>
      <div class="number">18</div>
    </div>
    <div class="flex-row">
      <div class="text">OUT</div>
    </div>
    <div class="flex-row">
      <div class="orange"></div>
      <div class="orange"></div>
    </div>
  </div>

</div>

Lien JS Fiddle: https://jsfiddle.net/SJ_KIllshot/2ymefx81/

10 commentaires

Merci beaucoup, cette solution est parfaite!

Le moyen le plus simple serait de donner une largeur aux colonnes. Ceci est un autre violon avec votre code. J'espère que ça aide. jsfiddle.net/SJ_KIllshot/g7qtub9L

Tu as raison, ça résout mon problème. Dernière chose. Pourquoi ne vois-je pas le nombre dans la dernière colonne centrée? Lien JS Fiddle: jsfiddle.net/sistel/vkw81tgr/4

De quel numéro parlez-vous?

Le nombre 10 et 20

Essayez d'ajouter une largeur à cette colonne uniquement. Devrait fonctionner

Je l'ai fait mais rien ne change JS Fiddle Link: jsfiddle.net/sistel/vkw81tgr/12

Essaye ça. J'ai ajouté une autre classe avec une largeur pour la colonne jsfiddle.net/SJ_KIllshot/ds3qn2k5

Merci, vous êtes toujours aussi gentil.

0
votes

Pour obtenir un résultat exact, vous devez changer votre peu de structure html. Sinon, j'ai créé un modèle similaire en utilisant votre code actuel. veuillez vérifier ceci:

Baseball Flex

1 commentaires

vous pouvez utiliser ces divs comme conteneur externe et sortir votre contenu à l'intérieur de ceux-ci si nécessaire.