From: Mark Otto <markdotto@gmail.com>
Date: Fri, 23 Dec 2016 20:54:01 +0000 (-0800)
Subject: document justify-content and align-items utils
X-Git-Tag: v4.0.0-alpha.6~210
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=463e8bee76aa49cc443bf87120d2bee49b329146;p=thirdparty%2Fbootstrap.git

document justify-content and align-items utils
---

diff --git a/docs/utilities/flexbox.md b/docs/utilities/flexbox.md
index 2acd1fed49..bc2a9cdb0e 100644
--- a/docs/utilities/flexbox.md
+++ b/docs/utilities/flexbox.md
@@ -108,3 +108,68 @@ Responsive variations also exist for `.flex-nowrap` and `.flex-wrap`.
 {% for bp in site.data.breakpoints %}
 - `.flex{{ bp.abbr }}-nowrap`
 - `.flex{{ bp.abbr }}-wrap`{% endfor %}
+
+## Justify content
+
+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="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>
+<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>
+{% endexample %}
+
+
+## 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`.
+
+{% example html %}
+<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>
+<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>
+{% endexample %}