fyhub's blog

Appearance

7. flex 各种值的含义 ​

flex: none ​

css
.item {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}
.item {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

flex: auto ​

css
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

flex: 1 ​

css
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

flex:0 1 auto ​

css
.item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
.item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}