Anonyme

Bonjour, je découvre le type flexbox. Je voudrais utiliser ce type de positionnement pour des éléments fils d'un conteneur mais je voudrai ostraciser un des fils.

Voici le code :

body {
	margin: 0px;
	padding: 0px;
}

.element:first-of-type { 
	background-color: yellow;
}

.element:nth-of-type(2) {
	background-color: green;
}

.element:nth-of-type(3) {
	background-color: blue;
}

#container {
	background-color: red;
	width: 800px;
	height: 800px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.element {
	height: 90px;
	width: 150px;
}

#noflex {
	height: 150px;
	width: 600px;
	background-color: black;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>noflex</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="container">
		<div class="element"></div>
		<div class="element"></div>
		<div class="element"></div>
		<div id="noflex"> 
		</div>
	</div>
</body>
</html>

J'aimerai que la div avec l'id noflex se positionne normalement dans le flux en dessous des autres. Est-ce possible ? Si oui, je suis preneur de toutes suggestions.

Merci à ceux qui ont pris la peine de me lire ou de me répondre.

Lamecarlate

12 janvier 2016 à 12:04:16

Bonjour,

À ma connaissance, non, display: flex crée un contexte complètement différent.

Tu peux peut-être ruser, en mettant flex-wrap: wrap à ton conteneur, et en forçant le dernier à prendre toute la largeur pour qu'il aille sous les autres (non testé, c'est juste une idée).

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Anonyme

12 janvier 2016 à 12:08:15

Merci, pour votre réponse aussi rapide. Tant pis , je vais faire ça avec des flottants et un clearfix.

-
Edité par Anonyme 12 janvier 2016 à 12:09:13

Lamecarlate

12 janvier 2016 à 12:11:49

Sinon, simplement sortir le "noflex" du conteneur ? Et le mettre juste dessous.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Anonyme

12 janvier 2016 à 12:27:20

-
Edité par Anonyme 12 janvier 2016 à 13:35:10

Lamecarlate

12 janvier 2016 à 12:30:45

Et où est le "noflex" dans ton schéma ? Je ne le vois pas.

-
Edité par Lamecarlate 12 janvier 2016 à 12:30:56

Pas d'aide concernant le code par MP, le forum est là pour ça :)

gcyrillus

12 janvier 2016 à 20:04:33

avec display:flex; les marges sur les enfants, horizontal et vertical fonctionnent. tu peut forcer un margin-bottom : 100%; pour coller le dernier element le plus haut possible. Il sera repousé au besoin : http://codepen.io/anon/pen/adyoqa conteneur en max-width, reduis la fen^tre et en principe le block noir descend au fur et a mesure que les autres s'empile.

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

Anonyme

12 janvier 2016 à 20:24:04

gcyrillus a écrit:

avec display:flex; les marges sur les enfants, horizontal et vertical fonctionnent. tu peut forcer un margin-bottom : 100%; pour coller le dernier element le plus haut possible. Il sera repousé au besoin : http://codepen.io/anon/pen/adyoqa conteneur en max-width, reduis la fen^tre et en principe le block noir descend au fur et a mesure que les autres s'empile.

Merci du tuyau

AdJa2

16 octobre 2020 à 18:51:32

Lui donner une position "absolute"

AbcAbc6

16 octobre 2020 à 19:04:21

@AdJa2 Bonsoir, merci de ne pas déterrer d'ancien sujet résolu.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"

soit de créer un nouveau sujet décrivant votre propre contexte

ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

Forums des Zéros

Empécher le display flex d'un élément fils.

Déterrage

Empécher le display flex d'un élément fils.

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs