mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-31 00:59:51 +02:00
Add v4.5.1 docs (#31409)
This commit is contained in:
XhmikosR
GitHub
@@ -5,7 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<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. For more complex implementations, custom CSS may be necessary.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v4.0.1">
|
||||
<meta name="generator" content="Jekyll v4.1.1">
|
||||
|
||||
<meta name="docsearch:language" content="en">
|
||||
<meta name="docsearch:version" content="4.5">
|
||||
@@ -15,7 +15,7 @@
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/utilities/flex/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
|
||||
@@ -62,9 +62,10 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
<div class="skippy overflow-hidden">
|
||||
<div class="container-xl">
|
||||
<a class="sr-only sr-only-focusable d-inline-flex p-2 m-1" href="#content">Skip to main content</a><a class="sr-only sr-only-focusable d-none d-md-inline-flex p-2 m-1" href="#bd-docs-nav">Skip to docs navigation</a></div>
|
||||
</div>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
@@ -488,13 +489,16 @@
|
||||
|
||||
|
||||
<main class="col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">Flex</h1>
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/utilities/flex.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">Flex</h1>
|
||||
</div>
|
||||
<p class="bd-lead">Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.</p>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
<h2 id="enable-flex-behaviors">Enable flex behaviors</h2>
|
||||
|
||||
<p>Apply <code class="highlighter-rouge">display</code> utilities to create a flexbox container and transform <strong>direct children elements</strong> into flex items. Flex containers and items are able to be modified further with additional flex properties.</p>
|
||||
<p>Apply <code class="language-plaintext highlighter-rouge">display</code> utilities to create a flexbox container and transform <strong>direct children elements</strong> into flex items. Flex containers and items are able to be modified further with additional flex properties.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
|
||||
@@ -506,26 +510,26 @@
|
||||
</div>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-inline-flex p-2 bd-highlight"</span><span class="nt">></span>I'm an inline flexbox container!<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">.d-flex</code> and <code class="highlighter-rouge">.d-inline-flex</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">.d-flex</code> and <code class="language-plaintext highlighter-rouge">.d-inline-flex</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.d-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-inline-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-sm-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-sm-inline-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-md-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-md-inline-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-lg-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-lg-inline-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-xl-flex</code></li>
|
||||
<li><code class="highlighter-rouge">.d-xl-inline-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-inline-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-sm-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-sm-inline-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-md-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-md-inline-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-lg-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-lg-inline-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-xl-flex</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.d-xl-inline-flex</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="direction">Direction</h2>
|
||||
|
||||
<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 class="highlighter-rouge">row</code>. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).</p>
|
||||
<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 class="language-plaintext highlighter-rouge">row</code>. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).</p>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">.flex-row</code> to set a horizontal direction (the browser default), or <code class="highlighter-rouge">.flex-row-reverse</code> to start the horizontal direction from the opposite side.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">.flex-row</code> to set a horizontal direction (the browser default), or <code class="language-plaintext highlighter-rouge">.flex-row-reverse</code> to start the horizontal direction from the opposite side.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex flex-row bd-highlight mb-3">
|
||||
@@ -550,7 +554,7 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">></span>Flex item 3<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">.flex-column</code> to set a vertical direction, or <code class="highlighter-rouge">.flex-column-reverse</code> to start the vertical direction from the opposite side.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">.flex-column</code> to set a vertical direction, or <code class="language-plaintext highlighter-rouge">.flex-column-reverse</code> to start the vertical direction from the opposite side.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex flex-column bd-highlight mb-3">
|
||||
@@ -575,34 +579,34 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">></span>Flex item 3<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">flex-direction</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">flex-direction</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.flex-row</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-row-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-column</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-column-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-row</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-row-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-column</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-column-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-row</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-row-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-column</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-column-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-row</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-row-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-column</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-column-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-row</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-row-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-column</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-column-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-row</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-row-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-column</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-column-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-row</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-row-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-column</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-column-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-row</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-row-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-column</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-column-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-row</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-row-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-column</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-column-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-row</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-row-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-column</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-column-reverse</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="justify-content">Justify content</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">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 class="highlighter-rouge">flex-direction: column</code>). Choose from <code class="highlighter-rouge">start</code> (browser default), <code class="highlighter-rouge">end</code>, <code class="highlighter-rouge">center</code>, <code class="highlighter-rouge">between</code>, or <code class="highlighter-rouge">around</code>.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">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 class="language-plaintext highlighter-rouge">flex-direction: column</code>). Choose from <code class="language-plaintext highlighter-rouge">start</code> (browser default), <code class="language-plaintext highlighter-rouge">end</code>, <code class="language-plaintext highlighter-rouge">center</code>, <code class="language-plaintext highlighter-rouge">between</code>, or <code class="language-plaintext highlighter-rouge">around</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex justify-content-start bd-highlight mb-3">
|
||||
@@ -638,39 +642,39 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex justify-content-between"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex justify-content-around"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">justify-content</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">justify-content</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.justify-content-start</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-end</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-center</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-between</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-around</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-sm-start</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-sm-end</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-sm-center</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-sm-between</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-sm-around</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-md-start</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-md-end</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-md-center</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-md-between</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-md-around</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-lg-start</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-lg-end</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-lg-center</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-lg-between</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-lg-around</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-xl-start</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-xl-end</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-xl-center</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-xl-between</code></li>
|
||||
<li><code class="highlighter-rouge">.justify-content-xl-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-between</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-sm-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-sm-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-sm-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-sm-between</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-sm-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-md-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-md-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-md-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-md-between</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-md-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-lg-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-lg-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-lg-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-lg-between</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-lg-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-xl-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-xl-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-xl-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-xl-between</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.justify-content-xl-around</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="align-items">Align items</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">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 class="highlighter-rouge">flex-direction: column</code>). Choose from <code class="highlighter-rouge">start</code>, <code class="highlighter-rouge">end</code>, <code class="highlighter-rouge">center</code>, <code class="highlighter-rouge">baseline</code>, or <code class="highlighter-rouge">stretch</code> (browser default).</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">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 class="language-plaintext highlighter-rouge">flex-direction: column</code>). Choose from <code class="language-plaintext highlighter-rouge">start</code>, <code class="language-plaintext highlighter-rouge">end</code>, <code class="language-plaintext highlighter-rouge">center</code>, <code class="language-plaintext highlighter-rouge">baseline</code>, or <code class="language-plaintext highlighter-rouge">stretch</code> (browser default).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex align-items-start bd-highlight mb-3" style="height: 100px">
|
||||
@@ -706,39 +710,39 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex align-items-baseline"</span><span class="nt">></span>...<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex align-items-stretch"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">align-items</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">align-items</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.align-items-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-sm-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-sm-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-sm-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-sm-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-sm-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-md-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-md-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-md-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-md-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-md-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-lg-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-lg-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-lg-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-lg-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-lg-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-xl-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-xl-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-xl-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-xl-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-items-xl-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-sm-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-sm-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-sm-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-sm-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-sm-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-md-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-md-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-md-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-md-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-md-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-lg-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-lg-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-lg-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-lg-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-lg-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-xl-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-xl-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-xl-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-xl-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-items-xl-stretch</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="align-self">Align self</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">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 class="highlighter-rouge">flex-direction: column</code>). Choose from the same options as <code class="highlighter-rouge">align-items</code>: <code class="highlighter-rouge">start</code>, <code class="highlighter-rouge">end</code>, <code class="highlighter-rouge">center</code>, <code class="highlighter-rouge">baseline</code>, or <code class="highlighter-rouge">stretch</code> (browser default).</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">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 class="language-plaintext highlighter-rouge">flex-direction: column</code>). Choose from the same options as <code class="language-plaintext highlighter-rouge">align-items</code>: <code class="language-plaintext highlighter-rouge">start</code>, <code class="language-plaintext highlighter-rouge">end</code>, <code class="language-plaintext highlighter-rouge">center</code>, <code class="language-plaintext highlighter-rouge">baseline</code>, or <code class="language-plaintext highlighter-rouge">stretch</code> (browser default).</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex bd-highlight mb-3" style="height: 100px">
|
||||
@@ -774,39 +778,39 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"align-self-baseline"</span><span class="nt">></span>Aligned flex item<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"align-self-stretch"</span><span class="nt">></span>Aligned flex item<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">align-self</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">align-self</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.align-self-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-sm-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-sm-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-sm-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-sm-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-sm-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-md-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-md-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-md-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-md-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-md-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-lg-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-lg-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-lg-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-lg-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-lg-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-xl-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-xl-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-xl-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-xl-baseline</code></li>
|
||||
<li><code class="highlighter-rouge">.align-self-xl-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-sm-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-sm-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-sm-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-sm-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-sm-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-md-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-md-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-md-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-md-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-md-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-lg-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-lg-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-lg-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-lg-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-lg-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-xl-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-xl-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-xl-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-xl-baseline</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-self-xl-stretch</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="fill">Fill</h2>
|
||||
|
||||
<p>Use the <code class="highlighter-rouge">.flex-fill</code> class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.</p>
|
||||
<p>Use the <code class="language-plaintext highlighter-rouge">.flex-fill</code> class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex bd-highlight">
|
||||
@@ -821,19 +825,19 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-2 flex-fill bd-highlight"</span><span class="nt">></span>Flex item<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">flex-fill</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">flex-fill</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.flex-fill</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-fill</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-fill</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-fill</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-fill</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-fill</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-fill</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-fill</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-fill</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-fill</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="grow-and-shrink">Grow and shrink</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">.flex-grow-*</code> utilities to toggle a flex item’s ability to grow to fill available space. In the example below, the <code class="highlighter-rouge">.flex-grow-1</code> elements uses all available space it can, while allowing the remaining two flex items their necessary space.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">.flex-grow-*</code> utilities to toggle a flex item’s ability to grow to fill available space. In the example below, the <code class="language-plaintext highlighter-rouge">.flex-grow-1</code> elements uses all available space it can, while allowing the remaining two flex items their necessary space.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex bd-highlight">
|
||||
@@ -848,7 +852,7 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-2 bd-highlight"</span><span class="nt">></span>Third flex item<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">.flex-shrink-*</code> utilities to toggle a flex item’s ability to shrink if necessary. In the example below, the second flex item with <code class="highlighter-rouge">.flex-shrink-1</code> is forced to wrap its contents to a new line, “shrinking” to allow more space for the previous flex item with <code class="highlighter-rouge">.w-100</code>.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">.flex-shrink-*</code> utilities to toggle a flex item’s ability to shrink if necessary. In the example below, the second flex item with <code class="language-plaintext highlighter-rouge">.flex-shrink-1</code> is forced to wrap its contents to a new line, “shrinking” to allow more space for the previous flex item with <code class="language-plaintext highlighter-rouge">.w-100</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex bd-highlight">
|
||||
@@ -861,26 +865,26 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-2 flex-shrink-1 bd-highlight"</span><span class="nt">></span>Flex item<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">flex-grow</code> and <code class="highlighter-rouge">flex-shrink</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">flex-grow</code> and <code class="language-plaintext highlighter-rouge">flex-shrink</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.flex-{grow|shrink}-0</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-{grow|shrink}-1</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-{grow|shrink}-0</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-{grow|shrink}-1</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-{grow|shrink}-0</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-{grow|shrink}-1</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-{grow|shrink}-0</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-{grow|shrink}-1</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-{grow|shrink}-0</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-{grow|shrink}-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-{grow|shrink}-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-{grow|shrink}-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-{grow|shrink}-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-{grow|shrink}-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-{grow|shrink}-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-{grow|shrink}-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-{grow|shrink}-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-{grow|shrink}-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-{grow|shrink}-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-{grow|shrink}-1</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="auto-margins">Auto margins</h2>
|
||||
|
||||
<p>Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (<code class="highlighter-rouge">.mr-auto</code>), and pushing two items to the left (<code class="highlighter-rouge">.ml-auto</code>).</p>
|
||||
<p>Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (<code class="language-plaintext highlighter-rouge">.mr-auto</code>), and pushing two items to the left (<code class="language-plaintext highlighter-rouge">.ml-auto</code>).</p>
|
||||
|
||||
<p><strong>Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default <code class="highlighter-rouge">justify-content</code> value.</strong> <a href="https://stackoverflow.com/a/37535548">See this StackOverflow answer</a> for more details.</p>
|
||||
<p><strong>Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default <code class="language-plaintext highlighter-rouge">justify-content</code> value.</strong> <a href="https://stackoverflow.com/a/37535548">See this StackOverflow answer</a> for more details.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex bd-highlight mb-3">
|
||||
@@ -921,7 +925,7 @@
|
||||
|
||||
<h3 id="with-align-items">With align-items</h3>
|
||||
|
||||
<p>Vertically move one flex item to the top or bottom of a container by mixing <code class="highlighter-rouge">align-items</code>, <code class="highlighter-rouge">flex-direction: column</code>, and <code class="highlighter-rouge">margin-top: auto</code> or <code class="highlighter-rouge">margin-bottom: auto</code>.</p>
|
||||
<p>Vertically move one flex item to the top or bottom of a container by mixing <code class="language-plaintext highlighter-rouge">align-items</code>, <code class="language-plaintext highlighter-rouge">flex-direction: column</code>, and <code class="language-plaintext highlighter-rouge">margin-top: auto</code> or <code class="language-plaintext highlighter-rouge">margin-bottom: auto</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
|
||||
@@ -950,7 +954,7 @@
|
||||
|
||||
<h2 id="wrap">Wrap</h2>
|
||||
|
||||
<p>Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with <code class="highlighter-rouge">.flex-nowrap</code>, wrapping with <code class="highlighter-rouge">.flex-wrap</code>, or reverse wrapping with <code class="highlighter-rouge">.flex-wrap-reverse</code>.</p>
|
||||
<p>Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with <code class="language-plaintext highlighter-rouge">.flex-nowrap</code>, wrapping with <code class="language-plaintext highlighter-rouge">.flex-wrap</code>, or reverse wrapping with <code class="language-plaintext highlighter-rouge">.flex-wrap-reverse</code>.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex flex-nowrap bd-highlight" style="width: 8rem;">
|
||||
@@ -1014,29 +1018,29 @@
|
||||
...
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">flex-wrap</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">flex-wrap</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.flex-nowrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-wrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-wrap-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-nowrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-wrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-sm-wrap-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-nowrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-wrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-md-wrap-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-nowrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-wrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-lg-wrap-reverse</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-nowrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-wrap</code></li>
|
||||
<li><code class="highlighter-rouge">.flex-xl-wrap-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-nowrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-wrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-wrap-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-nowrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-wrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-sm-wrap-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-nowrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-wrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-md-wrap-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-nowrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-wrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-lg-wrap-reverse</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-nowrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-wrap</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.flex-xl-wrap-reverse</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="order">Order</h2>
|
||||
|
||||
<p>Change the <em>visual</em> order of specific flex items with a handful of <code class="highlighter-rouge">order</code> utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As <code class="highlighter-rouge">order</code> takes any integer value (e.g., <code class="highlighter-rouge">5</code>), add custom CSS for any additional values needed.</p>
|
||||
<p>Change the <em>visual</em> order of specific flex items with a handful of <code class="language-plaintext highlighter-rouge">order</code> utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As <code class="language-plaintext highlighter-rouge">order</code> takes any integer value (e.g., <code class="language-plaintext highlighter-rouge">5</code>), add custom CSS for any additional values needed.</p>
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="d-flex flex-nowrap bd-highlight">
|
||||
@@ -1051,79 +1055,79 @@
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"order-1 p-2 bd-highlight"</span><span class="nt">></span>Third flex item<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">order</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">order</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.order-0</code></li>
|
||||
<li><code class="highlighter-rouge">.order-1</code></li>
|
||||
<li><code class="highlighter-rouge">.order-2</code></li>
|
||||
<li><code class="highlighter-rouge">.order-3</code></li>
|
||||
<li><code class="highlighter-rouge">.order-4</code></li>
|
||||
<li><code class="highlighter-rouge">.order-5</code></li>
|
||||
<li><code class="highlighter-rouge">.order-6</code></li>
|
||||
<li><code class="highlighter-rouge">.order-7</code></li>
|
||||
<li><code class="highlighter-rouge">.order-8</code></li>
|
||||
<li><code class="highlighter-rouge">.order-9</code></li>
|
||||
<li><code class="highlighter-rouge">.order-10</code></li>
|
||||
<li><code class="highlighter-rouge">.order-11</code></li>
|
||||
<li><code class="highlighter-rouge">.order-12</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-0</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-1</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-2</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-3</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-4</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-5</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-6</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-7</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-8</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-9</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-10</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-11</code></li>
|
||||
<li><code class="highlighter-rouge">.order-sm-12</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-0</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-1</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-2</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-3</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-4</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-5</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-6</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-7</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-8</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-9</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-10</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-11</code></li>
|
||||
<li><code class="highlighter-rouge">.order-md-12</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-0</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-1</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-2</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-3</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-4</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-5</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-6</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-7</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-8</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-9</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-10</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-11</code></li>
|
||||
<li><code class="highlighter-rouge">.order-lg-12</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-0</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-1</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-2</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-3</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-4</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-5</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-6</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-7</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-8</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-9</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-10</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-11</code></li>
|
||||
<li><code class="highlighter-rouge">.order-xl-12</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-2</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-3</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-4</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-5</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-6</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-7</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-8</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-9</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-10</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-11</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-12</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-2</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-3</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-4</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-5</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-6</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-7</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-8</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-9</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-10</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-11</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-sm-12</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-2</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-3</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-4</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-5</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-6</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-7</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-8</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-9</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-10</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-11</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-md-12</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-2</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-3</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-4</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-5</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-6</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-7</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-8</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-9</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-10</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-11</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-lg-12</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-0</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-1</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-2</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-3</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-4</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-5</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-6</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-7</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-8</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-9</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-10</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-11</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.order-xl-12</code></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="align-content">Align content</h2>
|
||||
|
||||
<p>Use <code class="highlighter-rouge">align-content</code> utilities on flexbox containers to align flex items <em>together</em> on the cross axis. Choose from <code class="highlighter-rouge">start</code> (browser default), <code class="highlighter-rouge">end</code>, <code class="highlighter-rouge">center</code>, <code class="highlighter-rouge">between</code>, <code class="highlighter-rouge">around</code>, or <code class="highlighter-rouge">stretch</code>. To demonstrate these utilities, we’ve enforced <code class="highlighter-rouge">flex-wrap: wrap</code> and increased the number of flex items.</p>
|
||||
<p>Use <code class="language-plaintext highlighter-rouge">align-content</code> utilities on flexbox containers to align flex items <em>together</em> on the cross axis. Choose from <code class="language-plaintext highlighter-rouge">start</code> (browser default), <code class="language-plaintext highlighter-rouge">end</code>, <code class="language-plaintext highlighter-rouge">center</code>, <code class="language-plaintext highlighter-rouge">between</code>, <code class="language-plaintext highlighter-rouge">around</code>, or <code class="language-plaintext highlighter-rouge">stretch</code>. To demonstrate these utilities, we’ve enforced <code class="language-plaintext highlighter-rouge">flex-wrap: wrap</code> and increased the number of flex items.</p>
|
||||
|
||||
<p><strong>Heads up!</strong> This property has no effect on single rows of flex items.</p>
|
||||
|
||||
@@ -1261,34 +1265,34 @@
|
||||
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex align-content-stretch flex-wrap"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></figure>
|
||||
|
||||
<p>Responsive variations also exist for <code class="highlighter-rouge">align-content</code>.</p>
|
||||
<p>Responsive variations also exist for <code class="language-plaintext highlighter-rouge">align-content</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li><code class="highlighter-rouge">.align-content-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-around</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-sm-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-sm-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-sm-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-sm-around</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-sm-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-md-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-md-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-md-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-md-around</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-md-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-lg-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-lg-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-lg-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-lg-around</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-lg-stretch</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-xl-start</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-xl-end</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-xl-center</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-xl-around</code></li>
|
||||
<li><code class="highlighter-rouge">.align-content-xl-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-sm-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-sm-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-sm-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-sm-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-sm-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-md-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-md-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-md-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-md-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-md-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-lg-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-lg-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-lg-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-lg-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-lg-stretch</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-xl-start</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-xl-end</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-xl-center</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-xl-around</code></li>
|
||||
<li><code class="language-plaintext highlighter-rouge">.align-content-xl-stretch</code></li>
|
||||
</ul>
|
||||
|
||||
</main>
|
||||
@@ -1296,6 +1300,6 @@
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-FxkQtQ8fW6C3xA7BoW8ocAb2N7U9dCA7ZJXMJlz/37PL6Q6PUGQ5ZeJcaXdYKcdJ" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script src="/docs/4.5/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user