Dev Faq
0
votes

Existe-t-il un moyen de faire de deux éléments en ligne avec chacun en utilisant Flex?

<article class="col-1">

  <div class="inner">
    <figure>
      <picture><img src="https://www.jessicagavin.com/wp-content/uploads/2019/02/carrots-7-1200.jpg"></picture>
      <figcaption>
        <h2>Carrots</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </figcaption>
    </figure>

    <figure>
      <picture><img src="https://www.jessicagavin.com/wp-content/uploads/2019/02/carrots-7-1200.jpg"></picture>
      <figcaption>
        <h2>Carrots</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </figcaption>
    </figure>
  </div>

1 commentaires

Vous avez ceci: flex-direction: colonne; qui est le coupable

3 Réponses :

2
votes

oui, il suffit de passer de flex-direction: colonne; code> à flex-direction: ligne; code> qui est la valeur par défaut.

comme la valeur indique la valeur des éléments suivra une colonne (un élément inférieur à l'autre) ou une ligne (un élément à côté de l'autre). p>

p> 

<article class="col-1">

  <div class="inner">
    <figure>
      <picture><img src="https://www.jessicagavin.com/wp-content/uploads/2019/02/carrots-7-1200.jpg"></picture>
      <figcaption>
        <h2>Carrots</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </figcaption>
    </figure>

    <figure>
      <picture><img src="https://www.jessicagavin.com/wp-content/uploads/2019/02/carrots-7-1200.jpg"></picture>
      <figcaption>
        <h2>Carrots</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </figcaption>
    </figure>
  </div>

0 commentaires
1
votes

si proche! Il vous suffit de définir flex-direction: rangée; code> intérieur .inner code>.

p> 

<article class="col-1">

  <div class="inner">
    <figure>
      <picture><img src="https://www.jessicagavin.com/wp-content/uploads/2019/02/carrots-7-1200.jpg"></picture>
      <figcaption>
        <h2>Carrots</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </figcaption>
    </figure>

    <figure>
      <picture><img src="https://www.jessicagavin.com/wp-content/uploads/2019/02/carrots-7-1200.jpg"></picture>
      <figcaption>
        <h2>Carrots</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </figcaption>
    </figure>
  </div>

0 commentaires
0
votes

changez votre .inner à ceci xxx

donc au lieu de colonne Nous avons utilisé rangée

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor