web-dev-qa-db-fra.com

Définir une largeur maximale pour les éléments flex?

J'essaie de créer une section de filtre sur mon site, le contenu est entièrement généré de manière dynamique (je ne peux donc pas ajouter de parents supplémentaires), et notre guide de style les crée à l'aide d'éléments flex. Je voudrais garder cette fonctionnalité pour la plupart.

Je veux que mes 3 articles flex aient un max-width et soient flottants à gauche, laissant mon article non flex flottant à droite, dans le conteneur global qui est défini sur une largeur maximale de 1080px un peu comme ceci:

Option 1    Option 2    Option 3                                    Non-flex Item

J'ai essayé de définir les valeurs flex-align et de suivre cette réponse , mais cela ne semble pas fonctionner pour cela.

Pour l'instant, c'est le code avec lequel je travaille:

HTML

<ul class="container">
  <li class="child">One</li>
  <li class="child">Three</li>
  <li class="child">Three</li>
  <div class="non-flex">
   I'm not a flex item
  </div>
</ul>

CSS 

.container{
      display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        position: relative;
            max-width: 1080px;
        margin: 0 auto;
        padding: 0 20px;
        box-sizing: content-box;
    }

    .child{
          display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        position: relative;
    }

J'ai aussi fait un Fiddle pour que vous puissiez tous jouer.

htmlcsscss3flexbox
4
knocked loose

J'appliquerais une width ou min-width aux éléments .child (ou un remplissage gauche/droit qui crée la distance qui les sépare) et margin-left: auto au dernier élément, qui le déplace vers la droite, indépendamment des autres:

https://jsfiddle.net/6vwny6bz/2/

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: content-box;
}

.child {
  list-style: none;
  min-width: 80px;
  padding: 10px 0;
}

.non-flex {
  margin-left: auto;
  padding: 10px 0;
}
<ul class="container">
  <li class="child">One</li>
  <li class="child">Three</li>
  <li class="child">Three</li>
  <div class="non-flex">
    I'm not a flex item
  </div>
</ul>

4
Johannes

L'ajout d'une plage de flex entre vos objets de liste aide beaucoup. https://jsfiddle.net/cd9car5k/1/

Alors

<ul class="container">
  <li class="child">One</li>
  <li class="child">Three</li>
  <li class="child">Three</li>
  <span class="example-spacer"></span>
  <div class="non-flex">
   I'm not a flex item
  </div>
</ul>

où:

.example-spacer {
    flex: 1 1 auto;
  }
0
mahval

Vous pouvez utiliser:

.non-flex{
  margin-left: 50%;
}

pour créer plus d'espace entre les 3 premiers éléments et le non-flex

0
icj90