Using the CSS flex shorthand
The CSS flex
property allows you to define how the size of a flex item changes to fit the container space. It is actually a shorthand for three subproperties:
#main div {
-ms-flex: 1; /* Internet Explorer 10 */
-webkit-flex: 1; /* Safari 6.1 and higher */
flex: 1;
}
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
CSS flex syntax
First, you will need to use the display property to define a flex container in CSS:
display: flex;
Now, the syntax for the CSS flex
property is as follows:
flex: grow shrink flex;
You can find the property values listed and explained in the table below:
Value | Description | Default value |
---|---|---|
grow | Specifies how much of the available flex container space should the element take up. Defined in unitless numbers (a proportion). |
0 |
shrink | Specifies how much should the element shrink when there is not enough flex container space available. Defined in unitless numbers (a proportion). |
1 |
basis | Specifies the starting size of the flex element. Defined in CSS length units. | auto |
auto | Same as 1 1 auto |
|
none | Same as 0 0 auto |