# 全屏  d-flex

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>                            

# 实际 d-inline-flex 

<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>      

# 默认居左 flex-row

<div class="d-flex flex-row bd-highlight mb-3">                        

# 居右 flex-row-reverse 

<div class="d-flex flex-row-reverse bd-highlight">                   

# 垂直 flex-column

<div class="d-flex flex-column bd-highlight mb-3">                

# 垂直倒序 flex-column-reverse

<div class="d-flex flex-column-reverse bd-highlight">  

#  justify-content       

<div class="d-flex justify-content-start">...</div>         # 整体居始

<div class="d-flex justify-content-end">...</div>          # 整体居尾

<div class="d-flex justify-content-center">...</div>      # 整体居中

<div class="d-flex justify-content-between">...</div>   # 整体靠边

<div class="d-flex justify-content-around">...</div>      # 整体居中靠边

# Align items

<div class="d-flex align-items-start">...</div>        # 靠顶部

<div class="d-flex align-items-end">...</div>         # 靠底部

<div class="d-flex align-items-center">...</div>     # 靠中

<div class="d-flex align-items-baseline">...</div>  # 靠基线

<div class="d-flex align-items-stretch">...</div>    # 弹性

# Align self

<div class="align-self-start">Aligned flex item</div>

<div class="align-self-end">Aligned flex item</div>

<div class="align-self-center">Aligned flex item</div>

<div class="align-self-baseline">Aligned flex item</div>

<div class="align-self-stretch">Aligned flex item</div>

# 充满: flex-fill 

<div class="d-flex bd-highlight">

  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>

  <div class="p-2 flex-fill bd-highlight">Flex item</div>

  <div class="p-2 flex-fill bd-highlight">Flex item</div>

</div>

# 伸长与萎缩: Grow and shrink

<div class="d-flex bd-highlight">

  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>

  <div class="p-2 bd-highlight">Flex item</div>

  <div class="p-2 bd-highlight">Third flex item</div>

</div>

<div class="d-flex bd-highlight">

  <div class="p-2 w-100 bd-highlight">Flex item</div>

  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>

</div>

# 自动边: Auto margins

<div class="d-flex bd-highlight mb-3">

  <div class="p-2 bd-highlight">Flex item</div>

  <div class="p-2 bd-highlight">Flex item</div>

  <div class="ml-auto p-2 bd-highlight">Flex item</div>

</div>

# Wrap

<div class="d-flex flex-nowrap">

</div>

<div class="d-flex flex-wrap">

 </div>

<div class="d-flex flex-wrap-reverse">

</div>

# 顺序: Order   #     .order-0     ~   .order-12    :  0排第一

<div class="d-flex flex-nowrap bd-highlight">

  <div class="order-3 p-2 bd-highlight">First flex item</div>

  <div class="order-2 p-2 bd-highlight">Second flex item</div>

  <div class="order-1 p-2 bd-highlight">Third flex item</div>

</div>

# Align content

<div class="d-flex align-content-start flex-wrap">

<div class="d-flex align-content-end flex-wrap">

<div class="d-flex align-content-center flex-wrap">

<div class="d-flex align-content-between flex-wrap">

<div class="d-flex align-content-around flex-wrap">

<div class="d-flex align-content-stretch flex-wrap">