Flexbox Challege 7

Set the section to display flex and give the flex items a 20px gap. Then use the cross axis alignment to change the vertical alignment of the flex items (the paragraphs in this case). Try using the align-items property and try the flex-start, flex-end, center and stretch properties. Stretch is the default.

Note that these cross axis alignments work because there's a minimum height to the section, which is taller than the contents in the section.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic voluptatem, eum ullam, earum culpa cupiditate rem accusantium harum nobis, alias labore repellat dolore recusandae sed?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, voluptatem illum! Quasi provident consequatur accusantium, mollitia et rem eaque ipsam hic natus laborum deserunt iure impedit repellendus quas. Architecto, deleniti.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo corporis nesciunt dolor assumenda ipsa et dicta tempora ratione id maiores, voluptate ducimus hic deserunt blanditiis incidunt culpa sunt!

Notice how the calc() property is used in the width declaration for the paragraphs, allowing us to mix units of measure. Let the browser do the math!