DEV Community: GalinaLK

flexbox

GalinaLK — Wed, 20 Apr 2022 12:48:27 +0000

I'll show you flexbox with a few examples from my video on YouTube - https://youtu.be/k1CigYz5Tlg. The images are screenshots.They don't have a good quality but everything is quite simple.
This is a div with a class named container with 3 divs inside with a class called box:

This is the styling for the container and the boxes:

And this is what it looks like in the browser:

This is what it looks like when you add display: flex;

The items display as a row from left to right, like we read sentences in English.
The gap property creates a gap between the items:

flex-direction: column; will make them display as a column:

When you add display: flex; the property flex-direction is set to row. When flex-direction is set to row the row is called the main axis. When it's set to column the column is called the main axis. The cross axis is perpendicular to the main axis:

The justify-content property changes their position along the main axis. justify-content: center; will place the items at the center of the container:

justify-content: flex-end; will position them at the end of the container:

justify-content: flex-start; will place them at the start of the container:

justify-content: space-around; gives every item equal space on both sides (the space between them looks bigger because of the gap):

justify-content: space-between; create space between them, but not around the container:

justify-content: space-equal; makes the space between them and around the container equal:

I added height: 80vh; to the container:

And this is what it looked like:

The items are stretched. This is the default behavior when you add display: flex;
The align-items property aligns them vertically. When it's set to center they're vertically centered:

This is the default value:

align-items: flex-end; will place them at the bottom of the container:

align-items: flex-start; will place them at the top:

The items don't break into multiple lines. I added more items to show you how to make them wrap:

I added flex-wrap: wrap; to the container. It will make them wrap onto multiple lines:

flex-wrap: nowrap; is the default value when you add display: flex;

I removed the gap and changed the names of these three classes to show you how to make elements bigger than the others when there's available space:

I'll show you flex-grow. box1 gets flex-grow: 1;
box2 gets flex-grow: 2;
box3 gets flex-grow: 3;
This is what the styling looks like:

box3 got three parts of the space that is not needed, box2 got two and box1 got one:

I added another container with a class called container2 with 3 divs inside with classes named child to show you the flex-basis property:

This is the styling for container2:

I also added a gap to the container. This is the styling for the items and what they look like:

This is what they look like with flex-basis: 20px;

This is what they look like with flex-basis: 50px;

And this the items with flex-basis: 100px;

flex-basis changes the length of the elements.
flex-basis: auto; is the default value. It depends on the length of the element or its content if length is not set:

The elements can grow if we change the flex-grow property.
I'll change two of the class names and delete flex-basis: auto; to show you flex-shrink. Now the second element is has a class named child1 and the third has a class called child2:

I'll give all divs inside container2 flex-basis: 150; It'll make them so big that there won't be enough room for all of them in the container and they'll have to shrink:

child1 will get flex-shrink: 1;
child2 will get flex-shrink: 2;
and child3 will get flex-shrink: 3;
This is the styling for the divs inside .container:

child3 has to shrink 3 times more than the others. With flex-shrink you can choose how big they should be when they have to shrink:

I'll give the container a height of 100px to show you the property called order:

The first item will get order: 3;

Now it's in the third position. The order property changes the order of the elements:

But if the order of your items is not correct you should change it in the html file. It's not a good idea to use the order property for that.

The align-self property changes the position of one element. I'll give child2 align-self: center; It will position it at the center:

align-self: stretch; will stretch it. That's the default:

align-self: flex-start; will put it at the top of the container:

With align-self set to flex-end the item will be at the bottom of the container:

Navbar React js

GalinaLK — Mon, 21 Feb 2022 09:53:05 +0000

I made a navbar with Sass that is responsive and looks good on both desktop and mobile devices. This is what it looks like on a desktop screen:

And this is what it looks like on a small screen:

The navbar is in a component called Header because the nav tag is inside a header. The Header is in App.js:

The logo, useState, Link and header.scss are imported in Header.js:

I used the keyboard on the screen and on my phone because my phone is connected to a PC. I write code on my phone because it's way easier than typing on a keyboard. In this way you can turn on your computer in the morning and code with just a phone wherever you are. I think it's a good idea to unplug it at the end of the day.
I try to avoid using divs but I needed them to style it. There's a div that's always on top and an unordered list for the hamburger menu inside the nav element:

The header has its position set to sticky so that when you scroll down it stays at the same place. The logo, search bar and the button that opens the menu are in the class named "top-nav":

&#8811 is an arrow. HTML has so many symbols and emojis that are easy to use, you just have to copy their code. But I also used the "fa fa-bar" icon from Font awesome, which is probably not a good idea because it makes it slower. This is what the lighthouse report showed me:

The nav menu items are links in an unordered list. It's mobile first, so they're hidden by default:

I didn't want to use a div and spans for the hamburger menu because they're just basic containers and that's not good for screen readers. We should use buttons even if it's not very beautiful. And we should even avoid using icons and use descriptive words instead. Many different people will try to figure out what's going on and some might not have much experience. When I was a kid a lot of sites seemed to be very confusing.
The function showHam toggles the class named "hidden" and the if-else block removes one icon and adds another one depending on what the user should see at this point. It uses the variable hamClosed to change the icon:

The logo is avif, because I wanted to use a photo and they're tiny.
These variables are placed in _variables.scss so I can change all the colors real quick:

And _variables.scss is imported in header.scss:

"nav-desc" has two direct children - a div for the things that will always stay on top (the logo, search bar and hamburger menu) and an unordered list with links for the menu. They stack on top of each other on small screens because "nav-desc" has a "display: flex" and "flex-direction" is set to "column". Here's the styling:

This is the css for the button, the logo and Link inside "top-nav":

And also, the search bar, the submit button and the hover effect of the menu:

On big screens the button that opens the hamburger menu has a display property set to "none". The "flex-direction" property of the hamburger menu is set to row so they're placed horizontally.

Too much styling will make it slower. The users will want to see the content, not the styling, so I think it's a good idea to make a few elements a little different so that it looks good, without changing the others.