Code has been added to clipboard!

The CSS Flex-Basis Property

Reading time 1 min
Published Aug 8, 2017
Updated Oct 1, 2019

What is CSS flex basis?

The CSS flex-basis property only applies to flex items. By using it, you can set the initial length for flex items:

Example
a:nth-of-type(3) {
    -webkit-flex-basis: 50px; /* Safari 6.1 and newer */
    flex-basis: 50px;
}

The CSS flex-basis property syntax

The syntax for the flex-basis property is as follows:

flex-basis:value;

The available property values are presented in the following section.

Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

Property values

Value Description
auto The default value. The size of the element depends on width and height properties
content The size of the element depends on its content
Length units The initial size of the flex item defined in CSS length units (e.g., px)
Percentages The initial size of the flex item defined in percentages, representing the relation to the size of the parent flex container

Browser support

Browser image
Chrome
29+
Browser image
Edge
12+
Browser image
Firefox
22+
Browser image
IE
11+
Browser image
Opera
12.1+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
29+
Browser image
Firefox
22+
Browser image
Opera
12.1+
Browser image
Safari
9+

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 18/01/2021
3176 People Used
Only 97 Left
Rating
5.0