Eliane  Blanda

Eliane Blanda

1622078981

Let's Learn CSS Flexbox justify-content in One Minute

In this video you’ll learn CSS Flexbox justify-content property under one minute. For better view use YouTube mobile app.

#css

What is GEEK

Buddha Community

Let's Learn CSS Flexbox justify-content in One Minute

CSS FlexBox Cheat Sheets for Web Developers in 2021

It’s 2021! Let’s refresh Our CSS Flexbox  Memory. Here’s a Cheat Sheet of everything you can do with CSS flexbox to get started in 2021

#css3 #learn-flexbox-css #flexbox-tutorials #learn-css #web-development #learn-web-development #learning-css

CSS Flex Box: A Flexible Way To Layout

Every element of HTML is a rectangular box. Every Box has a defined height and width. This way you can increase or decrease its size. CSS is used to style HTML elements so that they look nice and decorated. CSS treats every element in the view of its box model. So every element has padding, margin, and border too.

You can learn more about CSS BOX Model here.

Box layout means to position a box on the page. So you may like to center an element horizontally or vertically or you may want to move the element to any other position on the page. Laying out your page is the most important task which determines the overall look of the page.

CSS has got many ways to align a box. You could choose floats, position property or you could try aligning it using margin and padding. But it’s not always so easy to align an element as you wish to. Developers have always been having difficulties to center an element horizontally or vertically. If you try using floats, you will see that it requires more work and gives you extra lines of code to position the element. So what’s the way out?

Here comes the modern CSS Flex Box technique. After using Flex Box for the first time you will forget the difficulties you have been facing with your layout. You will make your layout with fewer lines of code and very quickly.

Now after having Flex Box in your hand you don’t need to worry about every single element in your container. What you need is just add one or two lines of code and there you go.

What Are Some Of The Most Popular Uses Of Flex Box?

You can use Flex Box Almost anywhere on your website to align your content, but I found it more useful to apply it on certain parts of my page than others.

1: Navigation bar

The Navigation menu is mostly a horizontal or vertical bar on top or side of the page with links to other parts of the page. You can create a container for it and apply Flex Box to it so that you can move it’s items wherever it’s suitable for your page layout.

2: Footer

Footer of a website mostly includes contact details, logo, and some links to other parts of the site. You can align your footer content with the help of Flex Box too.

3: Horizontal Alignment

You can align your container’s elements on the horizontal line wherever you like and can add space in them.

4: Vertical Alignment

It often requires to position elements vertically, so there is a very easy way to achieve it with Flex Box. You just need to add one line and it’s already done.

4: Re-Ordering Elements

Flex Box has a function that allows you to rearrange the order of your elements in a container. You can change the order of any element you like.

#web-development #technology #css3 #flexbox #css #html-css #learning-css #learn-flexbox-css

CSS Flexbox: What I learned from Flexbox Zombies

I started playing an educational game called Flexbox Zombies, which has been teaching me the fundamentals of flexbox in a fun way. In the game, you fight zombies by using features of flexbox to aim your crossbow at the zombies.

MDN docs explain flexbox as:

a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.

The Flexbox Zombies game teaches flexbox through a story, with each lesson building on the previous, thus reinforcing the fundamentals of flexbox in a fun and effective way.

#flexbox #css #css flexbox #flexbox zombies

Alisha  Larkin

Alisha Larkin

1623507720

An Introduction to CSS Variables

This article is part 1 out of 3 articles detailing CSS files. You can find links to the other two at the bottom of this page.

One of the biggest issues with writing large amounts of CSS is keeping things consistent. For example, in a large codebase a single color can be used hundreds of times in hundreds of places. This repetition makes maintenance difficult as a simple design tweak like changing a color can result in that change needing to be made in many, many places.

CSS pre-processors like Sass and Less attempt to solve this particular problem (and others) by including variables. Variables let you set common values like colors and sizes in a single place then reference the variable when you need to use those values. Now a simple color change only needs to be made in one place.

Modern CSS, though, is very powerful and CSS now has native support for variables. You don’t need any build tools or pipelines; they are just part of the language. The code you write is the code that the browser uses. Formally, variables are “custom properties” but are commonly referred to simply as variables. Let’s explore how they can be used and how they can make writing CSS a much better experience.

Declaring and Using Variables

One of the telling things about the name “custom properties” is that they are CSS properties. Since they are properties, they have to be declared within a CSS rule like any other property:

/* Nope! */
--brand-color: #003d7d;

.foo {
    /* Yep! */
    --brand-color: #003d7d;
}

To differentiate variables from standard properties, they must start with --. Any name can be used though, so long as you only use letters, numbers, and dashes. Remember that they are case-sensitive, so --foo and --Foo are not the same variable.

Variables are also part of the normal cascade of CSS properties. This effectively means that you will want to declare your global variables on the highest element in the document tree, which is almost always html. But if you have styles that apply to the html element and want to keep your variable declarations separate, a common practice is to use the :root pseudo-class:

:root {
    --brand-color: #003d7d;
}

The values of your variables can be many different things as basically any valid CSS value can be the value of a variable. Sizes and colors are just the beginning as entire border and background values can also be stored. You can also use the value from one variable to set another. The possibilities are endless.

:root {
    --brand-color: #003d7d;
    --spacing: 4px;
    --spacing-large: calc(var(--spacing) * 2);
    --border: 2px solid var(--brand-color);
    --info-icon-bg-image: url('data:/...');
}

In the code sample above, you probably noticed how we access the value of variables: the var() function. The first parameter to that function should be the variable you need the value from. The second (optional) parameter is used as a fallback value. This is useful if you are not sure if a variable has been set and can be used for all sorts of fun tricks.

:root {
    --some-color: #003d7d;
}

.widget {
    background-color: var(--some-color);
    font-size: var(--font-size, 16px);
}

In that example, since we did not declare a --font-size variable, var() will return 16px since that is the fallback value. Note that only the first value is considered the variable to evaluate and, like the values of variables, the fallback value can contain commas. For example, var(–foo, red, blue) defines a fallback of red, blue and not two separate fallback values.

#css #learning-css #css-fundamentals #learn-css #software-development

Queenie  Davis

Queenie Davis

1625908620

What is CSS flex-flow and justify-content?

Flex-flow is the shorthand for the flex-direction and flex-wrap. We already talked about flex-wrap before.

For the flex-direction, if the direction is row, the items are placed in a row. If row-reverse, the items are also placed in a row but in reverse order.

row and row-reverse

The items are placed in column if the flex-direction is column, the items are placed in reverse order if is column-reverse.

column and column-reverse

Row and column

We added the color and changed the text to number for the buttons. We also added the height for the “ul” element. This is because we need to demonstrate the flex-direction column.

#css #flex-flow #flexbox #css3 #justify-content #flex-flow