Flex2x2
How do I make an flex2x2?
What is a flex2x2? How do you make a flex2x2? This script and codes were developed by Xavier Martínez on 31 October 2022, Monday.
Flex2x2 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flex2x2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="grid2x2"> <div class="box block1">one</div> <div class="box block2">two</div> <div class="box block3">three</div> <div class="box block4">four</div>
</div>
</body>
</html>
Flex2x2 - Script Codes CSS Codes
body { margin: 0;
}
.grid2x2 { display: flex; flex-flow: row wrap;
}
.box { display: flex; flex-basis: calc(50%); justify-content: center; flex-direction: column; min-height: 200px; text-align: center;
}
.box:nth-child(1) { background-color: blue;
}
.box:nth-child(2) { background-color: yellow;
}
.box:nth-child(3) { background-color: green;
}
.box:nth-child(4) { background-color: red;
}
![Flex2x2 - Script Codes](http://shots.codepen.io/xmjol/pen/yXdKoQ-512.jpg)
Developer | Xavier Martínez |
Username | xmjol |
Uploaded | October 31, 2022 |
Rating | 3 |
Size | 1,883 Kb |
Views | 24,288 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
React UI - 04 Steps Form | 4,906 Kb |
SVG Business Card | 3,661 Kb |
Pixel Anim Test | 2,415 Kb |
ReactJS Arrays | 2,631 Kb |
Locatifs-Info | 2,592 Kb |
ReactJS Tutorial Testing | 3,236 Kb |
ResaFav Customizer | 3,669 Kb |
React UI - 01 - Voting System | 4,796 Kb |
A beautiful day | 2,973 Kb |
4-block-flex Round | 3,301 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Css3 loader | Clknap | 2,391 Kb |
CSS Link Zoom On Click | Bryce | 1,960 Kb |
Animated skewed panes | NyX | 4,462 Kb |
Table Exercise | Fresco | 9,585 Kb |
Hello People | Danburrows | 2,365 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
Tree growth tests | Orchard | 3,818 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
Button shaking | SusanneLundblad | 2,227 Kb |
Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!