metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Flex - Metro 4 :: Popular HTML, CSS and JS library</title> <style> .flex-align-content-demo { max-width: 700px; } .flex-align-content-demo div { height: 40px; } </style> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Flex</a></li> <li class="toc-entry"><a href="#_flex_enable">Enable flex</a></li> <li class="toc-entry"><a href="#_flex_dir">Direction</a></li> <li class="toc-entry"><a href="#_flex_justify_content">Justify content</a></li> <li class="toc-entry"><a href="#_flex_align_items">Align items</a></li> <li class="toc-entry"><a href="#_flex_align_self">Align self</a></li> <li class="toc-entry"><a href="#_flex_align_content">Align content</a></li> <li class="toc-entry"><a href="#_flex_auto_margins">Auto margins</a></li> <li class="toc-entry"><a href="#_flex_wrap">Wrap</a></li> <li class="toc-entry"><a href="#_flex_order">Order</a></li> <li class="toc-entry"><a href="#_flex_responsive">Responsive</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Flex</h1> <p class="text-leader"> Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. </p>  <h3 id="_flex_enable">Flex enable</h3> <p> To create flexbox container and transform direct children elements into flex items add <code>.d-flex</code> or <code>.d-inline-flex</code> class to element. Flex containers and items are able to be modified further with additional flex properties. </p> <div class="example"> <div class="d-flex p-2 bg-cyan fg-white">I am a flexbox container!</div> </div> <pre><code class="html"> <div class="d-flex p-2">I am a flexbox container!</div> </code></pre> <div class="example"> <div class="d-inline-flex p-2 bg-cyan fg-white">I am a inline flexbox container!</div> </div> <pre><code class="html"> <div class="d-inline-flex p-2">I am a inline flexbox container!</div> </code></pre> <p> Responsive variations also exist for <code>.d-flex</code> and <code>.d-inline-flex</code> as <code>.d-flex-*</code> and <code>.d-inline-flex-*</code>. You can change asterisk to <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code> or <code>xxl</code>. </p> <h3 id="_flex_dir">Direction</h3> <p> Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is <code>row</code>. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts). </p> <p> Use <code>.flex-row</code> to set a horizontal direction (the browser default), or <code>.flex-row-r</code> to start the horizontal direction from the opposite side. </p> <div class="example"> <div class="d-flex flex-row"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> <div class="d-flex flex-row-r"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> </div> <pre><code class="html"> <div class="d-flex flex-row"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> <div class="d-flex flex-row-r"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> </code></pre> <p> Use <code>.flex-column</code> to set a vertical direction, or <code>.flex-column-r</code> to start the vertical direction from the opposite side. </p> <div class="example"> <div class="d-flex flex-column"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> <div class="d-flex flex-column-r mt-2"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> </div> <pre><code class="html"> <div class="d-flex flex-column"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> <div class="d-flex flex-column-r"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> </code></pre> <h3 id="_flex_justify_content">Justify content</h3> <p> Use <code>justify-content</code> utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if <code>flex-direction: column</code>). Choose from <code>start</code> (browser default), <code>end</code>, <code>center</code>, <code>between</code>, or <code>around</code>. </p> <div class="example"> <div class="d-flex flex-justify-start bg-lightGray"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> <div class="d-flex flex-justify-end bg-lightGray mt-2"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> <div class="d-flex flex-justify-center bg-lightGray mt-2"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> <div class="d-flex flex-justify-between bg-lightGray mt-2"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> <div class="d-flex flex-justify-around bg-lightGray mt-2"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> </div> <pre><code class="html"> <div class="d-flex flex-justify-start">...</div> <div class="d-flex flex-justify-end">...</div> <div class="d-flex flex-justify-center">...</div> <div class="d-flex flex-justify-between">...</div> <div class="d-flex flex-justify-around">...</div> </code></pre>  <h3 id="_flex_align_items">Align items</h3> <p> Use <code>align-items</code> utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if <code>flex-direction: column</code>). Choose from <code>start</code>, <code>end</code>, <code>center</code>, <code>baseline</code>, or <code>stretch</code> (browser default). </p> <div class="example"> <div class="d-flex flex-align-start bg-lightGray" style="height: 100px"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> <div class="d-flex flex-align-end bg-lightGray mt-2" style="height: 100px"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> <div class="d-flex flex-align-center bg-lightGray mt-2" style="height: 100px"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> <div class="d-flex flex-align-baseline bg-lightGray mt-2" style="height: 100px"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> <div class="d-flex flex-align-stretch bg-lightGray mt-2" style="height: 100px"> <div class="p-2 bg-lightCyan">Flex item 1</div> <div class="p-2 bg-cyan">Flex item 2</div> <div class="p-2 bg-darkCyan">Flex item 3</div> </div> </div> <pre><code class="html"> <div class="d-flex flex-align-start">...</div> <div class="d-flex flex-align-end">...</div> <div class="d-flex flex-align-center">...</div> <div class="d-flex flex-align-baseline">...</div> <div class="d-flex flex-align-stretch">...</div> </code></pre> <h3 id="_flex_align_self">Align self</h3> <p> Use <code>align-self</code> utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if <code>flex-direction: column</code>). Choose from the same options as align-items: <code>start</code>, <code>end</code>, <code>center</code>, <code>baseline</code>, or <code>stretch</code> (browser default). </p> <div class="example"> <div class="d-flex bg-lightGray" style="height: 100px"> <div class="p-2 bg-lightCyan flex-self-stretch">Flex item 1</div> <div class="p-2 bg-cyan flex-self-start">Flex item 2</div> <div class="p-2 bg-darkCyan flex-self-stretch">Flex item 3</div> </div> <div class="d-flex bg-lightGray mt-2" style="height: 100px"> <div class="p-2 bg-lightCyan flex-self-stretch">Flex item 1</div> <div class="p-2 bg-cyan flex-self-end">Flex item 2</div> <div class="p-2 bg-darkCyan flex-self-stretch">Flex item 3</div> </div> <div class="d-flex bg-lightGray mt-2" style="height: 100px"> <div class="p-2 bg-lightCyan flex-self-stretch">Flex item 1</div> <div class="p-2 bg-cyan flex-self-center">Flex item 2</div> <div class="p-2 bg-darkCyan flex-self-stretch">Flex item 3</div> </div> <div class="d-flex bg-lightGray mt-2" style="height: 100px"> <div class="p-2 bg-lightCyan flex-self-stretch">Flex item 1</div> <div class="p-2 bg-cyan flex-self-baseline">Flex item 2</div> <div class="p-2 bg-darkCyan flex-self-stretch">Flex item 3</div> </div> <div class="d-flex bg-lightGray mt-2" style="height: 100px"> <div class="p-2 bg-lightCyan flex-self-stretch">Flex item 1</div> <div class="p-2 bg-cyan flex-self-stretch">Flex item 2</div> <div class="p-2 bg-darkCyan flex-self-stretch">Flex item 3</div> </div> </div> <pre><code class="html"> <div class="d-flex"> <div class="flex-self-start">...</div> <div class="flex-self-end">...</div> <div class="flex-self-center">...</div> <div class="flex-self-baseline">...</div> <div class="flex-self-stretch">...</div> </div> </code></pre> <h3 id="_flex_align_content">Align content</h3> <p> Use <code>align-content</code> utilities on flexbox containers to align flex items together on the cross axis. Choose from <code>start</code> (browser default), <code>end</code>, <code>center</code>, <code>between</code>, <code>around</code>, or <code>stretch</code>. To demonstrate these utilities, we’ve enforced <code>flex-wrap: wrap</code> and increased the number of flex items. </p> <p class="remark warning"> This property has no effect on single rows of flex items. </p> <div class="example"> <div class="d-flex flex-content-start flex-wrap bg-gray p-1 flex-align-content-demo" style="height: 200px"> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> </div> </div> <pre><code class="html"> <div class="d-flex flex-content-start flex-wrap">...</div> </code></pre> <div class="example"> <div class="d-flex flex-content-end flex-wrap bg-gray p-1 border bd-darkGray flex-align-content-demo" style="height: 200px"> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> </div> </div> <pre><code class="html"> <div class="d-flex flex-content-end flex-wrap">...</div> </code></pre> <div class="example"> <div class="d-flex flex-content-center flex-wrap bg-gray p-1 border bd-darkGray flex-align-content-demo" style="height: 200px"> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> </div> </div> <pre><code class="html"> <div class="d-flex flex-content-center flex-wrap">...</div> </code></pre> <div class="example"> <div class="d-flex flex-content-between flex-wrap bg-gray p-1 border bd-darkGray flex-align-content-demo" style="height: 200px"> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> </div> </div> <pre><code class="html"> <div class="d-flex flex-content-between flex-wrap">...</div> </code></pre> <div class="example"> <div class="d-flex flex-content-around flex-wrap bg-gray p-1 border bd-darkGray flex-align-content-demo" style="height: 200px"> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> </div> </div> <pre><code class="html"> <div class="d-flex flex-content-around flex-wrap">...</div> </code></pre> <div class="example"> <div class="d-flex flex-content-stretch flex-wrap bg-gray p-1 border bd-darkGray flex-align-content-demo" style="height: 200px"> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> </div> </div> <pre><code class="html"> <div class="d-flex flex-content-stretch flex-wrap">...</div> </code></pre> <h3 id="_flex_auto_margins">Auto margins</h3> <p> Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. </p> <h4>.flex-justify-content</h4> <p> Easily move all flex items to one side, but keep another on the opposite end by mixing <code>justify-content</code> with <code>margin-right: auto</code> or <code>margin-left: auto</code>. </p> <div class="example"> <div class="d-flex flex-justify-end bg-gray"> <div class="mr-auto p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> </div> <div class="d-flex flex-justify-start bg-gray mt-2"> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="ml-auto p-1 border bd-darkGray bg-light">Flex item</div> </div> </div> <pre><code class="html"> <div class="d-flex flex-justify-end"> <div class="mr-auto">Flex item</div> <div>Flex item</div> <div>Flex item</div> </div> <div class="d-flex flex-justify-start"> <div>Flex item</div> <div>Flex item</div> <div class="ml-auto">Flex item</div> </div> </code></pre> <h4>.flex-align-items</h4> <p> Similarly, move one flex item to the top or bottom of a container by mixing <code>align-items</code>, <code>flex-direction: column</code>, and <code>margin-top: auto</code> or <code>margin-bottom: auto</code>. </p> <div class="example"> <div class="d-flex flex-align-start flex-column bg-gray" style="height: 200px;"> <div class="mb-auto p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> </div> <div class="d-flex flex-align-end flex-column bg-gray mt-2" style="height: 200px;"> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="p-1 border bd-darkGray bg-light">Flex item</div> <div class="mt-auto p-1 border bd-darkGray bg-light">Flex item</div> </div> </div>  <h3 id="_flex_wrap">Wrap</h3> <p> Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with <code>.flex-nowrap</code>, wrapping with <code>.flex-wrap</code>, or reverse wrapping with <code>.flex-wrap-r</code>. </p> <pre><code class="html"> <div class="d-flex flex-nowrap">...</div> <div class="d-flex flex-wrap">...</div> <div class="d-flex flex-wrap-r">...</div> </code></pre> <h3 id="_flex_order">Order</h3> <p> Change the visual order of specific flex items with a handful of order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed. </p> <div class="example"> <div class="d-flex flex-nowrap bg-gray"> <div class="order-3 p-1 border bd-darkGray bg-light">First flex item</div> <div class="order-2 p-1 border bd-darkGray bg-light">Second flex item</div> <div class="order-1 p-1 border bd-darkGray bg-light">Third flex item</div> </div> </div> <pre><code class="html"> <div class="d-flex flex-nowrap"> <div class="order-3">First flex item</div> <div class="order-2">Second flex item</div> <div class="order-1">Third flex item</div> </div> </code></pre> <h3 id="_flex_responsive">Responsive</h3> <p> All flex utilities classes has media variants with breakpoints suffixes: <code>-sm</code>, <code>-md</code>, <code>-lg</code>, <code>-xl</code>, <code>-xxl</code>. </p> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>