Articles of flexbox

CSS / JS / Jquery – Éléments Flex pour des tailles d’écran réactives

J’ai un site avec 3 éléments dans ma navigation que je veux restr sur une ligne. Le premier est le menu principal qui contient les liens du site principal et devrait être situé à gauche de la barre de navigation. La seconde est l’information de contact qui devrait être centrée dans la barre de navigation. […]

Comment sélectionner des lignes paires avec des éléments de liste

J’ai la mise en page suivante avec une liste non ordonnée: https://codepen.io/barkins/pen/qjrpKJ ul{ max-width:1200px; list-style:none; margin:0 auto; padding:0; display:flex; flex-wrap:wrap; } li{ width:12%; @media (max-width:720px){ width:16%; } @media (max-width:480px){ width:22%; } } Je dois sélectionner uniquement les lignes, quels que soient les points de rupture de la requête multimédia, pour append une bordure à la […]

Les derniers éléments de ligne incomplets CSS flex prennent la largeur des éléments de ligne complets

Je crée une flexbox; un conteneur a une max-width , par exemple, max-width = 500px , et les éléments enfants ont chacun min-width: 130px et flex-grow: 1 pour remplir la totalité de l’espace de la ligne. Voici le violon: https://jsfiddle.net/7wroxkhj/6/ Ce que je veux réaliser est que les éléments de la dernière ligne prennent la […]

Configuration de l’affichage flexbox avec jQuery pour plusieurs navigateurs?

avoir un peu de mal. J’ai besoin de changer d’affichage: aucun à afficher: flex, d’affichage: flex-box, et d’affichage: -ms-flexbox mais cela semble casser mon code. Voici ce que j’ai eu jusqu’à présent: $(elem).css({‘display’: ‘flex’, ‘display’: ‘-webkit-flex’, ‘display’:’-ms-flexbox’}); et pendant que cela fonctionne: $(elem).css({‘display’: ‘flex’}) Je dois avoir les deux autres pour Safari et IE10. Y […]

Espace mystère créé au-dessus de la ligne lors de la suppression du contenu d’un élément

J’ai une grid avec certains éléments et lorsque je clique sur un élément, je déplace le contenu de cet élément vers un modal. Le modal fonctionne très bien, mais lorsque je supprime le contenu de l’élément, un espace apparaît au-dessus de l’élément. Je sais qu’une solution à ce problème pourrait consister à utiliser une boîte […]

Contrôler le nombre d’éléments sur chaque ligne flexible lorsque le conteneur est configuré pour envelopper

J’utilise css flexbox pour dissortingbuer un certain nombre d’éléments dans un conteneur. J’ai un conteneur flexible comme celui-ci: .container{ display: flex; flex-flow: row wrap; align-content : center; justify-content : center; align-items : center; } Lorsque j’ajoute un certain nombre d’éléments de largeur / hauteur fixes dans le conteneur, ceux-ci sont placés comme prévu: s’ils ne […]

Transition flex-grow d’éléments dans une flexbox

Est-il possible de faire la transition des éléments dans une flexbox? Lorsque vous cliquez sur, je souhaite que tous les éléments soient réduits, sauf celui sur lequel vous avez cliqué. Celui sur lequel l’utilisateur a cliqué doit utiliser tout l’espace disponible du conteneur. // only works once! $(“.item”).click(function() { $(“.item”).not(this).each(function() { $(this).addClass(“collapse”); }); }); html, […]

Puis-je modifier la valeur de justification du contenu en fonction du nombre d’éléments contenus dans le conteneur Flex?

Je travaille sur une galerie d’images sur un site hérité. Je ne peux utiliser que du vieux HTML / jQuery ou JS / CSS classique. Je sais que ce serait beaucoup plus facile avec Bootstrap ou une bibliothèque de grid. Je le construis avec flexbox. Il y a quatre images dans chaque rangée, avec plusieurs […]

Hauteur égale pour deux divs

J’ai 2 divs (6 colonnes chacun). Dans le div à gauche se trouve une image, dans le div à droite, une citation. Je veux que la hauteur de ma droite soit la même que la hauteur de l’image. Voici mon code: http://codepen.io/matysflance/pen/PZXdBK “Integer posuere erat a ante venenatis dapibus posuere veit al…” Susan Sims, Interaction […]

Comment détecter un événement CSS Flex Wrap

J’ai un conteneur flexible avec des objects à l’intérieur. Comment détecter un événement Flex Wrap? Je veux appliquer de nouveaux css aux éléments qui ont été wrapperd. Je suppose qu’il est impossible de détecter l’événement wrap en pure css. Mais ce serait une fonctionnalité très puissante! Je peux essayer de “capturer” cet événement de point […]