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...
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...
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...
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:...
J'ai trouvé ce fil - Comment étirer une image pour remplir une <div> tout en conservant le rapport hauteur / largeur de l'image? - ce n'est pas tout à fait ce que je veux. J'ai un div avec une certaine taille et une image à l'intérieur. je veux toujours remplir le div avec l'image, que...
Je prévois de m'éloigner des mises en page «flottantes» et d'utiliser CSS flexbox pour de futurs projets. J'ai été ravi de voir que tous les principaux navigateurs dans leurs versions actuelles semblent prendre en charge (d'une manière ou d'une autre) flexbox. Je me suis dirigé vers "Résolu par...
J'ai une page Web simple avec du contenu Lipsum centré sur la page. La page fonctionne bien dans Chrome et Firefox. Si je réduis la taille de la fenêtre, le contenu remplit la fenêtre jusqu'à ce qu'il ne puisse pas, puis ajoute une barre de défilement et remplit le contenu hors de l'écran, vers le...
En utilisant le modèle de boîte flexible CSS, comment puis-je forcer une image à conserver ses proportions? JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/ Notez que les images s'étirent ou se rétrécissent afin de remplir la largeur du conteneur. C'est bien, mais pouvons-nous aussi l'étirer ou réduire...
Comment puis-je savoir qu'une ligne de disposition de Flexbox consomme l'espace vertical restant dans une fenêtre de navigateur? J'ai une disposition flexbox à 3 rangées. Les deux premières rangées ont une hauteur fixe, mais la 3ème est dynamique et j'aimerais qu'elle atteigne toute la hauteur du...
Je souhaite utiliser une application pleine hauteur utilisant flexbox. J'ai trouvé ce que je veux en utilisant l'ancien module de mise en page flexbox ( display: box;et d'autres choses) dans ce lien: application pleine hauteur CSS3 Flexbox et débordement C'est une solution correcte pour les...
Je suppose que cela est impossible à réaliser avec Flexbox, car chaque ligne ne peut être que la hauteur minimale requise pour s'adapter à ses éléments, mais cela peut-il être réalisé en utilisant la nouvelle grille CSS? Pour être clair, je veux une hauteur égale pour tous les éléments d'une...
J'ai utilisé la disposition de la boîte flexible CSS qui apparaît comme indiqué ci-dessous: Si l'écran devient plus petit, il se transforme en ceci: Le problème est que les images ne sont pas redimensionnées en conservant le rapport hauteur / largeur de l'image d'origine. Est-il possible d'utiliser...
Je veux faire un divbâton en haut de l'écran sans aucune influence sur les autres éléments, et son élément enfant au centre. .parent { display: flex; justify-content: center; position: absolute; } <div class="parent"> <div class="child">text</div> </div> Exécuter l'extrait...
Je veux que les éléments flexibles soient centrés, mais lorsque nous avons une deuxième ligne, avoir 5 (de l'image ci-dessous) sous 1 et non centrés dans le parent. Voici un exemple de ce que j'ai: ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0;...
Comme vous pouvez le voir, list-itemsles premiers rowont la même chose height. Mais les éléments du second rowsont différents heights. Je veux que tous les articles aient un uniforme height. Existe-t-il un moyen d'y parvenir sans donner une hauteur fixe et en n'utilisant que flexbox ? Voici mon...
<button>J'essaye de centrer les éléments internes d'un -tag avec flexbox justify-content: center. Mais Safari ne les centre pas. Je peux appliquer le même style à toutes les autres balises et cela fonctionne comme prévu (voir le <p>-tag). Seul le bouton est aligné à gauche. Essayez...
J'ai un conteneur flexible avec deux éléments flexibles. Je veux définir une marge supérieure sur le second, mais uniquement lorsqu'il est enveloppé et non à la première ligne flexible. Si possible, je souhaite éviter d'utiliser les requêtes multimédias. Je pensais que la marge inférieure sur le...
Je centre un DIV à l'intérieur d'un autre DIV à l'aide d'un flexbox. Pensez à une fenêtre de dialogue qui apparaît au centre de l'écran en cas de besoin. Cela fonctionne bien, mais il serait beaucoup mieux si l'espace au-dessus et en dessous de la boîte de dialogue n'était pas exactement égal, avec...
J'essaie de créer un système de menus avec une image et du texte au-dessus et en dessous. Les données sont dynamiques. Je veux que le système de menus apparaisse de sorte que chaque image soit à égale distance l'une de l'autre afin qu'elles s'alignent dans une grille d'images à la fois...
Affichage d'une galerie d'images de différentes tailles et proportions avec les spécifications suivantes: Pas de blancs (marges) entre les images. Respecter autant que possible le ratio d'origine. Images entourées d'un lien. Solution non JS. Les images pourraient être recadrées un peu. Solution...