CSS

display要素

　
.contents { 
  display: block;           /* 指定された要素はブロックレベル要素として表示されます */
  display: inline;          /* 指定された要素はインライン要素として表示されます */
  display: inline-block;    /* 指定された要素はインライン要素とブロックレベル要素の特性を併せ持ちます */
  display: flex;            /* 指定された要素の子要素は横並びになる */
  display: none;            /* 指定された要素は非表示になる */
}
　

要素を横並びにしたい場合

/* 親要素に display: flex; を指定すると子要素が横並びになる */

.contents {           
  display: flex
}

.content {
}

横並びにした要素の横の配置を調整

/* 親要素に display: flex  と justify-content を指定する */

.contents {           
  display: flex;
  justify-content: space-around;  /* 横並びにした要素が左右に寄り、等間隔、両端の余白と要素間の余白が1：2 */
  justify-content: flex-start;  /* 横並びにした要素を左寄せ */
  justify-content: flex-end;  /* 横並びにした要素を右寄せ */
  justify-content: center;  /* 横並びにした要素を中央寄せ */
  justify-content: space-between;  /* 横並びにした要素が左右に寄り、等間隔 */
}

.content {
}

垂直方向の配置を指定する

/* align-itemsプロパティで垂直方向の配置を指定する */

.contents {           
  display: flex;
  align-items: flex-start;  /* 横並びにした要素が上寄り */
  align-items: flex-end;  /* 横並びにした要素が下寄り */
  align-items: center;  /* 横並びにした要素が中央揃え */
}

.content {
}

要素の並び方、並び順を指定する

/* flex-directionプロパティで要素の並び方、並び順を指定する */

.contents {           
  display: flex;
  flex-direction: row;  /* 左から右に並べる（初期値） */
  flex-direction: row-reverse;  /* 右から左に並べる */
  flex-direction: column;  /* 上から下に並べる */
  flex-direction: column-reverse;  /* 下から上に並べる */
}

.content {
}

要素の配置を指定する

/* positionプロパティで要素の配置を指定する */

.contents {           
  position: relative;  /* 現在の位置を基準に相対的な位置を決める */
  position: absolute;  /* 特定の地点を基準に絶対的な位置を決める（デフォルトの基準はウィンドウ左上） */
  position: fixed;  /* 要素を指定した位置に固定する */
}

.content {
}

  子要素に「position: absolute;」を指定した場合、親要素に「position: relative;」が無いと位置の基準は一番左上になる。
  親要素に「position: relative;」を記述した場合、親要素の左上が位置の基準となる。

  また、positionプロパティを使う場合、セットで
  top: 〇px;
  left: 〇px;
  right: 〇px;
  bottom: 〇px;
  のプロパティを使って基準からの位置を指定する事が多い。