flex-basis # 05

Flex-basis

The flex-basis property specifies the width of a flex item. Basically, the flex or minimization will start from the flex-basis property. The default value is auto.

CSS

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

HTML

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 2 200px">3</div>
  <div>4</div>
</div>

Syntax

/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;
/* Intrinsic sizing keywords */
flex-basis: fill;     //browser compatibility problem
flex-basis: max-content;     //browser compatibility problem
flex-basis: min-content;     //browser compatibility problem
flex-basis: fit-content;     //browser compatibility problem
/* Automatically size based on the flex item’s content */
flex-basis: content;     //browser compatibility problem
/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

Previous PostNext Post