css-layout-cheat-sheet.md

layout	title	tags	desc	groups
cheatsheet	CSS layout cheat sheet	layout position float columns box model flexbox center absolute relative vertical horizontal margin padding cheat sheet	A cheat sheet for the basics of CSS layout properties.	title items Layout mechanics name details *Display* *Controls how an element is represented within the flow.* --- &nbsp; `display: inline`  Allows other elements beside; margin, padding & width don’t work. --- &nbsp; `display: block`  Takes up an entire line; margin, padding & width work. --- &nbsp; `display: inline-block`  Allows other elements beside; margin, padding & width work. Can create columns, but will force a space between boxes. name details *Float* *Controls whether text is wrapped around the element.* --- &nbsp; `float: left|right|none`  Allows other elements to wrap around the element. --- &nbsp; Multiple floats  Can create columns with boxes touching sides. --- &nbsp; `clear: left|right|both`  Force the element below floated elements. --- &nbsp; `overflow: hidden`  Use on a parent element to force it to wrap around the floated children—a clearfix. name details *Position* *Gives strict, coordinate-based control over layout.* --- &nbsp; `position: absolute`  Move an element around based on coordinates. --- &nbsp; `position: relative`  Added to a parent element to reset absolute child’s coordinates. --- &nbsp; `position: fixed`  Forces an element to not move when the page is scrolled. --- &nbsp; `z-index`  Control the stacking order of elements—higher number is closer. title items Centering elements name details `text-align: center` Works only on `display: inline` & `inline-block` elements. *Must be applied to the parent element.* ```html <figure class="img-box"> <img src="images/argentinosaurus.jpg" alt=""> <figcaption>The mighty Argentinosaurus</figcaption> </figure> ``` ```css .img-box { text-align: center; } ``` name details `margin: 0 auto` Works only on `display: block` elements. *The element must have a `width`* ```html <div class="box">Stegosaurus</div> ``` ```css .box { width: 24em; /* Without a width `auto` won’t work */ margin-left: auto; margin-right: auto; } ``` You can also specify just `margin-left: auto` and `margin-right: auto` if you want margins on the top or bottom. name details `vertical-align: middle` Works only on `display: inline` & `inline-block` elements. ```html <ul> <li>Pteranodon</li> <li>Quetzalcoatlus</li> </ul> ``` ```css ul li { display: inline-block; vertical-align: middle; } ``` name details *Centering absolute* Use `transform` & `50%` coordinates to center an absolutely positioned element. ```html <div class="banner"> <div class="content"> <h1>Micropachycephalosaurus</h1> <p>Longest dinosaur name ever!</p> </div> </div> ``` ```css .banner { position: relative; } .content { position: absolute; left: 50%; transform: translateX(-50%); } ``` *Or vertical centering too…* ```css .content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } ``` name details *Centering with float* *There’s no `float: center`* **You cannot center floated elements.** name details *Centering with flexbox* Flex box has a bunch of different alignment classes—*that are always applied to the parent*. ```html <div class="card"> <h2>Edmontosaurus</h2> <a href="#">See the bones!</a> </div> ``` ```css .card { display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center; } ``` *This will be completely centered within the box.* [See the flexbox cheat sheet for more details.](/topics/flexbox-cheat-sheet/) title items Common code name details *Border box* Used to change layout math for width & padding. **Put at the top of every CSS file.** ```css html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } ``` name details *Clearfix for float* Add to the parent elements of floats to force the parent to surround the floated element. Can be used instead of `overflow: hidden` ```css .clearfix::after { content: " "; display: block; clear: both; } ``` name details *Flexible images* Use `width` & `display` to make images flex to their parent’s size. ```css img { display: block; width: 100%; } ```