CSS Layout Trinity: Flexbox, Grid, and Positioning
1. Flexbox: The One-Dimensional Master
The Flexbox is best for a system of laying out items in one dimension (in a column or row). Great for nav bars, centering items, and filling space.
Key Properties
display: flex; : <<< The “on” switch for the parent container.
justify-content: Used to align the fle items (when the total free space in a flex container has been distributed) along the main-axis.
Values: flex-start, center, space-between, space-around.
align-items: Specifies the alignment of items on the cross axis (the vertical by default).
flex-grow: Specifies the proportion of space in the flex container an item should take up.
Example: A Centered Navigation Bar
HTML <nav class=”navbar”> <div class=”logo”>Brand</div> <ul class=”links”> <li>Home</li> <li>About</li> </ul> <button>Login</button> </nav>
CSS
.navbar {
display: flex;
justify-content: space-between; /* Push items out to the edges /
align-items: center; / Vertical center all items */
padding: 10px 20px;
background: #f4f4f4;
}
2. CSS Grid: The Two-Dimensional Architect
Where Flexbox deals with one-dimensional layouts and application of space along a single axis (the main axis, if you’re familiar with the term), Grid deals with two dimensions (rows columns). It’s the optimal choice for general page-level layouts and intricate galleries alike.
Key Properties
display: grid;: Makes the container a grid.
grid-template-columns: Defines the width of your columns ( e.g., 1fr 1fr 1fr for three evenly spaced columns).
gap: Double The gap between rows and columns.
grid-area: Name your grid sections so you can easily place them.
Example: A Standard Web Layout
CSS
.container {
display: grid;
grid-template-columns: 200px 1fr; /* Sidebar and main content /
grid-template-rows: auto 1fr auto; / Header, content, footer> */
gap: 15px;
height: 100vh;
}
. header { grid-column: 1 / 3; } /* Takes up both columns */
3. Positioning: Breaking the Flow
Positioning Basically, you can move elements out of the ”normal document flow” with positioning. This is how you make sticky headers, or overlays.
The Five Values
static: The default. Questions Elements appear inline in normal HTML.
relative: Moves an element relative to its original position, without affecting its neighbors.
absolute: Positions the element relative to the nearest positioned ancestor (the position: relative parent).
fixed: Means it stays put on the screen in exactly the same location, even as you scroll.
sticky: behaves like relative but will “stick” once the top of the element is reached.Protocol-Oriented Programming with Swift 2.0 it may not be good enough for you anymore.
Example: A Floating Notification Badge
HTML <div class=”cart-icon”> <i class=”icon”>🛒</i> <span class=”badge”>3</span> </div>
CSS
.cart-icon {
position: relative; /* The ‘Anchor’ */
display: inline-block;
}
.badge {
position: absolute; /* formats in relation to containing element- the cart-icon */
top: -5px;
right: -5px;
background: red;
border-radius: 50%;
padding: 5px;
}
For more free projects,
check our Bootstrap Templates section. Visit → https://codevigyaan.com/bootstrap-projects
Want E-Books? Open →https://codevigyaan.com/free-e-books/
