<!DOCTYPE htmL>
<html lang="en-US">
    <head>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <link href="../common.css" rel="stylesheet" type="text/css" />
        <title>Flexbox Sample</title>
    </head>
    <body>
        <h1>Flexbox Sample</h1>
        <h2>Create a flexbox layout</h2>
        <p>Flexbox layout is an easy way to arrange multiple items inside a container.</p>
        <p>To create a flex container, simply apply <code>display: flex</code> to the desired container.</p>
        <div class="code">
            <code>.flex {
    display: flex;
}</code>
        </div>
        <p>The children of a flex container are called flex items. They will flow horizontally by default, so they will be positioned in a row:</p>
        <div class="flex">
            <div>
                <p>Item A</p>
            </div>
            <div>
                <p>Item B</p>
            </div>
            <div>
                <p>Item C</p>
            </div>
            <div>
                <p>Item D</p>
            </div>
        </div>
        <p>The flow direction can be modified using the <code>flex-direction</code> property. Setting <code>flex-direction: column</code> will cause the flex items
            to flow vertically in a column:</p>
        <div class="code">
            <code>.flex {
    display: flex;
    flex-direction: column;
}</code>
        </div>
        <div class="flex" style="flex-direction: column">
            <div>
                <p>Item A</p>
            </div>
            <div>
                <p>Item B</p>
            </div>
            <div>
                <p>Item C</p>
            </div>
            <div>
                <p>Item D</p>
            </div>
        </div>
        <p>Setting <code>flex-direction: row-reverse</code> will cause the flex items to flow in a row in
        reverse order:</p>
        <div class="code">
            <code>.flex {
    display: flex;
    flex-direction: row-reverse;
}</code>
        </div>
        <div class="flex" style="flex-direction: row-reverse">
            <div>
                <p>Item A</p>
            </div>
            <div>
                <p>Item B</p>
            </div>
            <div>
                <p>Item C</p>
            </div>
            <div>
                <p>Item D</p>
            </div>
        </div>
        <p>As we saw in the example above, <code>flex-direction: row-reverse</code> reverses the item order and aligns the items to the right. Let's align them to the left instead:</p>
        <div class="code">
            <code>.flex {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}</code>
        </div>
        <div class="flex" style="flex-direction: row-reverse; justify-content: flex-end">
            <div>
                <p>Item A</p>
            </div>
            <div>
                <p>Item B</p>
            </div>
            <div>
                <p>Item C</p>
            </div>
            <div>
                <p>Item D</p>
            </div>
        </div>
        <p>If the flex items are arranged in a column, they can be aligned to the bottom of the flex container using <code>justify-content: flex-end</code>:</p>
        <div class="code">
            <code>.flex {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}</code>
        </div>
        <div class="flex" style="flex-direction: column; justify-content: flex-end; height: 10cm;">
            <div>
                <p>Item A</p>
            </div>
            <div>
                <p>Item B</p>
            </div>
            <div>
                <p>Item C</p>
            </div>
            <div>
                <p>Item D</p>
            </div>
        </div>
        <p>Flex items can be centered by using both <code>align-items</code> and <code>justify-content</code>:</p>
        <div class="code">
            <code>.flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}</code>
        </div>
        <div class="flex" style="flex-direction: row; align-items: center; justify-content: center; height: 5cm;">
            <div>
                <p>Item A</p>
            </div>
            <div>
                <p>Item B</p>
            </div>
            <div>
                <p>Item C</p>
            </div>
            <div>
                <p>Item D</p>
            </div>
        </div>
        <p>Flex items can also be justified.</p>
        <div class="code">
            <code>.flex {
    display: flex;
    justify-content: space-between;
}</code></div>
        <div class="flex" style="justify-content: space-between;">
            <div>
                <p>Item A</p>
            </div>
            <div>
                <p>Item B</p>
            </div>
            <div>
                <p>Item C</p>
            </div>
            <div>
                <p>Item D</p>
            </div>
        </div>
        <h2>Growing flex items</h2>
        <p>Flex items grow to fill the row when the <code>flex-grow</code> property is set to a positive value:</p>
        <div class="code">
            <code>.flex {
    display: flex;
}
.flex div {
    flex-grow: 1;
}</code>
        </div>
        <div class="flex grow">
            <div>
                <p>Item A</p>
            </div>
            <div>
                <p>Item B</p>
            </div>
            <div>
                <p>Item C</p>
            </div>
            <div>
                <p>Item D</p>
            </div>
        </div>
        <p>Different values of <code>flex-grow</code> for items in the same row cause different amounts of growth:</p>
        <div class="code">
            <code>.flex {
    display: flex;
}
.flex div {
    flex-grow: 1;
}
.flex div:nth-of-type(3) {
    flex-grow: 3;
}</code>
        </div>
        <div class="flex grow grow2">
            <div>
                <p>Item A</p>
            </div>
            <div>
                <p>Item B</p>
            </div>
            <div>
                <p>Item C</p>
            </div>
            <div>
                <p>Item D</p>
            </div>
        </div>
        <h2>Wrapping flex items in rows or columns</h2>
        <p>You can wrap flex items in multiple rows by specifying <code>flex-wrap: wrap</code> or <code>flex-flow: row wrap</code>, which is a shorthand for <code>flex-direction: row; flex-wrap: wrap</code>:</p>
        <div class="code">
            <code>.flex {
    display: flex;
    flex-flow: row wrap;
}</code>
        </div>
        <div class="flex" style="flex-flow: row wrap; width: 7.5cm;">
            <div>
                <p>Item A</p>
            </div>
            <div>
                <p>Item B</p>
            </div>
            <div>
                <p>Item C</p>
            </div>
            <div>
                <p>Item D</p>
            </div>
            <div>
                <p>Item E</p>
            </div>
            <div>
                <p>Item F</p>
            </div>
            <div>
                <p>Item G</p>
            </div>
            <div>
                <p>Item H</p>
            </div>
        </div>
        <p>The flow of the flex items can also be reversed:</p>
        <div class="code"><code>.flex {
    display: flex;
    flex-flow: row-reverse wrap;
}</code>
        </div>
        <div class="flex" style="flex-flow: row-reverse wrap; width: 7.5cm;">
            <div>
                <p>Item A</p>
            </div>
            <div>
                <p>Item B</p>
            </div>
            <div>
                <p>Item C</p>
            </div>
            <div>
                <p>Item D</p>
            </div>
            <div>
                <p>Item E</p>
            </div>
            <div>
                <p>Item F</p>
            </div>
            <div>
                <p>Item G</p>
            </div>
            <div>
                <p>Item H</p>
            </div>
        </div>
        <p>Flex items can also be wrapped into columns:</p>
        <div class="code">
            <code>.flex {
    display: flex;
    flex-flow: column wrap;
    align-content: flex-start;
}</code>
        </div>
        <div class="flex column" style="flex-flow: column wrap; align-content: flex-start; width: 7.5cm; height: 7.5cm;">
            <div>
                <p>Item A</p>
            </div>
            <div>
                <p>Item B</p>
            </div>
            <div>
                <p>Item C</p>
            </div>
            <div>
                <p>Item D</p>
            </div>
            <div>
                <p>Item E</p>
            </div>
            <div>
                <p>Item F</p>
            </div>
            <div>
                <p>Item G</p>
            </div>
            <div>
                <p>Item H</p>
            </div>
        </div>
        <p>When no height is set on the flex container the columns wrap at the bottom edge of the page:</p>
        <div class="code">
            <code>.flex {
    display: flex;
    flex-flow: column wrap;
    align-content: flex-start;
}</code>
        </div>
        <div class="flex column" style="flex-flow: column wrap; align-content: flex-start; width: 7.5cm;">
            <div>
                <p>Item A</p>
            </div>
            <div>
                <p>Item B</p>
            </div>
            <div>
                <p>Item C</p>
            </div>
            <div>
                <p>Item D</p>
            </div>
            <div>
                <p>Item E</p>
            </div>
            <div>
                <p>Item F</p>
            </div>
            <div>
                <p>Item G</p>
            </div>
            <div>
                <p>Item H</p>
            </div>
        </div>
        
        <h2>Flex items and pagination</h2>
        <p>When PDFreactor paginates documents with flex layouts, the flex items are paginated according to the wrap layout mode specified for the flex container.</p>
        <p>If the container specifies <code>flex-flow: row wrap</code> and a page break occurs between two rows, the rows are continued on the next page:</p>
        <div class="code">
            <code>.flex {
    display: flex;
    flex-flow: row wrap;
}</code>
        </div>
        <div class="rowWrap">
            <div class="flex" style="flex-wrap: wrap; flex-flow: row wrap">
                <div>
                    <p>Item A</p>
                </div>
                <div>
                    <p>Item B</p>
                </div>
                <div>
                    <p>Item C</p>
                </div>
                <div>
                    <p>Item D</p>
                </div>
                <div>
                    <p>Item E</p>
                </div>
                <div>
                    <p>Item F</p>
                </div>
                <div>
                    <p>Item G</p>
                </div>
                <div>
                    <p>Item H</p>
                </div>
            </div>
        </div>
        <div class="fakePage rowWrapRegion1"></div>
        <div class="fakePage rowWrapRegion2"></div>
        
        <p>If the container specifies <code>flex-flow: column wrap</code> and a page break occurs between two columns, the columns are continued on the next page:</p>
        <div class="code">
            <code>.flex {
    display: flex;
    flex-flow: column wrap;
}</code>
        </div>
        <div class="columnWrap">
            <div class="flex" style="flex-wrap: wrap; flex-flow: column wrap">
                <div>
                    <p>Item A</p>
                </div>
                <div>
                    <p>Item B</p>
                </div>
                <div>
                    <p>Item C</p>
                </div>
                <div>
                    <p>Item D</p>
                </div>
                <div>
                    <p>Item E</p>
                </div>
                <div>
                    <p>Item F</p>
                </div>
                <div>
                    <p>Item G</p>
                </div>
                <div>
                    <p>Item H</p>
                </div>
                <div>
                    <p>Item I</p>
                </div>
                <div>
                    <p>Item J</p>
                </div>
                <div>
                    <p>Item K</p>
                </div>
            </div>
        </div>
        <div class="fakePage columnWrapRegion1"></div>
        <div class="fakePage columnWrapRegion2"></div>
    </body>
</html>