Skip to content

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