Search PI
Programming Infinity
Programming in a way to understand
Featured to Learn
- Get link
- Other Apps
Labels
CSS flex Property
Example
Let all the flexible items be the same length, regardless of its content:
#main div {
-ms-flex: 1; /* IE 10 */
flex: 1;
}
-ms-flex: 1; /* IE 10 */
flex: 1;
}
Definition and Usage
The flex
property is a shorthand property for:
- flex-grow - How the element should expand with respect to another flex-items.
- flex-shrink - How the element should shrink with respect to another flex-items.
- flex-basis - Minimum Width for the flex-items.
The flex
property sets the flexible length on flexible items.
Note: If the element is not a flexible item, the flex
property has no effect.
Default value: | 0 1 auto |
---|---|
Inherited: | no |
Animatable: | yes, see individual properties. |
Version: | CSS3 |
JavaScript syntax: | object.style.flex="1" |
- Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
- object - object in javascript means the element on which
flex
is applied. - Animatable - "Animatable = yes" means that it can be animated with CSS
@keyframes
.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -ms- or -moz- specify the first version that worked with a prefix.
Property | |||||
---|---|---|---|---|---|
flex | 29.0 21.0 -webkit- |
11.0 10.0 -ms- |
28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
CSS Syntax
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
Property Values
Value | Description | Demo |
---|---|---|
flex-grow | A number specifying how much the item will grow relative to the rest of the flexible items | |
flex-shrink | A number specifying how much the item will shrink relative to the rest of the flexible items | |
flex-basis | The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit | |
auto | Same as 1 1 auto. | |
initial | Same as 0 1 auto. | |
none | Same as 0 0 auto. | |
inherit | Inherits this property from its parent element. |
More Examples
Example
Using flex
together with media queries to create a different layout for different screen sizes/devices:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout (100%) instead of a two-column layout (50%) */
@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout (100%) instead of a two-column layout (50%) */
@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}
- Get link
- Other Apps
Tags
CSS Properties
Learn CSS
Most Reads
Thunkable #2 - How to show Admob Banner and Interestial Ads using Thunkable
- Get link
- Other Apps
Thunkable #4 - Introduction to advanced features | Webview Explanation
- Get link
- Other Apps
Thunkable #6 - Text Input and Label of User Interface full and simple explanation with use
- Get link
- Other Apps
How to use Switch in Thunkable | Designer and Blocks Clear Explanation
- Get link
- Other Apps
HTML #11 - Tables in HTML and it's properties #part1
- Get link
- Other Apps
How to use Alert in Thunkable | Designer and Blocks clear explanation
- Get link
- Other Apps
Android #11 - ScrollView | Adding Relative Layout to ScrollView | Calendar #3
- Get link
- Other Apps
HTML #9 - HTML Images and it's attributes Introduction, Uses and How to use
- Get link
- Other Apps
HTML #8 - HTML Text Formatting, Uses and How to Use
- Get link
- Other Apps
Android Studio #2 - Button's Introduction and uses
- Get link
- Other Apps
Comments
Post a Comment