YouTipHTML DOM Style flex Property
-- Learning is not just about technology, but also about dreams!
- Home
- HTML
- JavaScript
- CSS
- Vue
- React
- Python3
- Java
- C
- C++
- C#
- AI
- Go
- SQL
- Linux
- VS Code
- Bootstrap
- Git
- Local Bookmarks
JavaScript Reference
JavaScript Objects
JavaScript Array Object JavaScript Boolean Object JavaScript Date Object JavaScript Math Object JavaScript Number Object JavaScript String Object JavaScript RegExp Object JavaScript Global Properties/Functions JavaScript Operators JavaScript Error
Browser Objects
Window Object Navigator Object Screen Object History Object Location Object Storage Object
DOM Objects
HTML DOM Document Object HTML DOM Element Object HTML DOM Attribute Object HTML DOM Event Object HTML DOM Console Object CSSStyleDeclaration Object DOM HTMLCollection
HTML Objects
<a> <area> <audio> <base> <blockquote> <body> <button> <canvas> <col> <colgroup> <datalist> <del> <details> <dialog> <embed> <fieldset> <form> <iframe> <frameset > <img> <ins> <input> - button <input> - checkbox <input> - color <input> - date <input> - datetime <input> - datetime-local <input> - email <input> - file <input> - hidden <input> - image <input> - month <input> - number <input> - range <input> - password <input> - radio <input> - reset <input> - search <input> - submit <input> - text <input> - time <input> - url <input> - week <keygen> <link> <label> <legend> <li> <map> <menu> <menuItem> <meta> <meter> <object> <ol> <optgroup> <option> <param> <progress> <q> <script> <select> <source> <style> <table> <td> <th> <tr> <textarea> <title> <time> <track> <video>
<source> HTML DOM Table Object
Style flex Property
Example
Make all flexible items have the same length, ignoring their content:
for (i = 0; i < y.length; i++) {
y.style.flex="1";
}Definition and Usage
The flex property sets or returns the length of an item, relative to the other flexible items in the same container.
The flex property is a shorthand property for the flexGrow, flexShrink, and flexBasis properties.
Note: If the element is not a flexible item, the flex property has no effect.
Browser Support
All major browsers support the flex property, except Safari.
IE 9 and its earlier versions do not support the flex property. IE 10 requires the prefix MS to support the property.
Syntax
Return the flex property:
object.style.flexSet the flex property:
object.style.flex="flex-grow flex-shrink flex-basis|auto|initial|inherit"Property Values
| Value | Description |
|---|---|
| flex-grow | A number that specifies how much the item will grow relative to the other flexible items. |
| flex-shrink | A number that specifies how much the item will shrink relative to the other 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. |
| none | Same as 0 0 auto. |
| initial | Sets this property to its default value (0 1 auto). See initial. |
| inherit | Inherits this property from its parent element. See inherit. |
Technical Details
| Default Value: | 0 1 auto |
|---|---|
| Return Value: | A string, representing the flex property of the element. |
| CSS Version: | CSS3 |
Related Articles
CSS Reference: flex property
HTML DOM STYLE Reference: flexBasis property
HTML DOM STYLE Reference: flexDirection property
HTML DOM STYLE Reference: flexFlow property
HTML DOM STYLE Reference: flexGrow property
HTML DOM STYLE Reference: flexShrink property