rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

Update docs for IE10+IE11 support of auto margins (#24427)

Browse Source 
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.
This commit is contained in:
Mark Otto 2017-10-18 23:16:18 -07:00 committed by XhmikosR
parent bee20c04e8
commit 39b144c88f
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/4.0/utilities/flex.md
View File

@ -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;">