Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
25 days ago

"What is the method for obtaining the flex-basis property of an element in JavaScript?"

This query has been addressed in other threads:
How to get a CSS value using JavaScript (8 solutions) Accessing an HTML element's style attributes using JS (5 solutions) Closed 19 mins ago.
I am trying to modify a custom flex-basis value for a flex container's element when the viewport is resized.

I am searching for the name of the flex-basis feature that can be accessed using JavaScript and the available values, such as content or auto. In essence, I want to adjust this feature based on the size of the viewport.

Answers(2)
avatar
Vogi
24 days ago
Verified Answer
The feature you are looking for is called flex-basis. It specifies the initial length of a flexible item. When omitted from the flex shorthand, its specified value is the length zero. You can set the flex-basis property using JavaScript by accessing the style object of the element and setting its flexBasis property to a value. For example, if you want to set the flex-basis of an element with an id of "myElement" to 100px, you can use the following code: 
document.getElementById("myElement").style.flexBasis = "100px";
I hope this helps! Let me know if you have any other questions.

Sources

flex-basis | CSS-Tricks - CSS-TricksCSS flex-basis property - W3SchoolHTML DOM Style flex Property - W3SchoolCSS Flexbox Items - W3Schooljavascript - CSS - How to properly use flex-basis? - Stack Overflowflex-basis - CSS: Cascading Style Sheets | MDN - Mozilla Developer
avatar
Tolerim
25 days ago
The Javascript-accessible name for the flex-basis property is "flexBasis". The possible values for this property are any valid length value, as well as the keywords "content", "auto" and "initial". To change this property based on the viewport size, you can add an event listener to the window object for the "resize" event, and then modify the flex-basis value of the element accordingly using JavaScript DOM manipulation.
;