# Bootstrap 通用類別-Flex
###### tags: `BootStrap`
Date : 2022/05/18

## d-inline-flex
`d-inline-flex`

<div class="d-inline-flex p-2 bg-primary justify-content-center align-items-center" 
style="height:100px;width:300px">I'm an inline flexbox container!</div>

<div class="d-inline-flex p-2 bg-success justify-content-center align-items-center" 
style="height:100px;width:300px">I'm an inline flexbox container!</div>

<div class="d-inline-flex p-2 bg-danger justify-content-center align-items-center" 
style="height:100px;width:300px">I'm an inline flexbox container!</div>

<div class="d-inline-flex p-2 bg-warning justify-content-center align-items-center" 
style="height:100px;width:300px">I'm an inline flexbox container!</div>


## 方向性-水平 row
`d-flex` +`flex-row`

<!-- flex-row -->
<div class="d-flex flex-row">
  <div class="p-2">Flex Item 1</div>
  <div class="p-2">Flex Item 2</div>
  <div class="p-2">Flex Item 3</div>
</div>

<!-- flex-row-reverse -->
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex Item 1</div>
  <div class="p-2">Flex Item 2</div>
  <div class="p-2">Flex Item 3</div>
</div>


## 方向性-垂直 column
`d-flex` + `flex-column`

    <!-- flex-column -->
    <div class="d-flex flex-column">
      <div class="p-2">Flex Item 1</div>
      <div class="p-2">Flex Item 2</div>
      <div class="p-2">Flex Item 3</div>
    </div>
    
    <!-- flex-column-reverse -->
    <div class="d-flex flex-column-reverse">
      <div class="p-2">Flex Item 1</div>
      <div class="p-2">Flex Item 2</div>
      <div class="p-2">Flex Item 3</div>
    </div>


## 主軸對齊 justify-content

<div class="d-flex justify-content-start">
  <div class="p-2">Flex Item 1</div>
  <div class="p-2">Flex Item 2</div>
  <div class="p-2">Flex Item 3</div>
</div>

- justify-content-start

- justify-content-end

- justify-content-center

- justify-content-between
D
- justify-content-around 彈性項目周圍分配相同空間

- justify-content-evenly 彈性項目之間的間隔相等

## 次軸(交叉軸)對齊 align-items

<div class="d-flex align-items-start">
  <div class="p-2">Flex Item 1</div>
  <div class="p-2">Flex Item 2</div>
  <div class="p-2">Flex Item 3</div>
</div>

- align-items-start

- align-items-end

- align-items-center

- align-items-basline 對其彈性項目文字底部的 baeline

- align-items-stretch stretch (預設) 延伸拉長彈性項目的最大尺寸

## align-self 彈性項目自身對齊

<div class="d-flex">
  <div class="align-self-start">flex-item</div>
  <div class="align-self-end">flex-item</div>
  <div class="align-self-center">flex-item</div>
  <div class="align-self-stretch">flex-item</div>
  <div class="align-self-baseline" style="font-size:50px;">flex-item</div>
  <div class="align-self-baseline" style="font-size:30px;">flex-item</div>
</div>

## .flex-fill 與 .flex-grow-1 作用相同，但它們都不是等寬
>.flex-grow <font color="red">=</font> flex: 1 1 auto <font color="red">=</font> flex: auto

因為 flex-basis 被設定為 auto，==內容太多可以撐開欄位寬度==

<div class="d-flex">
  <div class="p-2 flex-grow-1">Flex ITEM Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident, quaerat.</div>
  <div class="p-2 flex-grow-1">Flex ITEM</div>
  <div class="p-2 flex-grow-1">Flex ITEM</div>
</div

## 自己建立一個 .flex-1 class
==flex:1 才是真正的平均欄寬==。
flex:1 => flex:1 1 0%; flex-basis 被設定為 0%，==內容不會撐開欄位寬度==。

.flex-1 {
  flex: 1;
}

<div class="d-flex">
  <div class="p-2 flex-1">Flex ITEM Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident, quaerat.</div>
  <div class="p-2 flex-1">Flex ITEM</div>
  <div class="p-2 flex-1">Flex ITEM</div>
</div>

## margin

<div class="d-flex">
  <!-- me-auto => margin-right: auto -->
  <div class="p-2 me-auto">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>
  <!-- ms-auto => margin-left: auto -->
  <div class="p-2 ms-auto">Flex ITEM</div>
</div>

## 爆版

<div class="d-flex align-items-center w-25 border border-5">
  <div class="w-40 h-75 flex-shrink-0">item1</div>
  <div class="w-40 h-75 flex-shrink-0">item2</div>
  <div class="w-40 h-75 flex-shrink-0">item3</div>
  <div class="w-40 h-75 flex-shrink-0">item4</div>
  <div class="w-40 h-75 flex-shrink-0">item5</div>
  <div class="w-40 h-75 flex-shrink-0">item6</div>
</div>

## .flex-wrap

    <div class="d-flex flex-wrap">
      <div class="w-25">items1</div>
      <div class="w-25">items2</div>
      <div class="w-25">items3</div>
      <div class="w-25">items4</div>
      <div class="w-25">items5</div>
      <div class="w-25">items6</div>
    </div>

- .flex-wrap-reverse

## 對齊內容

<div class="d-flex flex-wrap align-content-start">
  <div class="w-25">item1</div>
  <div class="w-25">item2</div>
  <div class="w-25">item3</div>
  <div class="w-25">item4</div>
  <div class="w-25">item5</div>
  <div class="w-25">item6</div>
</div>
<div class="d-flex flex-wrap align-content-center">
  <div class="w-25">item1</div>
  <div class="w-25">item2</div>
  <div class="w-25">item3</div>
  <div class="w-25">item4</div>
  <div class="w-25">item5</div>
  <div class="w-25">item6</div>
</div>
<div class="d-flex flex-wrap align-content-end">
  <div class="w-25">item1</div>
  <div class="w-25">item2</div>
  <div class="w-25">item3</div>
  <div class="w-25">item4</div>
  <div class="w-25">item5</div>
  <div class="w-25">item6</div>
</div>
<div class="d-flex flex-wrap align-content-between">
  <div class="w-25">item1</div>
  <div class="w-25">item2</div>
  <div class="w-25">item3</div>
  <div class="w-25">item4</div>
  <div class="w-25">item5</div>
  <div class="w-25">item6</div>
</div>
<div class="d-flex flex-wrap align-content-around">
  <div class="w-25">item1</div>
  <div class="w-25">item2</div>
  <div class="w-25">item3</div>
  <div class="w-25">item4</div>
  <div class="w-25">item5</div>
  <div class="w-25">item6</div>
</div>
<div class="d-flex flex-wrap align-content-stretch">
  <div class="w-25">item1</div>
  <div class="w-25">item2</div>
  <div class="w-25">item3</div>
  <div class="w-25">item4</div>
  <div class="w-25">item5</div>
  <div class="w-25">item6</div>
</div>