CSS Flexbox Layout Guide
Flexbox is a layout model for arranging items (horizontally or vertically) within a container, in a flexible and responsive way
display- Must be set toflexorinline-flexflex-direction- Sets the display-direction of flex itemsflex-wrap- Specifies whether the flex items should wrap or notflex-flow- Shorthand property forflex-directionandflex-wrapjustify-content- Aligns the flex items when they do not use all available space on the main-axis (horizontally)align-items- Aligns the flex items when they do not use all available space on the cross-axis (vertically)align-content- Aligns the flex lines when there is extra space in the cross axis and flex items wrapCSS flex-direction Property
row(default)columnrow-reverse
Example
.flex-container {
display: flex;
flex-direction: row;
}CSS Grid Layout
The Grid Layout Module offers a grid-based layout system, with rows and columns.
The Grid Layout Module allows developers to easily create complex web layouts.
Example
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
background-color: blue;
padding: 10px;
}
.container div {
background-color: #f1f1f1;
border: 1px solid black;
padding: 10px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
Join Abhishek on Peerlist!
Join amazing folks like Abhishek and thousands of other builders on Peerlist.
1
2
0