5R - CSS Flex

Flex Resource 1

CSS-Tricks A Complete Guide to Flexbox provides a helpful guide about flex containers and flex items but also provides helpful demonstrations and patterns to understand flex more. There are many properties when it comes to flex such as order which is in what way do you want the flex items to appear, additionally align-self is another important part of flex as align-self lets the default alignment to be overridden for specific flex items.

Flex Resource 2

MDN has a very helpful page on Flex and explains what properties are in flex as well as different examples of what the flex property can look like. There are three different properties within flex which include flex-grow,flex-basis, and flex-shrink. Flex-grow is a property that sets the flex grow factor of a flex items usual size. Flex-shrink is a property that cretaes the flex shrink factor of a flex item and if the size of all of the flex items are bigger than the flex container then the items will shrink to fit to the flex shrink. Lastly, flex-basis is a property that sets the original size of a flex item and sets the size of a content box.

Flex Resource 3

W3Schools provides a great page about flex and its shorthand properties which are flex-grow,flex-shrink and flex-basis. W3Schools also provides helpful demonstrations about the different flex styles and property values to help the person coding understand more of how to use the flex property.

Summary

Using the CSS property flex is a great way to change the appearance of your site. Making the site more visually appealing and user accessible is important. There are many different properties that go into flex which include flex-basis,flex-grow and flex-shrink. Using all of these properties is important to make the flex look the way it should.