.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 :: rounded gradient border css |
| Css :: background-color: transparent; |
| Css :: grid columns |
| Css :: css transform border radius |
| Css :: align text in center css |
| Css :: css grid make all rows same height |
| Css :: bulma capitalized |
| Css :: css full grid span |
| Css :: html css add Avenir light font |
| Css :: css firefox remove scrollbar |
| Css :: add padding to scrollbar |
| Css :: scroll bottom css |
| Css :: padding for text in html |
| Css :: td wrap text without space |
| Css :: red color rgb |
| Css :: css change background color of page |
| Css :: remove scrollbars scroll |
| Css :: putting picture shaddow in css |
| Css :: how to scale a bg image acc to size of div |
| Css :: ignore br css |
| Css :: css hide text |
| Css :: Add elipses to a dom element with css |
| Css :: grid-template-areas css |
| Css :: special custom scrollbar in scss |
| Css :: rem vs em |
| Css :: focus selector css |
| Css :: glass css |
| Css :: how to remove the underline from a link in css |
| Css :: bootstrap cheat sheet |
| Css :: resize in css |