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