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

Plus à propos flexbox...

J'ai un en-tête bootstrap 4 et j'utilise flex pour une mise en page personnalisée. Voici le html: <nav class="navbar"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="logo.png" alt=""> </a> <div class="box"> <div class="title">TITLE HERE</div> ....
8 déc. 2020 à 12:56
J'ai une galerie d'images en grille à deux colonnes réactive. Je souhaite afficher un texte sur chaque image lors du survol, un calque d'opacité sur l'image avec un texte centré au milieu. C'est ce que j'ai essayé jusqu'à présent mais le texte fait: .row { display: -ms-flexbox; display: flex;....
8 déc. 2020 à 00:41
Comment puis-je changer mon code SCSS pour qu'il ressemble à ceci: Pas comme ça: PS> Je me fiche des couleurs! Fragment: body { display: flex; flex-direction: column; margin: 0; } .container { display: flex; flex: 1; justify-content: center; } nav { flex: -1; } .A { background....
7 déc. 2020 à 20:06
Voici le code qui fonctionne correctement avec position: relative et position: absolute. Cependant, j'essaie d'obtenir un effet similaire en utilisant Flexbox et bien que l'élément soit ajusté au centre, mais il ne se chevauche pas comme celui obtenu en utilisant la position. Dites-moi comment puis-....
6 déc. 2020 à 21:53
Je sais que des questions similaires ont déjà été posées. J'en ai regardé beaucoup et je n'ai abouti à rien. J'essaie d'obtenir du contenu à hauteur fixe en haut, avec 2 colonnes ci-dessous qui peuvent faire défiler séparément. Je veux qu'ils prennent n'importe quelle hauteur d'écran disponible, don....
Je crée une page Web. Il y a une section de navigation sur la gauche qui est toute imbriquée dans <p> quelque chose comme ça. <nav> <p>Home</p> <p>About</p> <p>Shop</p> <p>Contact Us</p> </nav> J'ai utilisé flexbox pour le faire apparaître sur le côté left-ha....
3 déc. 2020 à 18:45
J'ai fourni le html et le css. Le est modifié par le fichier script.js, c'est pourquoi il est vide. Je veux que le texte apparaisse au centre même lorsque la largeur de l'écran est réduite. Veuillez aider. HTML: <section id="page1"> <div class="welcome"> <div class="box"> ....
2 déc. 2020 à 21:04
Comment faire ressembler une CSS Flexbox à ceci: Pas comme ça: La mienne n'est pas pleine page, idk pourquoi. Code: body { text-align: center; margin: auto; } div { display: flex; color: white; flex-direction: column; } .box { background-color: lightgray; width: 100px; height: ....
29 nov. 2020 à 17:34
J'essaie de créer un pied de page, qui ressemble à ce pied de page en utilisant flexbox. Cependant, j'essaie depuis des heures d'aligner les en-têtes pour rester au-dessus de chaque colonne, chaque colonne pour s'aligner l'une après l'autre et la ligne elle-même pour rester centrée. J'ai essayé d'ut....
29 nov. 2020 à 09:41
Tout semble fonctionner mais dès que je crée du texte en gras avec <strong> ou <span> à l'intérieur de la balise <li> - il ignore l'espace qui aurait dû être entre les mots car j'utilise fléchir. J'ai essayé tous les justify-content possibles sur la balise <li> et je n'ai pas trouvé de solution à ce....
28 nov. 2020 à 18:10
J'essaie donc de créer un formulaire comme celui-ci en utilisant le plugin WordPress Contact Form 7, je pense que cela devrait fonctionner et est précis, mais apparemment pas: Au lieu de cela, je me retrouve avec ceci: Voici le HTML: <div class:input-flex> [text* your-name class:text-color c....
25 nov. 2020 à 14:54
Je veux créer quelque chose comme cette image. Il doit en être de même pour les appareils mobiles: un bloc à 100% et 2 images avec des boutons en dessous. L'image doit occuper toute la largeur du bloc. Comment faites-vous? Aidez-moi s'il vous plaît .container { display: flex; justify-content: ....
25 nov. 2020 à 11:38
Est-il possible d'arrêter Flexbox sur un petit écran avec Material UI? J'ai besoin de quelque chose comme la classe d-md-flex dans Bootstrap mais en utilisant Material UI. Bootstrap (fonctionne comme prévu) <div class="d-md-flex align-items-md-center"> <div>Content #1</div> <div>Content ....
24 nov. 2020 à 00:41
J'ai un élément de liste avec la propriété display: flex;. Le problème est que selon le comportement standard, la balise <span> sera considérée comme un élément flex. C'est pourquoi la balise span se démarque. Mais j'en ai besoin pour faire partie du texte ou quelque chose comme ça. Comment puis-je....
23 nov. 2020 à 19:26
J'essaie de créer une partie d'un site Web, avec 3 parties (appelons-les A, B, C), où A et B sont côte à côte (alignés pour toucher les côtés opposés d'un conteneur), et en dessous d'eux se trouve C , mais lorsque A et B ne s'emboîtent pas l'un à côté de l'autre dans le conteneur, B s'enroule en des....
22 nov. 2020 à 00:26
J'ai essayé d'aligner quelques composants dans une application React de style "mad-libs" et j'ai quelques difficultés. Voici une image de ce à quoi ressemble la situation, avec une flèche indiquant le résultat souhaité. Soit mon code Flexbox est désactivé, soit mon style pour le champ de texte de l'....
20 nov. 2020 à 08:14
J'ai un conteneur et j'ai trois éléments enfants: h2, p et bouton. Je veux faire un bouton à droite du centre aligné h2 et p. Le html ne peut pas être modifié, uniquement css en utilisant flexbox ou grid. div { background: rgba(0,0,0, .5); padding: 20px 40px; color: #fff; } div h2 { margi....
19 nov. 2020 à 12:27
Je suis assez mauvais avec le CSS, alors je me demandais comment je pouvais garder ma barre latérale pleine hauteur, même si elle n'a pas de contenu complet. C'est mon css: #wrapper { display: flex; flex-wrap: wrap; background-color: yellow; } #wrapper .sideBar { background-color: green; width: 2....
30 oct. 2020 à 15:20
Je ne parviens pas à aligner au centre les divs suivants sur toute la largeur de la page: entête contenu bas de page Mais ça ne marche pas! Qu'est-ce qui doit être changé dans mon CSS pour qu'il fonctionne? body { margin:0; padding:0; } #wrapper { display: flex; flex-direction: column; }....
28 oct. 2020 à 16:48
J'essaie de résoudre ce problème depuis un certain temps, mais je suis en mesure de trouver la solution. Sur la vue mobile, la barre NAV passe sous le pied de page. Je pense qu'il y a une sorte d'erreur dans le code HTML ou CSS. J'ai essayé d'ajuster les valeurs également ajouté de nombreux éléme....
28 oct. 2020 à 16:38
J'ai 3 images qui ne sont pas de la même taille au format Desktop, comment obtenir la même taille? Ensuite, au format mobile, je voudrais qu'il se chevauche en prenant toute la largeur. J'ai essayé avec flex-direction: column mais cela ne fonctionne pas. J'utilise flexbox pour mon code. .backgro....
28 oct. 2020 à 16:26
J'ai actuellement la configuration de grille d'amorçage suivante comme celle-ci <div class="container"> <div class="row"> <div class="col-4"> <div class="A"> A </div> </div> <div class="col-8"> <div class="B"> B </div> <div class="C"> ....
28 oct. 2020 à 10:50
J'ai un modèle HTML et je souhaite créer une colonne flexible simple pour ma liste de données. L'icône de coche arrive à la deuxième ligne sur l'appareil mobile. Je le veux sur une seule ligne sans saut de ligne. <div class="container disable-text-selection "> <div class="row"> <div class="....
28 oct. 2020 à 01:26
.flex { display: flex; flex-wrap: wrap; } .flex>div { flex: 1; min-width: 100px; } .a { background-color: green; } .b { background-color: yellow; } .c { background-color: red; } .d { background-color: purple; } <div class="flex"> <div class="a">A</div> <div class="b">B</di....
25 oct. 2020 à 01:34
J'apprends CSS flex. Mon code HTML est comme ci-dessous .box { display: flex; align-items: flex-start; height: 200px; } .box>*:first-child { align-self: stretch; } .box .selected { align-self: center; } <div class="box"> <div>One</div> <div>Two</div> <div class="selected">Three<....
24 oct. 2020 à 16:30