diff options
| author | Mark Otto <markd.otto@gmail.com> | 2017-10-19 09:16:18 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2017-10-19 09:16:18 +0300 |
| commit | 39b144c88fb6a664940981690bd60b2bd4ef9d37 (patch) | |
| tree | f0a1391e2180a60ad23b7328673f4afea227a3ff /docs | |
| parent | bee20c04e884fd40e40bd1802d10ce70e0ebd390 (diff) | |
Update docs for IE10+IE11 support of auto margins (#24427)
IE10 and IE11 do not properly support the use of margin-auto on flex parents with a justify-content value other than flex-start. This PR removes the examples showcasing those two classes at play together in favor of simpler ones with _just_ the margin-auto utilities.
More details can be found at https://stackoverflow.com/a/37535548, which has been linked to from the docs as well.
Closes #24319 and closes #24413.
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/4.0/utilities/flex.md | 18 |
1 files changed, 11 insertions, 7 deletions
diff --git a/docs/4.0/utilities/flex.md b/docs/4.0/utilities/flex.md index 1d28fab6dd..c9aa5d2997 100644 --- a/docs/4.0/utilities/flex.md +++ b/docs/4.0/utilities/flex.md @@ -215,20 +215,24 @@ Responsive variations also exist for `align-self`. ## Auto margins -Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. +Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below is are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.mr-auto`), and pushing two items to the left (`.ml-auto`). -### With justify-content - -Easily move all flex items to one side, but keep another on the opposite end by mixing `justify-content` with `margin-right: auto` or `margin-left: auto`. +**Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default `justify-content` value.** [See this StackOverflow answer](https://stackoverflow.com/a/37535548) for more details. {% example html %} -<div class="d-flex justify-content-end bd-highlight mb-3"> +<div class="d-flex 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 bd-highlight mb-3"> <div class="mr-auto 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-start bd-highlight"> +<div class="d-flex bd-highlight mb-3"> <div class="p-2 bd-highlight">Flex item</div> <div class="p-2 bd-highlight">Flex item</div> <div class="ml-auto p-2 bd-highlight">Flex item</div> @@ -237,7 +241,7 @@ Easily move all flex items to one side, but keep another on the opposite end by ### With align-items -Similarly, move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`. +Vertically move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`. {% example html %} <div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;"> |