逆引きflexbox

flexbox.md

基本

横に並べる(デフォルト)

• flex-direction: row;

.flex-container {
  display: flex;
  flex-direction: row;
}

縦に並べる

• flex-direction: column;

.flex-container {
  display: flex;
  flex-direction: column;
}

折り返えさない(デフォルト)

• flex-wrap: nowrap

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

折り返す

• flex-wrap: wrap

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

横に並べて上下中央配置

• align-items: center;

.flex-container {
  display: flex;
  align-items: center;
}

縦に並べて左右中央配置

• align-items: center;

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

横に並べて左右中央配置

• justify-content : center;

.flex-container {
  display: flex;
  justify-content : center;
}

縦に並べて上下中央配置

• justify-content : center;

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content : center;
}

横に並べて上下左右中央配置

• align-items: center;
• justify-content : center;

.flex-container {
  display: flex;
  align-items: center;
  justify-content : center;
}

縦に並べて上下左右中央配置

• align-items: center;
• justify-content : center;

.flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content : center;
}

応用