Recent Comments
No comments to show.
Tag Archives: flexbox
The flex Property
DEFAULTS: flex-grow: 0; flex-shrink: 1; Allows flexbox to shrink elements as needed. flex-basis: auto; Instead of using the width property in flex, we use flex-basis. As shown in the following picture, if I set the flex-basis to 65 pixels, then … Continue reading
Spacing and Aligning Flex Items
display: flex; align-items: center; * justify-content: flex-start; * (This is the default. As you can see everything is pushed to to left margin.) * Two of the most important properties that apply to the flex container. Another one is gap. … Continue reading
A Flexbox Overview
What is Flexbox? Flexbox is a set of related CSS properties for building 1-dimensional layouts. The main idea behind flexbox is that empty space inside a container element can be automatically divided by its child elements. Flexbox makes it easy … Continue reading
Introduction to Flexbox
If you have a lot of divs or paragraphs before you define flexbox it might look like this: Adding the following to the container changes the above to this: .container { display: flex; } Everything is now side by side … Continue reading
The 3 Ways of Building Layouts
LAYOUT Layout is the way text, images and other content is polace and arranged on a webpage. Layout gives the page a visual structure, into which we place our content. Building a layout: arranging page elements into a visual structure, … Continue reading