Breaking News: Grepper is joining You.com. Read the official announcement!

responsive flexbox

30_Savaliya Denish answered on September 18, 2021 Popularity 10/10 Helpfulness 3/10

answer responsive flexbox

related responsive flexbox in css

responsive flexbox

Comment

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
 
}

/* Create four equal columns */
.column {
  flex: 24%;
  padding: 20px;
   margin:4px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 48%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<h2>Responsive Four Column Layout with Flex</h2>
<p><strong>Resize the browser window to see the responsive effect.</strong> On screens that are 992px wide or less, the columns will resize from four columns to two columns. On screens that are 600px wide or less, the columns will stack on top of each other instead of next to eachother.</p>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  
  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>

Popularity 10/10 Helpfulness 3/10 Language css

Source: Grepper

Tags: css flexbox responsive

Link to this answer
Share Copy Link

Contributed on Jun 08 2022

30_Savaliya Denish

0 Answers Avg Quality 2/10

Closely Related Answers

responsive flexbox in css

Comment

.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;
  }
}

Popularity 10/10 Helpfulness 6/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Sep 18 2021

Delta Sierra

0 Answers Avg Quality 2/10

responsive flexbox

Contents

More Related Answers

responsive flexbox

Closely Related Answers

responsive flexbox in css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.