In Bootstrap 3 and for the most of the websites, the only way to build multi-column layouts was to set column widths and use floats. Then on mobile, you would just remove the float and width property so that it would change to be one column. Now with Flexbox, this is a new layout mode of CSS3 which is officially called CSS Flexible Box Layout Module. The main benefits of this layout mode is that it makes the following layout tasks easier:
- – Alignment of items
- – Direction
- – Justify content
- – Auto margins
- – Ordering
Alignment of items
Set the Alignment of content use align-items utilities in flexbox containers for changing the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<div class="d-flex align-items-start">Item 1</div> <div class="d-flex align-items-end">Item 2</div> <div class="d-flex align-items-center">Item 3</div> <div class="d-flex align-items-baseline">Item 4</div> <div class="d-flex align-items-stretch">Item 5</div> |
Direction
Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).
Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<div class="d-flex flex-row"> <div class="p-2 my-flex-item">Item 1</div> <div class="p-2 my-flex-item">Item 2</div> <div class="p-2 my-flex-item">Item 3</div> </div> <div class="d-flex flex-row-reverse"> <div class="p-2 my-flex-item">Item 1</div> <div class="p-2 my-flex-item">Item 2</div> <div class="p-2 my-flex-item">Item 3</div> </div> |
Justify content
Set the justify of content use justify-content utilities in flexbox containers for 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
<div class="d-flex justify-content-start">Item 1</div> <div class="d-flex justify-content-end">Item 1</div> <div class="d-flex justify-content-center">Item 1</div> <div class="d-flex justify-content-between"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> <div class="d-flex justify-content-around"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> |
Auto margins
Flexbox can do some pretty awesome things which can be applied to single flex items that are margins. The following margin classes for pushing two items to the right (.mr-auto), and pushing two items to the left (.ml-auto).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<div class="d-flex"> <div class="p-2">Flex item</div> <div class="p-2">Flex item</div> <div class="p-2">Flex item</div> </div> <div class="d-flex"> <div class="mr-auto p-2">Flex item</div> <div class="p-2">Flex item</div> <div class="p-2">Flex item</div> </div> <div class="d-flex"> <div class="p-2">Flex item</div> <div class="p-2">Flex item</div> <div class="ml-auto p-2">Flex item</div> </div> |
Ordering
You can change order of a specific element by using the .order classes. In bootstrap flex layout valid classes are from 0 to 12, where the lowest number has highest priority (order-1 is shown before order-2, etc…):-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<div class="d-flex bg-secondary"> <div class="p-2 bg-info order-3">Flex item 1</div> <div class="p-2 bg-warning order-2">Flex item 2</div> <div class="p-2 bg-primary order-1">Flex item 3</div> </div> |
Recent Comments