primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-05 21:22:57 +03:00
Code Issues Projects Releases Wiki Activity

Update flexbox.md

Browse Source
This commit is contained in:
Jishnu P Sreekumar 2020-05-26 11:31:18 +05:30 committed by GitHub
parent be0b86afbc
commit 13f7b1b7ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/content/utilities/flexbox.md
View File

@ -91,10 +91,10 @@ Use these classes to define the orientation of the main axis (`row` or `column`)
#### Example using `.flex-column-reverse`
This example uses the responsive variant `.flex-sm-column-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
This example uses the responsive variant `.flex-md-column-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
```html live
<div class="border d-flex flex-column flex-sm-column-reverse">
<div class="border d-flex flex-column flex-md-column-reverse">
<div class="p-5 border bg-gray-light">Item 1</div>
<div class="p-5 border bg-gray-light">Item 2</div>
<div class="p-5 border bg-gray-light">Item 3</div>
@ -103,10 +103,10 @@ This example uses the responsive variant `.flex-sm-column-reverse` to override `
#### Example using `.flex-row`
This example uses the responsive variant `.flex-sm-row` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**.
This example uses the responsive variant `.flex-md-row` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**.
```html live
<div class="border d-flex flex-column flex-sm-row">
<div class="border d-flex flex-column flex-md-row">
<div class="p-5 border bg-gray-light">Item 1</div>
<div class="p-5 border bg-gray-light">Item 2</div>
<div class="p-5 border bg-gray-light">Item 3</div>
@ -115,10 +115,10 @@ This example uses the responsive variant `.flex-sm-row` to override `.flex-colum
#### Example using `.flex-row-reverse`
This example uses the responsive variant `.flex-sm-row-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
This example uses the responsive variant `.flex-md-row-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order.
```html live
<div class="border d-flex flex-column flex-sm-row-reverse">
<div class="border d-flex flex-column flex-md-row-reverse">
<div class="p-5 border bg-gray-light">Item 1</div>
<div class="p-5 border bg-gray-light">Item 2</div>
<div class="p-5 border bg-gray-light">Item 3</div>
@ -541,7 +541,7 @@ Add `.flex-grow-0` to prevent an item from growing. This can be useful when used
```html live
<div class="border d-flex">
<div class="p-5 border bg-gray-light">flex item</div>
<div class="p-5 border bg-gray-light flex-auto flex-sm-grow-0">.flex-auto .flex-sm-grow-0</div>
<div class="p-5 border bg-gray-light flex-auto flex-md-grow-0">.flex-auto .flex-md-grow-0</div>
<div class="p-5 border bg-gray-light">flex item</div>
</div>
```
@ -681,7 +681,7 @@ Resize window to see the effect.
```html live
<div class="border d-flex">
<div class="p-5 border bg-gray-light flex-order-1 flex-sm-order-none">1. .flex-order-1 .flex-sm-order-none</div>
<div class="p-5 border bg-gray-light flex-order-1 flex-md-order-none">1. .flex-order-1 .flex-md-order-none</div>
<div class="p-5 border bg-gray-light">2.</div>
<div class="p-5 border bg-gray-light">3.</div>
</div>
@ -718,8 +718,8 @@ Each responsive style is applied to the specified breakpoint and up.
Mixing flex properties:
```html live
<div style="min-height: 150px;" class="border d-flex flex-items-start flex-sm-items-center flex-justify-start flex-lg-justify-between">
<div class="p-5 border bg-gray-light flex-sm-self-stretch">.flex-self-stretch</div>
<div style="min-height: 150px;" class="border d-flex flex-items-start flex-md-items-center flex-justify-start flex-lg-justify-between">
<div class="p-5 border bg-gray-light flex-md-self-stretch">.flex-self-stretch</div>
<div class="p-5 border bg-gray-light">&nbsp;</div>
<div class="p-5 border bg-gray-light">&nbsp;</div>
</div>
@ -745,14 +745,14 @@ You can use flex utilities to make a simple media object, like this:
Here is an example of a media object that is **vertically centered on large screens**, but converts to a stacked column layout on small screens.
```html live
<div class="border p-3 d-flex flex-column flex-sm-row flex-sm-items-center">
<div class="pr-0 pr-sm-3 mb-3 mb-sm-0 d-flex flex-justify-center flex-sm-justify-start">
<div class="border p-3 d-flex flex-column flex-md-row flex-md-items-center">
<div class="pr-0 pr-md-3 mb-3 mb-md-0 d-flex flex-justify-center flex-md-justify-start">
<img style="max-width:100px; max-height:100px;" src="https://github.com/github.png" />
</div>
<div class="d-flex text-center text-sm-left">
<div class="d-flex text-center text-md-left">
<p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
</div>
<div class="ml-sm-3 d-flex flex-justify-center">
<div class="ml-md-3 d-flex flex-justify-center">
<!-- <%= octicon "mark-github", :height => '32' %> -->
<svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
</div>