Skip to main content

Felxbox css

flexbox-css

The Flex Container Properties - Understanding Flexbox: Everything you need to know

“Baseline” really sounds fancy.

“Baseline” really sounds fancy.

The result appears to look just like flex-start but it is subtly different.

What the heck is “baseline”?

The image below should help.

Notice how all the flex-items are aligned to have their content seat on the “baseline”?

6. Align-content

While discussing the wrap property, do you remember what happened when you added more flex-items to the flex-container?

You got a multi-line flex container.

The align-content property is used on multi-line flex-containers.

It takes the same values as align-items apart from baseline.

By definition, it controls how the flex-items are aligned in a multi-line flex container.

Just like align-items, the default value is also stretch

These are values you should now be familiar with. So, here’s how they affect a multi-line flex-container with 10 flex-items.

(i) Stretch

With stretch, the flex items are “stretched” to fit the available space along the cross-axis.

The spacing you see between the flex items below is owing to the margin set on the items.

(ii) Flex-start

You’ve seen the flex-start value before.

This time it aligns the items in the multi-line container to the start of the cross-axis.

Remember the default cross axis is from top-to-down.

Thus, the flex items are aligned to the top of the flex container.

(iii) Flex-end

The flex-end value aligns the flex items to the end of the cross-axis.

(iv) Center

Like you may have guessed, center aligns the flex-items to the center of the cross-axis.

That’s the last of the flex-container properties.

You now understand how to use the various flex-container properties. You’ll use these to work through the practical sections coming up in the lessons that come.

Source

≡

Comments

Post a Comment

Share your thoughts!

Popular posts from this blog

Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms.

Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms. Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms. “JavaScript’s global scope is like a public toilet. You can’t avoid going in there, but try to limit your contact with surfaces when you… Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms. Photo by Florian Olivo on  Unsplash “ J avaScript’s global scope is like a public toilet. You can’t avoid going in there, but try to limit your contact with surfaces when you do.” ― Dmitry Baranowski Here’s another (much) more simple article I wrote on the subject: Closures In Javascript Answer A closure is a function defined...
Post a Comment
Read more

links

links Absolutely Everything You Could Need To Know About How JavaScript TOC & Condensed Links **** **** **** **** **** 1 2 3 4 5 leonardomso/33-js-concepts *This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a…*github.com Call stack - MDN Web Docs Glossary: Definitions of Web-related terms MDN *A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its…*developer.mozilla.org Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & more *Web developers or Front end engineers, as that’s what we like to be called, nowadays do everything right from acting as…*medium.com Understanding the JavaScript call stack *The JavaScript engine (which is found in a hosting environment like the browser), is a single-threaded interpreter…*medium.freecodecamp.org Javascript: What Is The Execution Context? ...
Post a Comment
Read more

Bash Proficiency

Bash Proficiency In Under 15 Minutes Bash Proficiency In Under 15 Minutes Cheat sheet and in-depth explanations located below main article contents… The UNIX shell program interprets user commands, which are… Bash Proficiency In Under 15 Minutes Cheat sheet and in-depth explanations located below main article contents… The UNIX shell program interprets user commands, which are either directly entered by the user, or which can be read from a file called the shell script or shell program. Shell scripts are interpreted, not compiled. The shell reads commands from the script line per line and searches for those commands on the system while a compiler converts a program into machine readable form, an executable file. LIFE SAVING PROTIP: A nice thing to do is to add on the first line #!/bin/bash -x I will go deeper into the explanations behind some of these examples at the bottom of this article. Here’s some previous articles I’ve written for more advanced users. Bash Commands That Sa...
Post a Comment
Read more