iStock Promo Codes To Start:
For starters, let’s say you have a promo code from a site like Coupon Feed all ready to save you a bunch of money on stock photos. But you need to get a few things straight first.
As a web designer, you’re probably familiar with CSS and what it can do for your web pages. However, web design is a dynamic, evolving medium. It takes more than a photo offer code, to make a state-of-the-art website.
Just a few short years ago, you were probably content using tables and never saw the need for anything else. In 2019, it would be foolish to design a website with tables. CSS is easier and more flexible to use, and CSS3’s Flexbox offers more control than ever before, allowing you to create professional-looking, fluid designs with just a few lines of code.
What Is Flexbox?
Flexbox is short for CSS3’s Flexible Box Layout module. It is a relatively new set of properties within the CSS3 library that allows web designers to create flexible layouts with ease. In layman’s terms, if you have a box on your web page that changes size, Flexbox will change elements within that box to best fit using parameters you specify. This is extremely valuable in today’s world where web materials are often presented on an array of screen sizes, from tiny portrait-mode smartphones to massive landscape-mode commercial displays.
What Browsers Support Flexbox?
One of the best aspects of Flexbox is its wide browser support. The latest specifications are supported by:
. Firefox 28+
. Internet Explorer/Microsoft Edge 11+
. Chrome 29+
. Opera 17+
. Safari 6.1+ (using the -webkit- prefix)
. iOS 7.1+ (again using -webkit-)
. Android 4.4+
How Does Flexbox Work?
Flexbox works by defining a container as flexible. This is accomplished through the CSS declaration display: flex. To do this, use the following code:
#my-container
display: flex;
When this parameter is applied to a container, the child elements within become flex items. Flex items will move and redraw according to the size and shape of the parent container and properties set in your CSS stylesheet.
Containers with display:flex; applied have a main axis and a perpendicular cross axis. Each of these has a set of properties that define how child flex items are laid out along them in relation to one another.
Changing Layout With Flex-Direction
By declaring flex-direction you can control whether a list of elements is displayed horizontally or vertically. You can easily accommodate a variety of screen sizes by blending media queries and the flex-direction property. To do this, simply add flex-direction: column to your media query for smartphones and other small screens, or flex-direction: row for desktops and larger sized screens. It’s important to note that flex-direction’s default value is row, so elements will appear horizontal if not otherwise specified.
An example of code for smartphones is:
@media screen and (max-width: 480px)
#my-container
flex-direction: column;
You can also use the specifications row-reverse and column-reverse. These accomplish exactly what their names imply. Flex-direction: row-reverse will display your flex items from right to left. Column-reverse will display them from bottom to top.
In addition to laying flex element out along a single horizontal or vertical line, you can use flex-wrap to wrap large numbers of flex elements into a number of rows or columns. The default value is nowrap.
Here is a sample of flex-wrap code:
#my-container
display: flex;
flex-direction: row;
flex-wrap: wrap;
Changing Size of Flex Items With Flex-Grow and Flex-Shrink
Flex-grow and flex- shrink are two more exciting Flexbox parameters. They work in conjunction with flex-basis to control the relative sizes of your flex items depending on screen size. Flex-basis is the baseline size of a flex item. It is declared as flex-basis: any pixel, em, or % amount, e.g., flex-basis: 300px;. This means if you have two flex items and your parent container is 600px wide, each flex item will have a width of 300px.
If the size of your parent container changes,flex-grow and flex-shrink are applied. Flex-grow controls a flex item’s amount of enlargement, relative to other flex items, if screen size offers more space. You set flex-grow in positive numbers only, e.g., flex-grow: 1;. Flex-shrink is the exact opposite and controls the amount an item will reduce in size, relative to other flex items when the screen size is too small for them to be the flex-basis value. Again you declare it only in positive numbers, e.g., flex-shrink: 1;.
Using these properties can open powerful layout possibilities as the flex-grow and flex-shrink values can be different for each flex item. For example, you could set your flex-grow property to 1 for all flex items. This means as screen size grows, all flex items enlarge by the same amount. In contrast, you could set one item to flex-grow: 1; and another to flex-grow: 2;. This will tell the second item to grow to twice the size of the first when screen space permits. Obviously, flex-shrink accomplishes the exact reverse.
Here’s a sample of code to grow your second child item to twice the size of the first:
@media screen and (min-width: 930px)
#my-container
display: flex;
.child-flex-item-1
flex-grow: 1
flex-basis: 300px;
.child-flex-item-2
flex-grow: 2;
flex-basis: 300px;
Hopefully, you are beginning to see how CSS3’s Flexbox can help you design responsive web pages. To learn more about Flexbox, check out the next article in this series, “CSS3 Flexbox for Beginners — Part 2.”