Search
 
SCRIPT & CODE EXAMPLE
 

CSS

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

responsive flexbox

<!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>


Comment

PREVIOUS NEXT
Code Example
Css :: background single line property css 
Css :: css flexbox syntax 
Css :: facebook box-shadow css 
Css :: Submit Button CSS Class 
Css :: make border absolute css 
Css :: html checkbox change styling 
Css :: material css 
Css :: mixin parameters 
Css :: sass installation 
Css :: Unable to locate package neo4j 
Css :: Fixed Button With 100% 
Css :: how to override material ui css 
Css :: css select parent 
Css :: zoom in to picture on html css 
Css :: remove black border from border css 
Css :: deploy truffle project on testnet 
Css :: remove text color from link 
Css :: box shadow example 
Css :: css break text no whitespace 
Css :: how to round input border 
Css :: update checkbox size css 
Css :: Tailwindcss Breadcrumb 
Css :: focus on input change label color 
Css :: tel css 
Css :: buttons have strange style iOS 
Css :: rendre une div scrollable 
Css :: ng-multiselect-dropdown custom css 
Css :: css @apply 
Css :: clip path css 
Css :: css flex 
ADD CONTENT
Topic
Content
Source link
Name
6+6 =