Flexbox Layouts

Challenge:

Follow the prompts on the page to style each set of layouts using flexbox. Images are provided of the final result. Try to match the layouts & visuals as closely as possible. Most of the HTML structure is provided for you, but in some cases you may need to add additional elements, classes, etc. Add your CSS to the main.css file. You should only be working within the "section" elements of this page.

Three Column

Create this layout: (Image)

Alternating Items

Create this layout: (Image)

Hint: Try adding classes to the similar list items.

Centered Content

Create this layout: (Image)

Lorem ipsum dolor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, dolore.

Uneven Column

Create this layout: (Image)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, id quos architecto, dignissimos a, itaque officiis animi sint dolor earum aperiam cumque dolorem optio, dolores.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, id quos architecto, dignissimos a, itaque officiis animi sint dolor earum aperiam cumque dolorem optio, dolores.

Image Grid

Create this layout: (Image)

Split Grouping

Create this layout: (Image)

Hint: Try grouping elements that need to stay together before creating space between elements.

Image Stretch

Create this layout: (Image)

Hint: Wrap flexed images in their own element to keep them from being stretched.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dicta. Quas cum, dolor maiores. Sapiente, commodi ipsa nobis atque explicabo amet reiciendis aperiam voluptas odit architecto et ullam cum doloribus, laudantium. Aliquam nihil maxime optio dolor suscipit ea eligendi modi delectus magnam ipsa quis soluta cum laboriosam id unde recusandae, quaerat culpa autem vel neque, distinctio ut eos repudiandae commodi. Consequatur ad voluptatum, eos. Sed quas nobis praesentium, quam necessitatibus recusandae atque sapiente culpa, neque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dicta. Quas cum, dolor maiores. Sapiente, commodi ipsa nobis atque explicabo amet reiciendis aperiam voluptas odit architecto et ullam cum doloribus, laudantium. Aliquam nihil maxime optio dolor suscipit ea eligendi modi delectus magnam ipsa quis soluta cum laboriosam id unde recusandae, quaerat culpa autem vel neque, distinctio ut eos repudiandae commodi. Consequatur ad voluptatum, eos. Sed quas nobis praesentium, quam necessitatibus recusandae atque sapiente culpa, neque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dicta. Quas cum, dolor maiores. Sapiente, commodi ipsa nobis atque explicabo amet reiciendis aperiam voluptas odit architecto et ullam cum doloribus, laudantium. Aliquam nihil maxime optio dolor suscipit ea eligendi modi delectus magnam ipsa quis soluta cum laboriosam id unde recusandae, quaerat culpa autem vel neque, distinctio ut eos repudiandae commodi. Consequatur ad voluptatum, eos. Sed quas nobis praesentium, quam necessitatibus recusandae atque sapiente culpa, neque.