02: Containers Wrap Up

In this video, Alexa Champion, Mark Tucker will finish exploring the container component. Particularly the spacing, wrapping, growing, shrinking, and position properties.

Last week we saw how components can be laid out in a viewport and how some properties can be set up to affect a container's child component. This week, Mark discusses spacing, wrapping, growing, shrinking, and position as component properties.

Using the spacing property, you will be able to add spaces between components.

The wrap property allows the components to move to the next column or row if the components do not fit on the viewport screen. It important to know the default of the wrap property is no wrap.

The grow property will allow you to adjust the size of components to fill all extra space on the screen. Shrink, on the other hand, will reduce the size of a component so that all components are displayed.

We can also adjust the position of child components. Setting the position to absolute allows us to position a child component out of the normal layout ordering and position it relative to the parent container.

APL Ninja Link: https://apl.ninja/MarkTucker/dabble-l... APL Container Documentation: https://developer.amazon.com/en-US/do...