ngtk/flexbox.md

Last active November 23, 2016 09:02

Star (0) You must be signed in to star a gist
Fork (0) You must be signed in to fork a gist

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/ngtk/fd4f598b0279ed72123a6b21dcabb73c.js"></script>
Save ngtk/fd4f598b0279ed72123a6b21dcabb73c to your computer and use it in GitHub Desktop.

Download ZIP

逆引きflexbox

Raw

基本

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

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;
}

応用

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment