Skip to content

Masoud Pezeshkzade Posts

Master CSS:  Learn how to build responsive layouts with CSS FlexBox

The Flexible Box Model, or flexbox for short, is a CSS3 layout model that provides a clean and straightforward way to arrange items inside a container. It’s great to use for the general layout of your website or app. It’s easy to learn, is supported in all modern browsers

CSS flexible box layout is based on the idea that we can give the container the ability to change the width/height of its items to best fill the available space according to the user’s device. The flexbox model completely responsive and mobile-friendly, and works well on all screen sizes.

Unlike the old block model, with flexbox, you don’t have to assign widths and use floats to arrange items on the page. Therefore, you don’t have to spend a lot of time calculating margins and paddings either. Flexbox takes care of all of this automatically. Furthermore, flexbox is direction-agnostic. The block model is vertically-biased, and the inline model is horizontally-biased. But flexbox works well for both.

Flexbox deals with layout one dimension at a time, which means it controls either rows or columns. This is in contrast to the two-dimensional CSS Grid layout, where you can work with rows and columns simultaneously. Flexbox is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

In this CSS flexbox tutorial, I will give you a detailed look into the inner workings of this module.

Terminology and Core Concepts

Before you can harness the real power of flexbox, you need a solid understanding of its basic concepts.

The most important concept to learn in flexbox involves the use of axes. The flexbox model is in fact based on two axes – a main axis and a cross axis – and they are perpendicular to each other. Depending on the values of the Flexbox properties, flex items will be laid out inside a flex container following either the main axis or the cross axis.

Here’s the basic flexbox terminology you need to learn:

  • main-axis: The main axis refers to the primary axis of a container, along which child items are laid out. To change the direction of the main-axis is determined by the flex-direction property.
  • main-start | main-end: These two properties show where item placement on the main-axis starts and where it ends.
  • main size: The main-size of the container (i.e., width or height depending on the direction) is determined by the width or height of its largest item.
  • cross-axis: This is the axis that runs perpendicular to the main-axis. Therefore, if the main-axis is horizontal, the cross-axis will be vertical, and vice versa.  
  • cross-start | cross-end: These two properties show where item placement on the cross-axis starts and where it ends.
  • cross size: The cross-size of the container (i.e., width or height depending on the direction) is determined by the width or height of its largest item.

 The image below summarizes these concepts in a single diagram.

https://www.freecodecamp.org/news/content/images/2019/10/image-32.png

Flex Container

Learning flexbox is easy. To get started, you have to make a container and set its display property to flex. An area of the document whose layout is implemented using the flexbox model is known as a flex container. The direct children of that container are called flex items. The code below creates a container with three items, and all the flex properties are set to their default values.

.box {
            display: flex;
          }
<div class="box">
          <div>One</div>
          <div>Two</div>
          <div>Three
              <br>has
              <br>extra
              <br>text
          </div>
</div>

Flex Lines

An imaginary line is used to group and align flex items inside their container. This is known as a flex line. You can think of flex lines as lines that run parallel to the main axis.

A flex container can consist of one or more lines. In a single-line flex container, all the items are laid out on a single line, even if the contents of the container overflow. On the other hand, a multi-line flex container separates its flex children across multiple lines. You can think of this like when text is broken onto a new line when there are too many characters to fit in one line.

Container-level properties

From here on, this CSS flexbox tutorial will be divided into two sections: container-level and item-level properties.

Properties that are applied at the container level deal with how items are placed in the container as well as their spacing, alignment, and how they’re justified. Here’s a list of the main flexbox properties you can apply at the container level:

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: nowrap | wrap | wrap-reverse;

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items: flex-start | flex-end | center | baseline | stretch;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Next, I will explain how each property works in detail.

flex-direction

The flex-direction property defines the main axis. In other words, it specifies how flex items are placed in the flex container, and it has four possible values:

  • row (default)
  • row-reverse
  • column
  • column-reverse

If you set flex-direction to row or row-reverse, the main axis will run along the horizontal axis (i.e., from left to right). But if you set it to column or column-reverse, the main axis will run vertically (i.e., from top to bottom).  

As I mentioned earlier, the cross axis is perpendicular to the main axis. Therefore, if you set flex-direction to row or row-reverse, the cross axis goes from the top of the page to the bottom. On the other hand, if you set it to column or column-reverse, the cross axis will run along the rows.

flex-direction-illustration

flex-wrap

Using the flex-wrap property, you can control whether the flex container has one line or multiple. The order of stacking the lines on top of each other is determined by the direction of the cross axis.  The possible values are as follows:

  • nowrap (default): The flex items are laid out in a single line, and the flex container can overflow.
  • wrap: if there isn’t enough room for the flex items them on the first flex line, they will wrap onto additional flex lines.
  • wrap-reverse: Behaves in the same way as wrap but cross-start and cross-end are swapped.

justify-content

This property can be used to align flex items along the main axis of the current line of the flex container. This takes place once all the flexible lengths and auto margins have been resolved. This property helps distribute extra free space when either all the flex items on a line are inflexible or have reached their maximum possible size.

  • flex-start (default): Packs the flex items toward the beginning of the line.
  • flex-end: Packs the flex items toward the end of the line.
  • center: Packs the flex items toward the center of the line.
  • space-between: Evenly distributes flex items on the line.
  • space-around: Evenly distributes flex items on the line, with half-size spaces on either end.
justify-content-illustration

align-items

The align-items property is different from the justify-content property in that it aligns flex items on the cross-axis instead of aligning them on the main axis. Here are the values you can assign to this property.

  • flex-start: Packs the flex items toward the cross-start of the line.
  • flex-end: Packs the flex items toward the cross-end of the line.
  • center: Packs the flex items toward the center of the line
  • baseline: Aligns the flex items in a way that their baselines align.
  • stretch (default): Stretches the flex items from the cross-start to the cross-end; however, it conforms to the constraints of min-height/min-width/max-height/max-width.
align-items-illustration

align-content

With this property, a flex container’s lines are aligned within the flex container if there is extra space in the cross-axis. If the flex container is composed of a single line, this property has no effect. Here are the values you can assign to this property.

  • flex-start: Packs the lines toward the cross-start of the flex container.
  • flex-end: Packs the lines toward the cross-end of the flex container.
  • center: Packs the lines toward the center of the flex container.
  • space-between: Evenly distributes the lines are in the flex container
  • space-around: Evenly distributes the lines in the flex container, with half-size spaces on either end.
  • stretch (default): Stretches the lines to fill the remaining space.
align-content-illustration

Item-level properties

There are also some properties to control the individual items inside a container. You can target and manipulate the size of each item using these three properties:

flex-basis

The flex-basis property determines the initial main size of a flex item. It takes the same values as the width property. So, in addition to the default value of auto, you can use absolute values and percentages, but negative values are invalid. Flex-basis overrules any specified CSS width value, but if you set flex-basis to 0, it’ll expand to accommodate whatever content/padding is in it.

flex-grow

Using the flex-grow property, you can set the amount of the reaming space in the flex container that can be assigned to an item.  The property is also called the flex-grow factor. The property defaults to 0. Its value can be smaller than 1 (e.g., 0.6), but it can’t be negative.

flex-shrink

You can use the flex-shrink property to set the shrink factor of a flex item. This property helps when the size of all flex items is larger than the flex container because it makes them shrink to fit according to flex-shrink.

The property defaults to 1. Its value can be smaller than 1 (e.g., 0.6), but it can’t be negative.

flexbox shorthand

More often than not, instead of seeing the flex-grow, flex-shrink, and flex-basis properties used individually, you’ll see them combined into the flex shorthand. This shorthand lets you set the three values at the same time in this order: flex-grow, flex-shrink, flex-basis.

So instead of writing:

.example {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}

You write:

.example {
	flex: 1 1 auto;
}

Summary

Flexbox is a powerful CSS3 module that allows you to format HTML easily. To use the module, you need to designate a container div and set its display property to flex.

These are the five main properties you can set at the container level, which you can use as a Flexbox cheat sheet:

  • flex-direction determines the items are placed next to each other in the container and defines the main-axis.
  • flex-wrap sets whether wrap to the next row
  • justify-content: aligns the items along the main-axis
  • align-item: aligns the items along the cross-axis
  • align-content:  only applies if there are multiple lines

You can also use flex-grow, flex-shrink, and flex-basis to manipulate the items inside the container.

There are many great CSS Flexbox tutorials that you can take to learn more about building responsive layouts in CSS. If you want to learn CSS Grid as well, I highly recommend ready my CSS Grid tutorial for beginner. Please share your thought about using CSS Grid vs FlexBox and which one do you prefer to use.

Remote working protects your programming career against Covid-19

Remote working is an aspect of modern work that every developer may face with or think about it every so often, and it is mandatory somehow in this Coronavirus pandemic.

Whether you are a front end programmer or a back end engineer, you can stay productive from anywhere you are. Don’t let your location and situation limit you; however, except for today’s Coronavirus era, remote working may not be a good fit for everyone.

What’s your opinion? Does remote working make you a more productive developer? How can you enrich your quarantine experience? What are the pros and cons of remote working?

In this article, we will address these questions from a remote developer perspective. It helps you experience work in quarantine as a life turning point, end in a more satisfying job style.

Remote Working:

Working at home, at first glance, may look perfect. Your office is next to you after getting out of bed, and you can start your work a few minutes after grabbing your morning coffee. You can dress as you like and eat at any time; although you can enjoy all of these, remote working is not the same as working from home. As a developer, you need to maintain your focus to keep on deep working, whether at home or office. It could be a constant distraction if you do not adhere to your discipline of remote working.

You may think about not going to the office the next day, take your laptop to the home, and set it on your table at the kitchen or on the couch to work at home, and will. You may create a different day among the typical days of work, by doing so, and your family members may forget about your work since you are at home. If you wish to have a prolific job as a remote developer, especially in this Corona Pandemic era, first of all, think about creating your environment, where you can minimize distractions.

Pay attention to the workspace lighting and temperature. Choose a place where you can benefit from natural light and fresh air if it is possible, otherwise avoid fluorescent light. Use the tools that you use in a regular office at your home office; an ergonomic chair, a stable internet connection, a second monitor, supplies, notepad, and maybe headset.

As the next step, you need to explain to your family members that working at home doesn’t mean you are available for them at any time.

Also, the flexibility of working hours seems a striking feature of remote working. Of course, you can work in any way which is suited to you, but keeping up with the schedule would be more complicated if it is more flexible. It’s ok if you are not an early bird. On the other hand, you are not supposed to work all day long since your office is always available. Just be wise about your timing to prevent getting behind your schedule. It is essential to get into a routine about the work hours per day when to start and finish the work when to have lunch, dress appropriately, and keep the breaks short and refreshing.

If you are a remote developer of a team, be in constant communication with your coworkers, considering cultures and time zones difference. A video chat on Monday can help you to coordinate your weekly activities with those of your team members. A brief chat at the weekends can close the week more productive and friendly. Do not center on company topics in all your conversations. Build up your relationships as you do in a real office during your chats.

Your workspace can be a bit more inspiring using small plants. Enjoy your home office to boost your productivity as a remote developer and forget all anxiety caused by the Coronavirus pandemic. You are both safe at home and productive at work now.

Pros and cons of working remotely

If this is your first experience of remote working resulted from the Covid19 quarantine, take it easy. Many top companies offer remote job with employees spread across the world, too; The Theorem is a software development company and a diverse team of 5 continents around the world that creates software solutions for enterprise organizations and startups. You can find current openings of the company on https://theorem.co/careers . Hazelcast is also a big data, cloud-based solutions, enterprise software platform with the carrier opportunities here on https://hazelcast.com/company/careers/ . This platform helps businesses to build fast applications. Measuring how busy a location is in real-time, Density is a data & analytics, hardware & software engineering company offering remote opportunities on https://www.density.io/careers , and many others like Bluebolt, NAVIS, and Diagram. Just be aware of the pros and cons to gain the most advantage of this forced remote working

Advantages

  • You can work as you like and whenever you like. That sounds great!
  • You don’t have to live in a city.
  • You can break 9 to 5 to your desired times instead of continuous 8 hours of working. You’ll have a flexible schedule to work when you are more productive, according to your body clock.
  • You have a private and quiet environment for deep working (if you eliminate all possible distractions of home).
  • No everyday commute, a perfect time-saving way in the modern and busy life.
  • You can save on transportation costs.
  • If you are interested in knowing people with the various cultural background, it provides you with the chance.

Disadvantages

  • If you have young kids, it may be hard for them to understand that parents aren’t supposed to play with them while they are at home.
  • You need to master your remote work and self-discipline to prevent failure in your job. Getting behind is the consequence of inadequate time and schedule management, whether you work independently or as a team member.
  • Finding career growth opportunities may become hard if you lose social connections.
  • Time zones difference can reduce the flexibility of your schedule in collaboration with other team members.
  • Your team may forget about you if you do not establish an efficient connection with them.
  • If you get stuck, it takes more time to ask for a solution.
  • You may not have access to software & services that the company has provided
  • No more happy hours with coworkers. You may miss the chance to find your best friends.

How to start remote working?

At first, invest time to raise your skills if you wish to reach to a well-paid remote job. Learn more to keep pace with the programming world and keep updated about new technologies. Take advantage of useful websites to improve your basic programming knowledge. There are a lot of valuable tutorials like “CSS Grid Tutorial for Beginners“, ready to push you forward. Put your time on building your sample sites, apps, and programs that introduce you to earn trust. Be honest, and do your best. 

Welcome to the world of remote working!

CSS Grid Tutorial for Beginners

If you’re a web developer, you already know the importance of a reliable responsive web layout that works across different browsers. There are several ways to control your webpage layout; you can use tables, the box model, or CSS Flexbox.

But, in this beginner-level CSS grid tutorial, I’m going to introduce the method I find most efficient: CSS Grid.

What is CSS Grid?

Working with the gird is pretty straightforward. Just like Flexbox, the grid is a value you can set for the CSS display property. Therefore, once you set display: grid on an element, the browser will render a block-level box. The element’s children, known as grid items, will behave differently from the normal block and inline elements.

The CSS grid layout

The two major elements of a CSS Grid are “wrappers” and “items.” You only need a few simple lines of code to set up your grid. With the following code you’ll get a wrapper with six items inside it:

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Tip: You can force a grid container to behave like an inline-level box by setting display: inline-grid.

Columns and rows

To see the benefits of the grid, you need to start creating columns and rows. This is pretty simple to do:

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}
 

The values you assign to grid-template-columns and grid-template-rows will define the number of columns and rows in your layout, respectively.

The above code will result in a basic grid with three equal-width columns and two equal-height rows:

Now that you have a grid, you should learn how to modify it. This is where you realize how simple CSS Grid will make your job easier when creating layouts.

Grid gap

The grid-gap property lets you set the distance between the items. It will allow you to add margins to each item. You can use grid-column-gap and grid-row-gap to set the size of the gap you want between the items. Using the code below, all the gaps to have the same size:

 wrapper { 
 display: grid;  
grid-template-columns: 10rem 10rem 10rem;
grid-gap: 1rem;}
 

Sizing

You already set the column and row sizes in grid-template-column and grid-template-row, but to resize any single item from the grid, you can use the span property to spread one item across the width of the column. You should be aware of how this will affect the other items’ placing. Here is an example to better demonstrate this:

.item5 {  grid-column: span 2;}

Here, item5 is set to span across two columns.

You can use the same method for rows by using the grid-row property and span.

Placement

If you don’t like the blank spaces between your items, you can simply solve the problem by using grid-auto-flow: dense. The grid will check if the items fit and try to fill the gaps with any item that fits. For example, if we span the fifth item across three columns, we can add a seventh item and the grid-auto-flow will fit them together:

.wrapper { 
display: grid;  grid-template-columns: repeat(3, 10rem);  
grid-gap: 1rem; 
grid-auto-flow: dense;}
.item5 {  grid-column: span 3;}

As you see, the number of rows has changed even though we had previously set it. This property automatically modifies the placement of columns and rows to fit the items.

You can also use grid-column-start and grid-column-end to resize the items manually. This is simpler than the first approach, but you need to understand how grid lines work before you can use it.

The number of column lines is the number of columns plus one because the first line starts before the first column and the last line is after the last one. This image can help you understand how it works:

Here, item1 is expanded from the first column line to the fourth, which is the span of three columns. This can be done using this code:

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

You can achieve the same result, using the following code:

.item1 {  grid-column: span 3;}

If you don’t want to use the grid-auto-flow, you can try to manipulate your items manually using the grid-column-start and grid-column-end properties. Here is an output of a grid fit together using this method. Try and figure out the code that was used to create this CSS grid layout, as an exercise.

Grid values and functions

Those were the basics of CSS grid for beginners but now it’s time to learn a few cool CSS grid tricks. Fortunately, the grid gives you a lot of flexibility. You can use other values for grid-template-columns to create more complex structures:

  • Using grid-template-columns: min-content creates the smallest column possible without causing an overflow.
  • Using grid-template-columns: max-content creates a column with the maximum space required to display its content without wrapping.

You can see how the two values work in the image below:

You can set the maximum space that a column is allowed to take using the fit-content() function. The value is passed as an argument of the function:

grid-template-columns: fit-content(200px)

It’s also possible to use the repeat() function to avoid typing out the same value(s) over and over again. For example, the first line of code below creates twelve columns, each of which is 150 pixels wide. On the other hand, the second example fills the container with as many 150px columns as will fit and leaving a gap at the end, if any space remains.

grid-template-columns: repeat(12, 150px);
grid-template-columns: repeat(auto-fill, 150px);

Bottom line

The CSS Grid is an excellent tool for creating responsive layouts. After reading this beginner’s guide, now you have all the basic information you need to start using CSS Grid. As you saw in this CSS grid for beginners, working with the grid layout is easier than you think! Go ahead and practice what you’ve learned by creating great layouts.