éléments d'alignement dans une rangée flex à droite

Question

je le suivi qui aligne les éléments à droite

HTML

<div class="flex-row"> 
    <div class="flex-1"> 
      <button class="el-button el-button--primary">Add File</button> 
      <ul class="el-upload"> 
       <li classs="el-upload">something wider than the button</li> 
      </ul> 
    </div> 
</div> 

CSS

.flex-row { 
    display: flex; 
    align-items: baseline; 

    .flex-1 { 
    flex: 1 1 auto; 
    } 
} 

Mais quand il le contenu de la liste est plus large que le bouton et il fait quelque chose comme ceci:

------- 
| X | 
------- 
----------------- 
|    | 
----------------- 

Comment est-ce que je fais en sorte qu'il soit aligné vers la droite quelle que soit la largeur de l'élément ci-dessous? Comme ceci:

  ------- 
      | X | 
      ------- 
----------------- 
|    | 
----------------- 

Answer 1

boo tstrap 4 a beaucoup de classe prêt à l'emploi et aussi pour les boîtes fléchies. Voir et plus https://v4-alpha.getbootstrap.com/utilities/flexbox/ pour en savoir plus sur ce qui est disponible.

exemple, la structure mise à jour avec la classe

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="flex-row "> 
 
    <div class="row justify-content-end"> 
 
      <button class="el-button el-button--primary">Add File</button> 
 
      <ul class="el-upload"> 
 
       <li classs="el-upload">something wider than the button</li> 
 
      </ul> 
 
    </div> 
 
</div> 
 

 
or is it about column ? 
 

 
<div class="flex-row"> 
 
    <div class="row flex-column align-items-end"> 
 
      <button class="el-button el-button--primary">Add File</button> 
 
      <ul class="el-upload"> 
 
       <li classs="el-upload">something wider than the button</li> 
 
      </ul> 
 
    </div> 
 
</div> 
 
</div>

pour émuler un conteneur flex, utilisez une classe telle que .row, .d-flex, voir le lien fourni plus tôt;) ...

Answer 2

Vous devez flotter les deux éléments

Cela devrait fonctionner

https://codepen.io/dawsonhudson17/pen/GMGPjM

<div class="flex-row"> 
    <div class="flex-1"> 
      <button style='float: left;'class="el-button el-button--primary">Add File</button> 
      <ul class="el-upload"> 
       <li style='float: left; margin-left: 20px;'classs="el-upload">something wider than the button</li> 
      </ul> 
    </div> 
</div> 

vous pouvez également faire

<li style='float: right;'classs="el-upload">something wider than the button</li>