Day11:Flex布局

display属性
position属性
float属性

.box{
  display: flex;
}

.box{
  display: inline-flex;
}

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

order
flex-grow
flex-shrink
flex-basis
flex
align-self

.item {
  order: <integer>;
}

.item {
  flex-grow: <number>; /* default 0 */
}

.item {
  flex-shrink: <number>; /* default 1 */
}