Hướng dẫn align-items bootstrap
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary. Enable flex behaviorsApply
I'm an inline flexbox container!
Responsive variations also exist for
DirectionSet 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 Use Flex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3
Use Flex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3
Responsive variations also exist for
Justify contentUse Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item
Responsive variations also exist for
Align itemsUse Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item
Responsive variations also exist for
Align selfUse Flex item Aligned flex item Flex item Flex item Aligned flex item Flex item Flex item Aligned flex item Flex item Flex item Aligned flex item Flex item Flex item Aligned flex item Flex item
Responsive
variations also exist for
Auto marginsFlexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right ( Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item
With align-itemsVertically move one flex item to the top or bottom of a container by mixing Flex item Flex item Flex item Flex item Flex item Flex item
WrapChange how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with Flex item Flex item Flex item Flex item Flex item
Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item
Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item
Responsive variations also exist for
OrderChange the visual order of specific flex items with a handful of First flex item Second flex item Third flex item
Responsive variations also exist for
Align contentUse Heads up! This property has no effect on single rows of flex items. Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item
Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item
Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item
Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item
Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item
Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item Flex item
Responsive
variations also exist for
|