2
votes

La flexbox imbriquée ne s'affiche pas correctement

Je suis un débutant en flexbox. J'essaye d'implémenter une flexbox avec différents paramètres dans une flexbox déjà existante. Ceci est ce que j'ai jusqu'à présent. Voici ce que j'essaye de faire:

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>

  <div class="ads">
    <div class="ads_element"></div>
    <div class="ads_element"></div>
    <div class="ads_element"></div>
    <div class="ads_element"></div>
  </div>

  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

html,
body {
  background-color: #ffeead;
  margin: 10px;
}

.container>div:nth-child(even) {
  background-color: red;
}

.container>div:nth-child(odd) {
  background-color: blue;
}

.container {
  max-width: 500px;
  margin: auto;
  border: 5px solid #ffcc5c;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.element {
  box-sizing: border-box;
  border: 1px solid #edeeee;
  width: calc(50% - 5px);
  margin: 5px 0px;
  height: 200px;
  box-shadow: 0 0 5px 0 #edeeee;
  border-radius: 5px 5px 5px 5px;
}

.ads {}

.ads_element {
  width: calc(25% - 5px);
  height: 100px;
  background-color: green;
}

html css alignment flexbox

0 commentaires

5 Réponses :

1
votes

vous devez définir la largeur et la hauteur des annonces , sinon cette balise et tout ce qu'elle contient aura 0 largeur et 0 hauteur par défaut

.ads
{
    width: 100%;
  height: 100%;
  display: flex;
}
.ads_element
{
    width: calc(25% - 5px);
    height: 100px;
    background-color:green;
  margin: 10px;
}

ajoutez-la dans votre code pour voir le résultat

0 commentaires

1
votes

J'ai renseigné les propriétés css de la classe ads

.ads
{
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
}

Vérifiez le violon qui fonctionne ici https://jsfiddle.net/L5egv0ah/1/

0 commentaires

1
votes

Modifie le css de .ads et .ads_element ci-dessous en utilisant display: flex et width: 100% et écrasement de la couleur d'arrière-plan

<div class="container">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>

	<div class="ads"> 
		<div class="ads_element"></div>
		<div class="ads_element"></div>
		<div class="ads_element"></div>
		<div class="ads_element"></div>	
	</div>

    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

html, body 
{
  background-color: #ffeead;
  margin: 10px;
}
.container > div:nth-child(even) 
{
  background-color: red;
}

.container > div:nth-child(odd) 
{
  background-color: blue;
}
.container
{
	max-width: 500px;
	margin: auto;
	border: 5px solid #ffcc5c;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.element
{
    box-sizing: border-box;
    border: 1px solid #edeeee;
    width: calc(50% - 5px);
    margin: 5px 0px;
    height: 200px;
    box-shadow: 0 0 5px 0 #edeeee;
    border-radius: 5px 5px 5px 5px;
}
.container > div:nth-child(odd).ads
{
    width: 100%;
    display: flex;
    background-color: transparent;
}
.ads_element
{
	width: calc(25% - 5px);
	height: 200px;
	border:3px solid red;
  background-color: transparent;
  margin: 0px 5px;
}

0 commentaires

2
votes

Vous pouvez le faire sans imbriquer les flexbox - ajustez simplement la largeur et la marge de l ' ads_element - voir la démo ci-dessous:

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="ads">
    <div class="ads_element"></div>
    <div class="ads_element"></div>
    <div class="ads_element"></div>
    <div class="ads_element"></div>
  </div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

html,
body {
  background-color: #ffeead;
  margin: 10px;
}

.container>div:nth-child(even) {
  background-color: red;
}

.container>div:nth-child(odd) {
  background-color: blue;
}

.container {
  max-width: 500px;
  margin: auto;
  border: 5px solid #ffcc5c;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.element {
  box-sizing: border-box;
  border: 1px solid #edeeee;
  width: calc(50% - 5px);
  margin: 5px 0px;
  height: 200px;
  box-shadow: 0 0 5px 0 #edeeee;
  border-radius: 5px 5px 5px 5px;
}

.ads { /* ADDED */
  display: flex;
  width: 100%;
  background: transparent !important;
  
}

.ads_element {
  width: calc(25% - 5px);
  height: 100px;
  /* background-color: green; */
  /* ADDED BELOW */
  border: 2px solid red;
  margin: 5px;
}

Si vous ne souhaitez pas modifier votre balisage, vous pouvez simplement faire des annonces une flexbox - voir la démo ci-dessous:

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <!-- <div class="ads"> -->
  <div class="ads_element"></div>
  <div class="ads_element"></div>
  <div class="ads_element"></div>
  <div class="ads_element"></div>
  <!-- </div> -->
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

html,
body {
  background-color: #ffeead;
  margin: 10px;
}

.container>div:nth-child(even) {
  background-color: red;
}

.container>div:nth-child(odd) {
  background-color: blue;
}

.container {
  max-width: 500px;
  margin: auto;
  border: 5px solid #ffcc5c;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.element {
  box-sizing: border-box;
  border: 1px solid #edeeee;
  width: calc(50% - 5px);
  margin: 5px 0px;
  height: 200px;
  box-shadow: 0 0 5px 0 #edeeee;
  border-radius: 5px 5px 5px 5px;
}

.ads_element {
  width: calc(25% - 15px); /* CHANGED */
  height: 100px;
  background-color: transparent !important; /* CHANGED */
  /* ADDED BELOW */
  border: 2px solid red;
  margin: 5px;
}

0 commentaires

1
votes

Voici ce que vous voulez faire:

HTML

html, body 
{
  background-color: #ffeead;
  margin: 10px;
}
.container > .element_row > div:nth-child(even) 
{
  background-color: red;
}

.container > .element_row > div:nth-child(odd) 
{
  background-color: blue;
}
.container
{
    max-width: 500px;
    margin: auto;
    border: 5px solid #ffcc5c;
    display: flex;
  flex-flow: column;
}
.element_row{
  display:flex;
  flex-flow:row;
  justify-content: space-between;
}
.element
{
    width: 49%;
    box-sizing: border-box;
    border: 1px solid #edeeee;
    margin: 5px 0px;
    height: 200px;
    box-shadow: 0 0 5px 0 #edeeee;
    border-radius: 5px 5px 5px 5px;
}
.ads
{
    display: flex;
  flex-flow:row;
  justify-content: space-evenly;
}
.ads_element
{
  width: 22%;
    height: 200px;
    border: 3px solid red;
}

CSS

<div class="container">
  <div class="element_row">
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="element_row">
    <div class="element"></div>
    <div class="element"></div>
  </div>
    <div class="ads"> 
        <div class="ads_element"></div>
        <div class="ads_element"></div>
        <div class="ads_element"></div>
        <div class="ads_element"></div> 
    </div>
  <div class="element_row">
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="element_row">
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

0 commentaires