web-dev-qa-db-fra.com

Bloquer les éléments uniquement à l'intérieur de l'élément flexible?

Apparemment, vous ne pouvez avoir que des éléments de bloc (en ligne, bloc en ligne, rien ne fonctionne) à l'intérieur d'un conteneur d'élément flexible? C'est juste bizarre et ne semble pas utile à moins que je ne le fasse complètement mal?

Voici le stylo: http://codepen.io/iaezzy/pen/GggVxe

.fill-height-or-more {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.fill-height-or-more > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Vous devrez peut-être augmenter la hauteur du volet d'aperçu pour que le flexbox fonctionne).

Modifié pour plus de clarté: je ne parle pas des éléments flex eux-mêmes, mais des éléments à l'intérieur de l'élément flex. Dans le codepen ci-dessus, vous verrez h2 et p bordés, ils ont la déclaration float, mais ne flottent pas.

cssflexbox
15
eozzy

Vous avez défini display: flex sur les deux section ainsi que div.

Si section agit comme un conteneur, vous donnez display: flex au section et laissez le div comme flex-items. Ensuite, les ps et h1s flottera.

Violon: http://jsfiddle.net/abhitalks/zb12n2dk/

.fill-height-or-more {
    display: flex;
    flex-direction: column;
    ...
}
.fill-height-or-more > div {
    flex: 1;
    ...
}
.some-area > div p {
    width: 40%;
    float: left;
    ...
}
16
Abhitalks

Les éléments flexibles sont toujours rendus sous forme de blocs, car la disposition flexible n'a de sens que dans une disposition de type bloc. Il existe quelques différences entre les éléments flexibles et les boîtes de niveau bloc qui sont couvertes dans les sections et 4 de la spécification, l'une étant que les éléments flexibles ne peuvent pas flotter non plus, encore une fois parce que cela perturberait la disposition flexible (et inversement, les flotteurs extérieurs ne peuvent pas non plus s'immiscer dans une disposition flexible).

Vous pouvez appliquer différentes valeurs de display aux éléments flexibles (et les masquer complètement avec display: none), mais cela n'aura pour effet que d'établir différents contextes de mise en forme pour les enfants des éléments flex, pas les éléments eux-mêmes.

Ceci comprend display: flex, comme vous le démontrez; ce qui se passe alors, c'est que les éléments flexibles deviennent des conteneurs flexibles pour leurs propres enfants, ce qui fait que ces enfants flexibles éléments dans vos contextes de mise en forme flex imbriqués. Pour cette raison, faire flotter ces enfants ne fonctionnera pas.

Notez que pour établir une mise en page flexible, il vous suffit de définir display: flex sur le conteneur flexible, pas sur ses enfants. Tous les enfants d'un conteneur flexible qui ne sont pas display: none sera automatiquement transformé en éléments flexibles.

8
BoltClock

pour déplacer les éléments en ligne à l'intérieur de flex dispaly, il existe une autre solution à utiliser display: inline-table mais il ne semble pas qu'il supporte aussi bien le flotteur mais vous pouvez contourner cela en l'enveloppant avec un div d'anthère ou quelque chose

vérifiez le jsfiddle suivant https://jsfiddle.net/reda84/eesuxLgu/

.row{
  width:100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > .col {
  display: flex;
  box-sizing: border-box;
  width:50%;
  float:left;
  flex-direction: column;
  border:1px solid #333;
  min-height:100px;
  padding:15px
}
.tag{
  background: #1b8fe7;
  color:#fff;
  padding:5px 10px;
  display: inline-table;
  margin:0px 5px 5px 0;
}
1
Reda