<!--
A demonstration of how flexible box layout can be used to arrange multiple items inside containers, let them flow in rows or columns and how they interact with page breaks.
The following features are demonstrated:
- Flexbox
-->
<!DOCTYPE htmL>
<html lang="en-US">
<head>
<title>Flexbox Sample</title>
<meta charset="utf-8"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
</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>