Scribd
Upload
83 views

CSS Flex

CSS Flex is used to create flexible containers and items. It allows easy manipulation of child item layout using properties like flex-direction, flex-wrap, and justify-content. Flexbox is used to build single directional row or column layouts using display: flex. Flex properties control the flex container like flex-direction and flex-wrap as well as flex items properties such as order, flex-grow, flex-shrink, and flex-basis which determine item size and ability to grow/shrink.

Uploaded by

kumarshravan66712
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
83 views

CSS Flex

CSS Flex is used to create flexible containers and items. It allows easy manipulation of child item layout using properties like flex-direction, flex-wrap, and justify-content. Flexbox is used to build single directional row or column layouts using display: flex. Flex properties control the flex container like flex-direction and flex-wrap as well as flex items properties such as order, flex-grow, flex-shrink, and flex-basis which determine item size and ability to grow/shrink.

Uploaded by

kumarshravan66712
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 8

CSS FLEX

By Sahana
CSS FLEX is used to create a flexible container that can hold a set of flexible items. The flex container
allows you to easily manipulate the layout of its children using various properties such as flex-
direction, flex-wrap, and justify-content.

Flexbox is used to build single directional layout in CSS ( either row or column ) at a time. The flex
box in CSS Layout Design is built using display: flex property.
FLEXBOX PROPERTIES

Properties of flex container Properties of flex items


1.flex-direction 1. order
2.flex-wrap 2. flex-grow
3.flex-flow 3. flex-shrink
4.justify-content
4. flex-basis
5.align-items
5. flex
Flex Direction
Flex Direction property is given to flex container to change direction of flex items.
By default, flex direction is row.

Flex Directions value


1.row ( default)
2.row-reverse
3.column
4.column-reverse

Flex Wrap
Flex items will always fit in one row even if content is more. flex wrap is used to
allow items to wrap in next line or wrap in reverse direction.
Flex Wrap values
5.nowrap ( default)
6.wrap ( wrap to next line)
7.wrap-reverse ( multiple line but in reverse from bottom to top )
Flex Flow
Flex flow is the shorthand for flex-direction and flex-wrap properties. The default value is row nowrap.

(Flex-direction) +(Flex-wrap)

Justify Content
Justify-content property is used to justify content in main axis. This can adjust items to left, center, right
or add space in between.

1.flex-start (default)
2.flex-end
3.center
4.space-between
5.space-around
6.space-evenly
Align Items
Align-items property define the behavior of flex item laid out across cross axis. By-default, the value
is stretch.
Values of align-items
1.flex-start
2.flex-end
3.Center
4.stretch

PROPERTIES OF FLEX ITEMS


ORDER
Order property of flex item set the order in which they appear in parent container. The value of order
is always a number. Order can be positive or negative.
By default all flex items are in order of document flow.
FLEX-BASIS
Flex works very similar to the width property when the flex-direction is row but what
makes flex-basis unique from width is that it corresponds to the current flex axes. Flex-
basis affects an element’s size across the main axis. Flex-basis thus alternately determines
width or height, depending on flex-direction

FLEX GROW
Flex-grow, the default is 0. That means the squares are not allowed to grow to take up the space in
the container.
Above 0 the flex items collectively take up the entire width of the container, with the space evenly
distributed among them based on the value provided. The flex-grow value overrides the width.
As a final note, remember that just like flex-basis, flex-grow applies across the main axis.
FLEX SHRINK
Flex-shrink is the opposite of flex-grow, determining how much a square is allowed to shrink.
It only comes into play if the elements must shrink to fit into their container — i.e. when the
container is just too small.
Its main use is to specify which items you want to shrink, and which items you don’t. By default,
every square has a flex-shrink of 1 — which means it will shrink as the box contracts.

Flex
Flex is shorthand for grow, shrink, and basis — all put together in the same order.
It defaults to 0 (grow) 1 (shrink) and auto (basis).

You might also like