Scribd
Upload
107 views

What Is Flexbox?: How Does It Work?

The document provides an overview of CSS layout techniques including flexbox, grid, responsive design, and media queries. It explains that flexbox helps with layout challenges and defines parent and child flex elements. Grid uses columns and rows to position elements. Responsive design adapts to different screensizes using media queries with common breakpoints listed. Font Awesome and Bootstrap are tools that add icons and responsive grid systems, respectively, to improve layouts. The recap emphasizes using HTML, CSS, responsive design, external tools, and JavaScript for dynamic functionality. The objectives are to reproduce the docplanner website using HTML and CSS based on instructions and additional learning resources provided.

Uploaded by

Achraf Sallem
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
107 views

What Is Flexbox?: How Does It Work?

The document provides an overview of CSS layout techniques including flexbox, grid, responsive design, and media queries. It explains that flexbox helps with layout challenges and defines parent and child flex elements. Grid uses columns and rows to position elements. Responsive design adapts to different screensizes using media queries with common breakpoints listed. Font Awesome and Bootstrap are tools that add icons and responsive grid systems, respectively, to improve layouts. The recap emphasizes using HTML, CSS, responsive design, external tools, and JavaScript for dynamic functionality. The objectives are to reproduce the docplanner website using HTML and CSS based on instructions and additional learning resources provided.

Uploaded by

Achraf Sallem
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Getting the right displaying context, and managing layout can be so annoying to any web

developer. But it’s a necessity and we have to deal with it !

Luckily, the flexbox has came to solve this problem. That’s what we are going to learn during this
skill. Here is an overview:

 What’s the flexbox?


 The display flex.
 The css position.
 The css grid.

What is flexbox?
Flexbox has a technical definition. For the sake of this course, I’ll skip the technicalities.
You may see flexbox as the layout ninja for CSS.
When you need to deal with the layout in your styles, the CSS Flexbox model is likely to be your
best bet.

How does it Work?

Flexbox is kicked off by making a parent element a flex container.

Column and Row


By default, flex items are laid out in the source order. Think of flex items as primarily laying out
either in horizontal rows or vertical columns.,

So if we want to have Rows or Columns you apply these :


Justify content
It defines the alignment along the main axis.
It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or
are flexible but have reached their maximum size
Flex-wrap:
One of flex’s properties is that by default, items will all try to fit into one line.
You can change that and allow the items to wrap as needed. So we have two choices , if we want
them to be in one line or move to another line.
Align-items:
This defines the default behavior for how flex items are laid out along the cross axis on the
current line. Think of it as the justify-content version for the cross axis.
Align content:
What if now we have multiple line of content and we want to make it aligned, we use the align
content,
P.S: this property has no effect when there is only one line of flex items
Static position
The Static Position is the default positioning for all the elements on a web page.
They are just objects within the scene until you get them to be a part of a positioning context.

Static means elements are static to the flow . If one moves, another will move as well.
CSS grid system
Every website or application layout you make (or have seen) is essentially boxes placed within
certain defined boundaries.

In very simple terms, a grid is just horizontal and vertical lines that define the placement of other
design elements.

In the context of the CSS Grid layout, a grid container is a parent that contains all the items in the
grid. The Grid container defines the initial placement of the grid lines, both vertical and horizontal.
Column and Row
So we have to define columns and rows,because a grid without columns and rows is kind of
pointless.

To create columns and rows within a grid container, you use the two new CSS properties: grid-
template-columns and grid-template-rows.

So how do you use these? Pretty simple.

grid-template-columns defines the placement of the columns while grid-template-


rows defines the placement of the rows within the grid container.

All we need is to pass in the length into these properties,

 The CSS code would be :

.grid-container {

display: grid;

grid-template-columns: 100px 200px 300px;

grid-template-rows: 100px 200px 300px;

}
Properties for the grid items
We have :
grid-column-start/grid-row-start is the line where the item begins
grid-column-end/grid-row-end is the line where the item ends.

What is responsive design?


Responsive web design is an approach whereby a designer creates a web page that “responds
to” or resizes itself depending on the type of device it is being seen through.
That could be an oversized desktop computer monitor, a laptop or devices with small screens
such as smartphones and tablets.

Responsive Web design has become an essential tool for anyone with a digital presence. With
the growth of smartphones, tablets and other mobile computing devices, more people are using
smaller-screens to view web pages.

What is media query?


Media queries are at the heart of responsive design. They let you target specific screen sizes and
specify css rules that will be executed on that screen.

The most popular form in which media queries are used is something called the @media rule.

 The CSS code would be :

@media screen and (max-width: 300px) {

/* write your CSS in this code block */

Media query breakpoints


What is a breakpoint?
CSS breakpoints are points where the website content responds according to the device width,
allowing you to show the best possible layout to the user.

These are the most used breakpoints:

/* Extra small devices */

@media (max-width: 576px) { /* ... */ }

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) and (max-width: 768px) { /* ... */ }

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 992px) { /* ... */ }

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1200px) { /* ... */ }

/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) { /* ... */ }

Font-Awesome
Well, we will be sharing with you some helpful and useful resources to make your web page look
“Awesome”.
For that, lett’s meet Font-Awesome ! It is the most popular way to add font icons to your website.
Font Awesome icons are created using scalable vectors, so you can use high quality icons that
work well on any screen size.
How to use it?
First, we add the following line inside the < head > section of your HTML page:

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">

Then, to display cool icons we simply use the documentation you will find
in https://fontawesome.com/, you will find everything you will need , Here’s an example:

 The HTML code would be :

<i class="fa fa-car"></i>

<i class="fa fa-car" style="font-size:48px"></i>

<i class="fa fa-car" style="font-size:60px; color:blue"></i>

 The output would be :


Bootstrap grid system
One of Bootstrap’s important assets is that it makes your website responsive using its grid system
The main idea behind bootstrap is to divide the screen into twelve equal columns, by doing that it
gives us a new unit that work independently from the screen size.

There are four types of resolutions (or classes) in bootstrap:

 xs (for phones - screens less than 768px wide)


 sm (for tablets - screens equal to or greater than 768px wide)
 md (for small laptops - screens equal to or greater than 992px wide)
 lg (for laptops and desktops - screens equal to or greater than 1200px wide)

Bootstrap classes
As we already mentioned, Bootstrap is a massive collection of reusable and versatile pieces of
code which are written in CSS, HTML and JavaScript,With that,developers have a range of
components at their disposal, which can be used on to the website. These include, but are not
limited to:

 Drop-down menus
 Navigation bars
 Progress bars
 Thumbnail images

Let’s get to discover some of these free tools.


CSS Layout RECAP
By now, we have learned :
How to create a web page using html, how to give some style using css.
How to use some external useful tools like bootstrap, Font-Awesome...Etc.
How to make our web pages responsive.

However, you can’t help but notice that something is missing. The web page is lacking certain
functions like a search box or options to comment. Right now the body, with all its accessories,
looks more like a mannequin in a store window than a real human being. That’s where JavaScript
comes in.

Let’s learn more about Javascript in the net Super skill.

OBJECTIVES
In this checkpoint we are going to reproduce the docplanner  website using html and
css, here is a link to the site.

Take a look at the instructions you will find some help

INSTRUCTIONS

1. So now go and reproduce the webpage.


2. This video might help you understand a little better how to divide your website
using divs : link
3. Here you can find the best practices in HTML : link

https://www.themelocation.com/best-html5-practices/

You might also like