--- layout: default title: FlexBox Exercise comment: | Goal: Simulate a column layout using FlexBox +- - -viewport - - -+ |+- - -+- - -+- - -+| || BOX | BOX | BOX || |+- - -+- - -+- - -+| +- - - - - - - - - -+ +- - -+- - -+ | BOX | BOX | +- - -+- - -+ Description: 1. The FlexBox container should have 9 children 2. The FlexBox container should fill the viewport 3. FlexBox children should be * 350px wide * the viewport's height * and include 25px of padding 4. Flex children should * grow to fill extra space * not shrink below 350px 5. The above styles apply only at widths >= 700px 6. At smaller widths, the blocks should be automatically sized styleIncludes: - presets-01.css - ../resources/font.css scriptIncludes: - ../resources/feature-detect.js style: | --- {% include flexbox-container.html %}