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.

12
Comment aligner un élément flexible à droite?
Existe-t-il un moyen plus flexible pour aligner à droite "Contact" que pour l'utiliser position: absolute? .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div …
682 html  css  flexbox 
5
Dans CSS Flexbox, pourquoi n'y a-t-il pas de propriétés «justifier-éléments» et «justifier-soi»?
Considérez l'axe principal et l'axe transversal d'un conteneur flexible: Source: W3C Pour aligner les éléments flexibles le long de l'axe principal, il existe une propriété: justify-content Pour aligner les éléments flexibles le long de l'axe transversal, il existe trois propriétés: align-content align-items align-self Dans l'image ci-dessus, l'axe principal est horizontal …
12
Flexbox: centrer horizontalement et verticalement
Comment centrer div horizontalement et verticalement dans le conteneur en utilisant flexbox. Dans l'exemple ci-dessous, je veux que chaque nombre au-dessous les uns des autres (en lignes), qui sont centrés horizontalement. .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; …
672 html  css  flexbox 
10
Comment puis-je faire en sorte que les enfants Flexbox atteignent 100% de la hauteur de leurs parents?
J'essaie de remplir l'espace vertical d'un élément flexible à l'intérieur d'une Flexbox. .container { height: 200px; width: 500px; display: flex; flex-direction: row; } .flex-1 { width: 100px; background-color: blue; } .flex-2 { position: relative; flex: 1; background-color: red; } .flex-2-child { height: 100%; width: 100%; background-color: green; } <div class="container"> …
459 css  flexbox 
8
Comment aligner verticalement du texte à l'intérieur d'une flexbox?
Je voudrais utiliser flexbox pour aligner verticalement du contenu à l'intérieur d'un <li>mais sans grand succès. J'ai vérifié en ligne et de nombreux didacticiels utilisent en fait un div wrapper qui obtient les align-items:centerparamètres flex sur le parent, mais je me demande s'il est possible de supprimer cet élément supplémentaire? …
425 html  css  flexbox 
18
Comment aligner 3 divisions (gauche / centre / droite) à l'intérieur d'une autre division?
Je veux avoir 3 divisions alignées à l'intérieur d'une division de conteneur, quelque chose comme ceci: [[LEFT] [CENTER] [RIGHT]] La division du conteneur est 100% large (pas de largeur définie) et la division centrale doit rester au centre après le redimensionnement du conteneur. J'ai donc mis: #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 …
27
Flex-box: aligner la dernière ligne sur la grille
J'ai une disposition simple de boîte flexible avec un conteneur comme: .grid { display: flex; flex-flow: row wrap; justify-content: space-between; } Maintenant, je veux que les éléments de la dernière ligne soient alignés avec l'autre. justify-content: space-between;doit être utilisé car la largeur et la hauteur de la grille peuvent être …
380 css  flexbox  grid-layout 
8
Aligner un élément en bas avec flexbox
J'en ai divavec quelques enfants: <div class="content"> <h1>heading 1</h1> <h2>heading 2</h2> <p>Some more or less text</p> <a href="/" class="button">Click me</a> </div> et je veux la mise en page suivante: ------------------- |heading 1 | |heading 2 | |paragraph text | |can have many | |rows | | | | | | …
375 html  css  flexbox 
2
Flexbox ne donnant pas la même largeur aux éléments
Tenter une navigation flexbox contenant jusqu'à 5 éléments et aussi peu que 3, mais cela ne divise pas la largeur également entre tous les éléments. Violon Le tutoriel que je modélise après est http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/ TOUPET * { font-size: 16px; } .tabs { max-width: 1010px; width: 100%; height: 5rem; border-bottom: solid …
368 html  css  flexbox 
21
Bootstrap 4 aligner les éléments de la barre de navigation vers la droite
Comment aligner un élément de la barre de navigation à droite? Je veux avoir le login et m'inscrire à droite. Mais tout ce que j'essaie ne semble pas fonctionner. Voici ce que j'ai essayé jusqu'à présent: <div>autour <ul>de l'attribut:style="float: right" <div>autour <ul>de l'attribut:style="text-align: right" essayé ces deux choses sur les …
7
Quelle est la différence entre display: inline-flex et display: flex?
J'essaie d'aligner verticalement des éléments dans un wrapper ID. J'ai donné la propriété display:inline-flex;à cet ID car le wrapper d'ID est le conteneur flexible. Mais il n'y a pas de différence de présentation. Je m'attendais à ce que tout dans l'ID wrapper soit affiché inline. Pourquoi pas? #wrapper { display: …
331 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.