Elevate Your Artistic Creativity with Flexbox
A Beginner Entry into Flexbox.
Top-secret cleared technical writer. Driven by ethics and quality contents to provide high-grade results, I feel the ability to listen is foremost in the ability to write as the details (or lack of), make the document.
Streamlined, easy-to-follow guides are a specialty that I have enhanced to a variety of audiences in my career. I'm comfortable collaborating with multiple teams or working alone on tight deadlines. Adding to the skill set is personal enjoyment, as writing is something I hold a passion for. I have always enjoyed knowing I can help people with my work.
After having a basic understanding of HTML and CSS, you have the bedrock for a lot of design potential right next to you. However, that’s not the end of the road for the tools available to you. Having a good knowledge of the concepts and power of Flexbox will surely take you further.
What exactly is Flexbox?
Where basic CSS will let you style a webpage, Flexbox on the other hand adds in its namesake by giving the webpage the option of flexibility. Think of Flexbox as a way to have extended ease for organized control on the layout of a webpage. Flexbox is not meant for the entire page design, but rather contained element design in a single dimension, (row or column).
To give you an understanding of how the idea works, picture a box on the page. This box will contain the items or elements you place within it. These are your flex items. The flex items themselves will be placed on organized rows or columns. Consider your items being contained within a table of sorts. The items contained can now take definition from flex context, Directly put, this gives you a strong ease of control on how to display the content itself.
Why bother with Flexbox so early on?
As noted, Flexbox gives you another tool for design. More than that it allows for better ease of that design. As an emerging web developer, you are bound to run into some share of hair-pulling issues that draw valuable time from progress. While not go with the perfect option, Flexbox does provide a direct solution to matters of specific alignment issues that you may come across.
How do I get started with Flexbox?
Since Flexbox's original designs in early 2009, it has become widely used and accepted by web developers.
To get started, you simply need to learn the syntax as you possibly did with HTML and CSS. There is no need to use or switch to a new code editor. Many of the popular editors will either already have support for the syntax or have plugins readily available.
With the knowledge that a modern browser is ready for your designs and your code editor of choice is up to the task, let's start diving into Flexbox concepts right away!
Flexbox in action
One of the most direct pickup methods used to learn Flexbox was by styling a basic site navigation element It’s a common use case for Flexbox and a great introduction to basic syntax itself. In the example below, you can see a quick navigation element setup in HTML.
<nav class=”navigator”>
<div id=’home’><h2>Home<h2></div>
<div id=’menu’><h2>Menu<h2></div>
<div id=’events’><h2>Events<h2></div>
<div id=’contact’><h2>Contact<h2></div>
<div id=’’><h2><h2></div>
</nav>
This will be the output of on the page (some very basic styling was applied for visual ease)
We can move over to the CSS to apply the Flexbox syntax to get started.
.navigator{
display: flex;
}
This simple entry now changes the navigation element to appear like this:
You are going to notice that the individual divs were able to contain themselves in a more manageable form. Consider the elements on a line here. This is the default setup when you apply no other arguments to the flex option. The items are arranged in the “flex-start” position. Each element is packed into the start of the line. You can see this modified when you apply the justify-content option “flex-end” as seen below in the CSS.
.navigator{
display: flex;
justify-content: flex-end;
}
Notice the divs were moved to the end of the “line” as opposed to the front as you saw above. You can utilize other options to the justify-content area for alignments that fit your design needs. Take a look at these other options and how they appear on the page.
justify-content: center
justify-content: space-around
justify-content: space-between
As you can see, with just a simple switch of light syntax, the position, alignment, and general appearance of the navigation element was changed. These changes were all done within the span of a few minutes. While the provided example does not win any design awards, it does show just how easy modifying designs can be with the use of Flexbox.
Where Do I Go From Here?
Where Do I Go From Here? Flexbox can be an amazing tool in your web-dev toolkit. The concepts covered in this very brief introduction are just the proverbial tip. There is much more you can accomplish with the other options Flexbox provides. I encourage you to explore the deeper concepts available to see where these abilities fit your designs. Note that while Flexbox provides some amazing avenues for designers, it is not always the best go-to tool. Other options like CSS Grid enable truly awesome frameworks to build responsive and beautiful sites. I like to champion the idea that there is not a definite one over the other use for Grid or Flexbox. I would instead like to encourage you to understand the “why” over the “how” of the tools to use. It’s a wide world of tech out there, don’t limit yourself.
