Answers for "css flex wrap responsive"

responsive flexbox in css

.flex-container {
  display: flex;
  flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

Posted by: Guest on September-18-2021

flex block reponsive

/* big screen */
.navigation {
	display: flex;
	flex-flow: row wrap;
	/* Aligne les items à end line sur main-axis */
	justify-content: flex-end;
}

/* medium  screen */
@media all and (max-width: 800px) {
	.navigation {
	/* on centre en répartissant l'espace entre les items */
	justify-content: space-around;
	}
}

/* little screen */
@media all and (max-width: 500px) {
	.navigation {
	/* On n'utilise plus row mais column */
	flex-direction: column;
	}
}

Posted by: Guest on April-18-2020

Source

flex wrap css

<style> 
#datadiv {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
}

#datadiv div {
  width: 50px;
  height: 50px;
}
</style>
</head>
<body>

<h1>The flex-wrap Property</h1>

<div id="datadiv">
  <div style="background-color:red;">A</div>
  <div style="background-color:green;">B</div>
  <div style="background-color:yellow;">C</div>
  <div style="background-color:blue;">D</div>
  <div style="background-color:cyan;">E</div>
  <div style="background-color:indigo;">F</div>
</div>

Posted by: Guest on April-20-2020