- Tags: Flex, Layout, Responsive
- Categories: CSS Reference, CSS Resources, Reference
Quick Reference
This is a quick reference list of CSS flex properties used to create flex templates and style them for a responsive design.
CSS – align-content Property
The align-content property modifies the behavior of the flex-wrap property by aligning multiple flex lines.
CSS – align-items Property
The align-items property specifies the vertical alignment for items inside the flex container.
CSS – align-self Property
The align-self property specifies the alignment for the selected item inside a flexible container.
CSS – flex Property
The flex property is a shorthand property for: flex-basis, flex-grow, and flex-shrink.
CSS – flex-basis Property
The flex-basis property specifies the initial length of a flexible item.
CSS – flex-direction Property
The flex-direction property specifies the direction of the flexible items.
CSS – flex-flow Property
The flex-flow property is a shorthand property for flex-direction and flex-wrap.
CSS – flex-grow Property
The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container.
CSS – flex-shrink Property
The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.
CSS – flex-wrap Property
The flex-wrap property specifies whether the flexible item should wrap or not.
CSS – justify-content Property
The justify-content property aligns the flexible container’s items when the items do not use all available space on the horizontal axis.
CSS – order Property
The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.
Why 1SMARTchicken?
See More →
Thanks for your support!
CSS Books
All are affiliate links. Thank you for your support!
CSS NOTES:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
