mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-20 20:00:36 +03:00
Code Activity

change presentation of those utils docs

Browse Source
This commit is contained in:
Mark Otto
2016-12-23 13:15:55 -08:00
committed by Mark Otto
parent 463e8bee76
commit 7d47a01158
1 changed files with 68 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/utilities/flexbox.md
+68 -35
View File
@@ -113,49 +113,82 @@ Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`.
Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, or `around`. Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, or `around`.
{% example html %} <div class="bd-example">
<div class="d-flex justify-content-start bd-highlight mb-3"> <div class="d-flex justify-content-start bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex justify-content-end bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex justify-content-center bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex justify-content-between bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex justify-content-around bd-highlight">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div> </div>
<div class="d-flex justify-content-end bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div> {% highlight html %}
<div class="p-2 bd-highlight">Flex item</div> <div class="d-flex justify-content-start">...</div>
<div class="p-2 bd-highlight">Flex item</div> <div class="d-flex justify-content-end">...</div>
</div> <div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-center bd-highlight mb-3"> <div class="d-flex justify-content-between">...</div>
<div class="p-2 bd-highlight">Flex item</div> <div class="d-flex justify-content-around">...</div>
<div class="p-2 bd-highlight">Flex item</div> {% endhighlight %}
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex justify-content-between bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex justify-content-around bd-highlight">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
{% endexample %}
## Align items ## Align items
Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `baseline`, or `stretch`. Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `baseline`, or `stretch`.
{% example html %} <div class="bd-example">
<div class="d-flex align-items-start bd-highlight mb-3" style="height: 100px"> <div class="d-flex align-items-start bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-end bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-center bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-baseline bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
<div class="d-flex align-items-stretch bd-highlight" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
<div class="p-2 bd-highlight">Flex item</div>
</div>
</div> </div>
<div class="d-flex align-items-end bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div> {% highlight html %}
<div class="p-2 bd-highlight">Flex item</div> <div class="d-flex align-items-start">...</div>
<div class="p-2 bd-highlight">Flex item</div> <div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
{% endhighlight %}
</div> </div>
<div class="d-flex align-items-center bd-highlight mb-3" style="height: 100px"> <div class="d-flex align-items-center bd-highlight mb-3" style="height: 100px">
<div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div>