Flexbox Cheatsheet

WIKI

WIKITEXT

HTML/CSS

CONTRIBUTORS

FAMILY HISTORY CENTERS

VISUAL EDITOR

Flexbox/Grids Lessons

1. Introduction
2. Display Horizontal
3. Horizontal Spacing
4. Box Sizes
5. Flex Wrapping
6. Display Vertical
7. Centering Text
8. Misc Horizontal
9. Misc Attributes

---

Grids

1. Introduction
2. Containers

---

Additional Helps

1. Flexbox Cheatsheet

FLEXBOX CHEATSHEET
Condensed guide to Wikitext coding

Click on sort icon to put list in alphabetical order

• REMEMBER: All Flexbox coding of items requires that they are inside of a container, such as a "div" or "p" tag:
  

<div style="display:flex">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>

</div>

Back to Flexbox Lessons

Description	Flex coding	You Get
Making all items the same size	display:flex	1 2 3
Placing objects at end of containers	justify-content:flex-end	1 2 3
Placing objects in the center of containers	justify-content:center	1 2 3
Placing objects evenly spaced across a containter	justify-content:space-between	1 2 3
Evenly spacing objects with space on either end	justify-content:space-around	1 2 3
Placing objects at end of containers	flex:#	1 2 3
Controlling size of flex items	Different flex numbers	1 2 3
flex zero	Box one with flex number zero	1 2 3
Change order in row	order:#	1 2 3
Wrapping boxes in limited space	flex-wrap:wrap	1 2 3
Placing objects in a column	flex-direction:column	1 2 3
Centering horizontally	display;flex; justify-content:center Centering text or images inside an item horizontally.	1 2 3
Centering vertically	display:flex; align-items:center Center text or image inside an item vertically.	1 2 3
Centering vertically & Horizontally	display:flex; justify-content:center; align-items:center Center text or image inside an item both horizonatly and vertically at the same time.	1 2 3
Placing objects at opposite ends of containers	White box with flex:6 between items 1 and 2	1 2 3

Back to Flexbox Lessons