Css var() with flexbox

I’m trying to set css variables with flexbox, to center an element.
With margin: auto I managed to create this working code:

 --centered-margin-left: auto; 
 --centered-margin-right: auto;
 --centered-margin: var(--centered-margin-left) var(--centered-margin-right);

But with flexbox, I don’t know how to do. This code doesn’t work:

 --centered-flex-display: flex;
 --centered-flex-justify-content: center;
 --centered-flex: var(--centered-flex-display) var(--centered-flex-justify-content);

I call this code in this way:

.flc {display: var(--centered-flex);}

<p class="flc" style="width: 50%;">flex centered</p>

Any idea?
Thank you!

This could not work.

It is working with margin because you can set both margins like

margin: 5 6;

but this is not able for all other css attributes. What you are doing is

display: flex center

which is not a valid command.

2 Likes

Ok, I see. But there could be a (another) code to use css variables with flexbox?

You can use CSS variables for all CSS values, including all Flexbox values.

2 Likes

Thank you. And with what code could I set a flex centered element with a css variable?

You could do something like this:

But using a CSS variable only makes sense if you use it in more than one place: say within the CSS of each of your header, main and footer Flexbox elements.

Note justify-content must be applied to the Flexbox container, not to any item within the container.

3 Likes

Thank you. However I wonder if there is a way to say in one row what without var() is said in two rows. As I tried, unsuccessfully, in my above code.
Otherwise, adding new code, instead of sparing, would be useless.

The above doesn’t really make sense either (or isn’t doing what you expect). I’m assuming you were going to use it like this.

margin:var(--centered-margin);

That would result in margin: auto auto; which is auto top and bottom margins as well as auto left and right margins. You could just have used margin:auto in that case as you are overriding the top and bottom margins.

If you only wanted auto left and right margins then you’d need to replace the auto in either of these rules with a variable.

margin: 0 auto;
or
margin: 0 auto 0 auto:

e.g.
margin:0 var(--auto-centered);
margin : 0 var(--centered-margin-right) 0 var(--centered-margin-left);

None of which makes a lot of sense unless there is some logic behind it.:slight_smile:

(Excuse typos as this was all typed on a phone ;))

2 Likes

Reducing code only to reduce code is not a good approach. Reducing code only makes sense if it makes the code more readable or if you have a performance issue in an interpreter language.
Please don’t try to shorten your code only because it’s possible. You will never be able to understand your own code 2 years later if you don’t write it easy to understand but most shortly.

3 Likes

I see. I was doing some attempts, after considering less, scss and sass, that I didn’t love because they have to convert to a normal css.
Css variables instead seems a “native” possibility to short and optimize the code in css itself.

If you want you can, at anytime, use a minifier before you deploy cour code. Same as for JavaScript. I personally don’t like it, because it doesn’t help if you have no performance issues. At the end it makes debugging on the production environment much harder because you are no longer able to take a quick look at the source code in the browsers developer tools to find the bug (ok, you still can have a look, but you will not understand a thing)

3 Likes

What I was searching was not to reduce the size of css, but to order it, and in particular to avoid duplicate or useless code.

As Thallium mentioned coming back to your code after some time or more importantly. Someone else that needs to utilize or maintain it. They have no clue as to what you are doing.

You should make it as concise as possible; it is instructions or a recipe for the layout. Not a message included like a text. Same with code comments and adding them in. Next to your code achieving its output without bugs. You are actually writing it for someone else to use.

I am OCD about things and my code structure. I spent a lot of time with doing exactly what you are doing with this. It was not worth it in the end. What I do find that REALLY HELP is with code comment. I hate the way the trash the flow. I also am very winded sometimes in explaining.

I leave a simple // *-1 to mark a code comment, then a // *-2 for the next comment as I go along. Then at the bottom of the page write out a whole paragraph if need be. To what I am trying to do. Especially learning while following a tutorial. If they provide a transcript along with the video content or cut a chuck of the PDF I can copy and paste in as the comment. Being it is at the bottom of the page or even its own README.comments file. It can get as concise or in depth as you want. Without making a mess of the code or looking cluttered.

I do it with JavaScript a lot as it allows me to include the ES6 standards for something specific that is being shown in Commom.JS. Especially with modules and NODE shown in vanilla JavaScript. Then by simply adding “type”: “module”, below the description in the Json file you have a working example for both syntax needs. But you cannot mix ES6 and VanillaJS in the same project. To my knowledge yet, possibly with a bundler. I am still just starting this journey and many miles to go … Peace …

2 Likes

Thank you. You are in a level much higher than my present css knowledge.
But resuming the original question of this thread: there is anyone who could say if it is possible work with display in a similar way as with margin (I mean: reducing, and not growing code)?
Something like this.

Ignoring the fact that your margin example was badly flawed as mentioned in my last post you can of course use a variable for the display value.

--mydisplay: flex;

display: var(--mydisplay);

It would have limited use though and the only use case I can think would be that you could change the variable to say block in a media query for small screens and change all instances of flex to block.

However that would seem an awkward thing to do as you don’t usually change display en-masse.

2 Likes

Thank you. But your above code would be useless, because I need to reduce the code: in a single variable get both display: flex and justify-content: center.
I tried today with:

 --flex-display: flex;
 --justify-content: center;
 --centered-flex: var(--flex-display) var(--justify-content);

Doesn’t work :smiling_face_with_tear:

EDIT

I guess that this is a limitation of present css specifications, isn’t it?

It seems to me you are trying to group various properties and values together and you can already do that with a class. Maybe you are thinking of utility classes?

3 Likes

Your CSS code is very likely to be only a tiny fraction of the size of the data of any image on your web page. There’s no point at all trying to save a few characters of CSS code.

You need to accept that a CSS variable can represent only one property value.

2 Likes

What are “utility classes”?

No, it is because you are applying multiple values to a display property which will only take one keyword. You cannot define content justification in the display property, just as you can’t define margins in the color property, because it make no sense to do so.
What you are doing is:_

display: flex center;

center is not a valid value for display and at no point do you define any justify-content.

It’s very simple to do what you want with a class:-

.flc {
   display: flex ;
   justify-content: center;
}

<div class="flc">...
2 Likes