Scribd
Upload
72 views

Flexbox Cheatsheet Novadesigns

The document discusses the basics of flexbox including flex-direction, align-items, justify-content, flex-wrap, order, flex-grow, flex-shrink, and flex-basis. It also promotes additional flexbox learning resources and offers website design services.

Uploaded by

ablotoi46
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
72 views

Flexbox Cheatsheet Novadesigns

The document discusses the basics of flexbox including flex-direction, align-items, justify-content, flex-wrap, order, flex-grow, flex-shrink, and flex-basis. It also promotes additional flexbox learning resources and offers website design services.

Uploaded by

ablotoi46
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

@NOVADESIGNS

FLEXBOX IS EASY
Flexbox, short for "Flexible Box," is a layout
model in CSS designed for building dynamic and
responsive user interfaces.

NOVADESIGNS
FLEX-DIRECTION
determining the direction in which its
flex items are placed

flex-direction: row flex-direction: column


ALIGN-ITEMS
define how flex items are aligned along
the X axis

align-items: start align-items: center align-items: end

COLUMN
ALIGN-ITEMS
define how flex items are aligned along
the Y axis

align-items: start align-items: center align-items: end

ROW
ALIGN-ITEMS
define how flex items are aligned along
the cross axis

align-items: strech
JUSTIFY-CONTENT
define how flex items are aligned along
the Y axis

justify-content: start justify-content: center justify-content: end

COLUMN
JUSTIFY-CONTENT
define how flex items are aligned along
the X axis

justify-content: start justify-content: center justify-content: end

ROW
JUSTIFY-CONTENT
evenly distribute the available space
along the main axis

justify-content: justify-content: justify-content:


space-between space-evenly space-around
FLEX-WRAP
control whether the flex container should
wrap its items onto multiple lines or not

flex-wrap: no-wrap flex-wrap: wrap


ALIGN/JUSTIFY-
SELF
control whether the flex container should
wrap its items onto multiple lines or not
ORDER
specify the order in which flex items are
displayed within a flex container

red-box{ order: 1 }; red-box{ order: 3 };


FLEX-GROW
determines how a flex item grows relative to the
other flex items in the same flex container

default
FLEX-SHRINK
define how a flex item should shrink relative
to the other flex items in the flex container

default
FLEX-BASIS
used in flexbox layouts to set the initial size of a flex item along
the main axis before any remaining space is distributed.

flex-basis: 250px

ROW

COLUMN
NEED MORE?
@NOVADESIGNS

You can practice your FLEXBOX skills


in our YT Channel: NOVA DESIGNS

If you need a custom website, you can message us on:


[email protected]

You might also like