# Bootstrap flex、justify-content Utilities-Spacing

###### tags: `Bootstrap`
---

### flex

### Justify content

### Utilities ==> Spacing
https://getbootstrap.com/docs/4.4/utilities/spacing/

### 背景顏色
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark

### BS選單(左右兩邊推)

<!-- 選單左右推~ ml-auto & mr-auto-->
	<div class="row">
		<!-- ml-auto -->
		<div class="display-4  mt-5">ml-auto</div>
		<p class="mt-5">justify-content-end</p>
		<div class="col-12">
			<div class="d-flex bg-secondary justify-content-end">
				<div class="bg-info text-white border py-3 px-2">navbar 001.</div>
				<div class="bg-info text-white border py-3 px-2 ml-auto">[ml-auto] navbar  002.</div>
				<div class="bg-info text-white border py-3 px-2">navbar 003.</div>
			</div>
		</div>
		<hr>
		<!-- mr-auto -->
		<div class="display-4 mt-5">mr-auto</div>
		<p class="mt-5">justify-content-start</p>
		<div class="col-12">
			<div class="d-flex bg-secondary justify-content-start mt-3">
				<div class="bg-success text-white border py-3 px-2">navbar 001.</div>
				<div class="bg-success text-white border py-3 px-2 mr-auto">[mr-auto] navbar  002.</div>
				<div class="bg-success text-white border py-3 px-2">navbar 003.</div>
			</div>
		</div>
		<hr>
	</div>

* lex-wrap (nowrap, wrap, wrap-reverse)
* nowrap: 不要換行
* wrap: 空間滿了換行
* wrap-reverse: 空間滿了換行並反轉

---

---
<span class="code1"></span>
<style>
h2 {
color: #2383B8;
}
h3 {
color: #1AA340;
}
h4 {
color: white;
background-color: #2383B8;
padding:8px;
}

.code1 {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-family:'Fira Code';
}
.code {
padding: 2px 4px;
font-size: 90%;
font-family:'Fira Code';
}
</style>