<!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>