z-index：マイナス値で背面化した要素はクリック不可 -> z-index:0;


//背面は、マイナスで実現するが、z-index: -1
//マイナス値だと、wrapper要素の下になるので、z-index: -1；要素内の要素は、見えていてもクリックできない

//背面化したい要素を、z-index:0、他を、position:static以外に指定した上で、z-index > 1  で設定する。

flexbox

display: flex; または　 display: inline-flex;

> 方向と配置

flex-direction: row; 横並べ

flex-direction: column; 縦並べ

【重要】配置は縦でも横でも、justify-content:

//親要素
.flexcon {
  display: flex;
  flex-direction: row;//子要素の配置方向 横：row　縦：column　左横：row-reverse  下から上：column-reverse
  flex-wrap: wrap;　//折り返しあり、nowrap（初期値）… 子要素を折り返しせず、一行に並べる,wrap-reverse … 子要素を折り返し、複数行に下から上へ並べる
  justify-content: flex-end; //水平の揃え　flex-start（初期値）center … 中央揃え　
    //space-between … 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
    //space-around … 両端の子要素も含め、均等に間隔をあけて配置
  align-items: center; // 垂直方向　stretch（初期値）… 親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
    //flex-start … 親要素の開始位置から配置。上揃え。
    //flex-end … 親要素の終点から配置。下揃え。
    //center … 中央揃え
    //baseline … ベースラインで揃える
  align-content: space-between; //複数行にしたときの並び
      stretch（初期値）… 親要素の高さに合わせて広げて配置
      flex-start … 親要素の開始位置から配置。上揃え。
      flex-end … 親要素の終点から配置。下揃え。
      center … 中央揃え
      space-between … 最初と最後の子要素を上下の端に配置し、残りの要素は均等に間隔をあけて配置
      space-around … 上下端にある子要素も含め、均等に間隔をあけて配置
}

.flexcon {
  display: inline-flex;
}

//子要素
  .item1 { order: 2; }
  .item2 { order: 3; }
  .item3 { order: 1; }

.item1 {
  align-self: flex-end;
}

Bootstrap

d-flex/ flex-row flex-column

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3



  
    Flex item 1
    Flex item 2
    Flex item 3
  

  
    Flex item 1
    Flex item 2
    Flex item 3
  

  
    Flex item 1
    Flex item 2
    Flex item 3
  
  
    Flex item 1
    Flex item 2
    Flex item 3

d-flex/ justify-content-

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

d-flex/ align-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

d-flex/ align-self--

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Aligned flex item

Flex item

Aligned 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
  
  
    Flex item
    Aligned flex item
    Flex item
  
  
    Flex item
    Aligned flex item
    Flex item

d-flex/ align-self--

Flex item




      
        Flex item
        Flex item
        Flex item

d-flex/ flex-grow--

Flex item

Third flex item

Flex item

Flex itemFlex itemFlex item

Third flex item


  
    Flex item
    Flex item
    Third flex item

d-flex/ flex-shrink--

Flex item



  
    Flex item
    Flex item

d-flex/ mr-auto、ml-auto

Flex item

mr-auto

Flex item

ml-auto



  
    Flex item
    Flex item
    ml-auto

d-flex/ mb-auto、mt-auto

mb-auto

Flex item

mt-auto



  
    mb-auto
    Flex item
    Flex item
  

  
    Flex item
    Flex item
    mt-auto