Bootstrap4样式之flex样式

1、开启Flex布局样式

使用.d-flex和.d-inline-flex实现开启flex布局样式，也可以使用.d-[sm|md|lg|xl]-*之前再不同屏幕开启flex布局样式

<div class="d-flex">
	<div class="p-2 border border-success w-25">项目1</div>
	<div class="p-2 border border-success w-25">项目2</div>
	<div class="p-2 border border-success w-25">项目3</div>	
</div>

2、设置项目为水平显示效果

可以通过.flex-row和.flex-row-reverse可以呈现项目的水平显示效果，也可以使用.flex-[sm|md|lg|xl]-row和.flex-[sm|md|lg|xl]-row-reverse设置不同屏幕下项目水平显示效果。
.flex-row，居左并从左到右显示，默认方式。

<div class="d-flex flex-row">
	<div class="p-2 border border-success w-25">项目1</div>
	<div class="p-2 border border-success w-25">项目2</div>
	<div class="p-2 border border-success w-25">项目3</div>	
</div>

.flex-row-reverse，居右并从右到左显示。

<div class="d-flex flex-row-reverse">
	<div class="p-2 border border-success w-25">项目1</div>
	<div class="p-2 border border-success w-25">项目2</div>
	<div class="p-2 border border-success w-25">项目3</div>	
</div>

3、设置项目为垂直显示效果。

使用.flex-column和.flex-column-reverse可以实现项目为垂直显示效果，也可以使用.flex-[sm|md|lg|xl]-column和.flex-[sm|md|lg|xl]-column-reverse设置不同屏幕的项目的垂直显示效果。
.flex-column：从上往下显示
.flex-column-reverse：从下往上显示

<div class="d-flex flex-column w-25">
	<div class="p-2 border border-success">1</div>
	<div class="p-2 border border-success">2</div>
	<div class="p-2 border border-success">3</div>	
</div>
<hr>
<div class="d-flex flex-column-reverse w-25">
	<div class="p-2 border border-success">1</div>
	<div class="p-2 border border-success">2</div>
	<div class="p-2 border border-success">3</div>	
</div>

4、实现项目在水平方向的对齐

使用.justify-content-[start|end|center|between|around]实现项目的水平对齐方式，这些样式也支持媒体查询，这些样式支持响应式媒体查询，可以使用.justify-content-[sm|md|lg|xl]-[start|end|center|between|around]实现不同设备下子项目在水平方向的对齐方式。

<div class="d-flex justify-content-start">
	<div class="p-2 border border-success">项目1</div>
	<div class="p-2 border border-success">项目2</div>
	<div class="p-2 border border-success">项目3</div>	
</div>
<hr>
<div class="d-flex justify-content-end">
	<div class="p-2 border border-success">项目1</div>
	<div class="p-2 border border-success">项目2</div>
	<div class="p-2 border border-success">项目3</div>	
</div>
<hr>
<div class="d-flex justify-content-center">
	<div class="p-2 border border-success">项目1</div>
	<div class="p-2 border border-success">项目2</div>
	<div class="p-2 border border-success">项目3</div>	
</div>
<hr>
<div class="d-flex justify-content-between">
	<div class="p-2 border border-success">项目1</div>
	<div class="p-2 border border-success">项目2</div>
	<div class="p-2 border border-success">项目3</div>	
</div>
<hr>
<div class="d-flex justify-content-around">
	<div class="p-2 border border-success">项目1</div>
	<div class="p-2 border border-success">项目2</div>
	<div class="p-2 border border-success">项目3</div>