Questions marquées «flexbox»

Module CSS pour des mises en page flexibles offrant une large gamme d'options pour aligner les éléments tout en éliminant le besoin de flottants et de tableaux.

5
Comment rendre les éléments flexbox de la même taille?
Je veux utiliser flexbox qui a un certain nombre d'éléments qui ont tous la même largeur. J'ai remarqué que flexbox répartit l'espace de manière uniforme, plutôt que l'espace lui-même. Par exemple: .header { display: flex; } .item { flex-grow: 1; text-align: center; border: 1px solid black; } <div class="header"> <div …
187 css  flexbox 
12
Le texte dans un conteneur flex n'est pas enveloppé dans IE11
Considérez l'extrait de code suivant: .parent { display: flex; flex-direction: column; width: 400px; border: 1px solid red; align-items: center; } .child { border: 1px solid blue; } <div class="parent"> <div class="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry </div> <div class="child"> Lorem Ipsum is simply …
7
Gardez l'élément du milieu centré lorsque les éléments latéraux ont des largeurs différentes
Imaginez la disposition suivante, où les points représentent l'espace entre les cases: [Left box]......[Center box]......[Right box] Lorsque je retire la bonne boîte, j'aime que la boîte centrale soit toujours au centre, comme ceci: [Left box]......[Center box]................. Il en va de même si je supprimais la case de gauche. ................[Center box]................. …
162 html  css  flexbox  centering 
2
Comment définir une colonne à largeur fixe avec CSS Flexbox
CodePen: http://codepen.io/anon/pen/RPNpaP . Je veux que la boîte rouge ne fasse que 25 em de large lorsqu'elle est dans la vue côte à côte - j'essaie d'y parvenir en définissant le CSS dans cette requête multimédia: @media all and (min-width: 811px) {...} à: .flexbox .red { width: 25em; } Mais …
149 html  css  flexbox 
10
Centrer et aligner les éléments flexbox à droite
Je voudrais avoir A Bet Caligné au milieu. Comment puis-je Daller complètement à droite? AVANT: APRÈS: ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 1px; padding: 5px; background: #aaa; } li:last-child { background: #ddd; /* magic to throw …
147 html  css  flexbox 
1
Comment étirer les enfants pour remplir l'axe transversal?
J'ai une flexbox gauche-droite: .wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 70vh; min-height: 325px; max-height:570px; } <div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div> Exécuter l'extrait de codeMasquer les résultatsDévelopper l'extrait Le problème est que le bon enfant ne se comporte pas de manière réactive. Pour être …
141 css  flexbox 
2
Disposition de maçonnerie en CSS uniquement
J'ai besoin de mettre en œuvre une disposition de maçonnerie assez délabrée. Cependant, pour un certain nombre de raisons, je ne souhaite pas utiliser JavaScript pour le faire. Paramètres: Tous les éléments ont la même largeur Les éléments ont une hauteur qui ne peut pas être calculée côté serveur (une …
134 html  css  flexbox  css-grid 
3
Que signifie flex: 1?
Comme nous le savons tous, la flexpropriété est un raccourci pour la flex-grow, flex-shrinket les flex-basispropriétés. Sa valeur par défaut est 0 1 auto, ce qui signifie flex-grow: 0; flex-shrink: 1; flex-basis: auto; mais j'ai remarqué, dans de nombreux endroits flex: 1est utilisé. Est-ce un raccourci pour 1 1 autoou …
129 css  flexbox 
11
Réagissez au texte natif qui sort de mon écran, refusant de s'enrouler. Que faire?
Le code suivant peut être trouvé dans cet exemple en direct J'ai l'élément natif de réaction suivant: 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ render: function() { return ( <View style={styles.container}> <View style={styles.descriptionContainerVer}> <View style={styles.descriptionContainerHor}> <Text style={styles.descriptionText} numberOfLines={5} …
4
Comment aligner les colonnes flexbox à gauche et à droite?
Avec le CSS typique, je pourrais faire flotter l'une des deux colonnes à gauche et une autre à droite avec un espace de gouttière entre les deux. Comment ferais-je cela avec flexbox? http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { …
123 html  css  flexbox 
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.