WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 Flexible Box


CSS3 Flexbox

Flexible boxes, or flexbox, is another design mode in CSS3.

Use of flexbox guarantees that components carry on typically when the page design must oblige diverse screen sizes what's more, unique showcase devices.

For numerous applications, the adaptable box demonstrate gives an enhancement over the square model in that it doesn't utilize glides, nor do the flex holder's edges breakdown with the edges of its contents.


Browser Support

The numbers in the table determine the principal program form that completely underpins the feature.

Numbers pursued by - webkit-or - moz-determine the primary form that worked with a prefix.

Property
Basic support
(single-line flexbox)
29.0
21.0 - webkit-
12.0 11.0 22.0
18.0 - moz-
6.1 - webkit- 12.1 - webkit-
Multi-line flexbox 29.0
21.0 - webkit-
12.0 11.0 28.0 6.1 - webkit- 17.0
15.0 - webkit-
12.1

CSS3 Flexbox Concepts

Flexbox comprises of flex compartments and flex items.

A flex compartment is pronounced by setting the display property of a component to either flex (rendered as a square) or inline-flex (rendered as inline).

Inside a flex holder there is at least one flex items.

Note: Everything outside a flex holder and inside a flex thing is rendered obviously. Flexbox characterizes how flex things are spread out inside a flex container.

Flex things are situated inside a flex holder along a flex line. By default there is just a single flex line for every flex container.

The following precedent shows three flex things. They are situated by default: along the level flex line, from left to right:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex thing 1</div>
  <div class="flex-item">flex thing 2</div>
  <div class="flex-item">flex thing 3</div>
</div>

</body>
</html>

Try it yourself »

It is additionally conceivable to alter the course of the flex line.

If we set the direction property to rtl (ideal to-left), the content is attracted directly to left, and furthermore the flex line changes course, which will change the page layout:

Example

body {
    bearing: rtl;
}

.flex-holder {
    show: - webkit-flex;
    show: flex;
    width: 400px;
    tallness: 250px;
    foundation shading: lightgrey;
}

.flex-thing {
    foundation shading: cornflowerblue;
    width: 100px;
    tallness: 100px;
    edge: 10px;
}

Try it yourself »


Flex Direction

The flex-direction property determines the course of the adaptable things inside the flex compartment. The default estimation of flex-direction is row (left-to-right, top-to-bottom).

The different qualities are as follows:

  • row-reverse - If the composing mode (course) is left to right, the flex things will be spread out directly to left
  • column - If the composition framework is level, the flex things will be spread out vertically
  • column-reverse - Same as section, however reversed

The following precedent demonstrates the consequence of utilizing the row-reverse value:

Example

.flex-compartment {
    show: - webkit-flex;
    show: flex;
    - webkit-flex-bearing: push reverse;
    flex-heading: push reverse;
    width: 400px;
    tallness: 250px;
    foundation shading: lightgrey;
}

Try it yourself »

The following model demonstrates the consequence of utilizing the column value:

Example

.flex-holder {
    show: - webkit-flex;
    show: flex;
    - webkit-flex-course: column;
    flex-heading: column;
    width: 400px;
    stature: 250px;
    foundation shading: lightgrey;
}

Try it yourself »

The following model demonstrates the consequence of utilizing the column-reverse value:

Example

.flex-holder {
    show: - webkit-flex;
    show: flex;
    - webkit-flex-course: segment reverse;
    flex-bearing: segment reverse;
    width: 400px;
    stature: 250px;
    foundation shading: lightgrey;
}

Try it yourself »


The legitimize content Property

The justify-content property evenly adjusts the adaptable holder's things when the things don't utilize all accessible space on the fundamental axis.

The conceivable qualities are as follows:

  • flex-start - Default esteem. Things are situated toward the start of the container
  • flex-end - Items are situated toward the finish of the container
  • center - Items are situated at the focal point of the container
  • space-between - Items are situated with space between the lines
  • space-around - Items are situated with space previously, between, and after the lines

The following precedent demonstrates the aftereffect of utilizing the flex-end value:

Example

.flex-compartment {
    show: - webkit-flex;
    show: flex;
    - webkit-legitimize content: flex-end;
    legitimize content: flex-end;
    width: 400px;
    stature: 250px;
    foundation shading: lightgrey;
}

Try it yourself »

The following model demonstrates the aftereffect of utilizing the center value:

Example

.flex-holder {
    show: - webkit-flex;
    show: flex;
    - webkit-legitimize content: center;
    legitimize content: center;
    width: 400px;
    stature: 250px;
    foundation shading: lightgrey;
}

Try it yourself »

The following model demonstrates the aftereffect of utilizing the space-between value:

Example

.flex-holder {
    show: - webkit-flex;
    show: flex;
    - webkit-legitimize content: space-between;
    legitimize content: space-between;
    width: 400px;
    stature: 250px;
    foundation shading: lightgrey;
}

Try it yourself »

The following precedent demonstrates the aftereffect of utilizing the space-around value:

Example

.flex-compartment {
    show: - webkit-flex;
    show: flex;
    - webkit-legitimize content: space-around;
    legitimize content: space-around;
    width: 400px;
    tallness: 250px;
    foundation shading: lightgrey;
}

Try it yourself »


The adjust things Property

The align-items property vertically adjusts the adaptable compartment's things when the things don't utilize all accessible space on the cross-axis.

The conceivable qualities are as follows:

  • stretch - Default esteem. Things are extended to fit the container
  • flex-start - Items are situated at the highest point of the container
  • flex-end - Items are situated at the base of the container
  • center - Items are situated at the focal point of the holder (vertically)
  • baseline - Items are situated at the pattern of the container

The following model demonstrates the consequence of utilizing the stretch esteem (this is the default value):

Example

.flex-holder {
    show: - webkit-flex;
    show: flex;
    - webkit-adjust things: stretch;
    adjust things: stretch;
    width: 400px;
    stature: 250px;
    foundation shading: lightgrey;
}

Try it yourself »

The following model demonstrates the aftereffect of utilizing the flex-start value:

Example

.flex-holder {
    show: - webkit-flex;
    show: flex;
    - webkit-adjust things: flex-start;
    adjust things: flex-start;
    width: 400px;
    stature: 250px;
    foundation shading: lightgrey;
}

Try it yourself »

The following model demonstrates the aftereffect of utilizing the flex-end value:

Example

.flex-holder {
    show: - webkit-flex;
    show: flex;
    - webkit-adjust things: flex-end;
    adjust things: flex-end;
    width: 400px;
    tallness: 250px;
    foundation shading: lightgrey;
}

Try it yourself »

The following precedent demonstrates the consequence of utilizing the center value:

Example

.flex-compartment {
    show: - webkit-flex;
    show: flex;
    - webkit-adjust things: center;
    adjust things: center;
    width: 400px;
    tallness: 250px;
    foundation shading: lightgrey;
}

Try it yourself »

The following precedent demonstrates the consequence of utilizing the baseline value:

Example

.flex-compartment {
    show: - webkit-flex;
    show: flex;
    - webkit-adjust things: baseline;
    adjust things: baseline;
    width: 400px;
    tallness: 250px;
    foundation shading: lightgrey;
}

Try it yourself »


The flex-wrap Property

The flex-wrap property determines whether the flex things should wrap or not, if there isn't sufficient space for them on one flex line.

The conceivable qualities are as follows:

  • nowrap - Default esteem. The adaptable things won't wrap
  • wrap - The adaptable things will wrap if necessary
  • wrap-reverse - The adaptable things will wrap, if fundamental, in turn around order

The following model demonstrates the aftereffect of utilizing the nowrap esteem (this is the default value):

Example

.flex-compartment {
    show: - webkit-flex;
    show: flex;
    - webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    tallness: 250px;
    foundation shading: lightgrey;
}

Try it yourself »

The following precedent demonstrates the aftereffect of utilizing the wrap value:

Example

.flex-compartment {
    show: - webkit-flex;
    show: flex;
    - webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    tallness: 250px;
    foundation shading: lightgrey;
}

Try it yourself »

The following precedent demonstrates the consequence of utilizing the wrap-reverse value:

Example

.flex-compartment {
    show: - webkit-flex;
    show: flex;
    - webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    width: 300px;
    tallness: 250px;
    foundation shading: lightgrey;
}

Try it yourself »


The adjust content Property

The align-content property changes the conduct of the flex-wrap property. It is like align-items, however rather than adjusting flex things, it adjusts flex lines.

The conceivable qualities are as follows:

  • stretch - Default esteem. Lines stretch to take up the remaining space
  • flex-start - Lines are pressed toward the beginning of the flex container
  • flex-end - Lines are pressed toward the finish of the flex container
  • center - Lines are pressed toward the focal point of the flex container
  • space-between - Lines are uniformly disseminated in the flex container
  • space-around - Lines are uniformly disseminated in the flex holder, with half-measure spaces on either end

The following model demonstrates the consequence of utilizing the center value:

Example

.flex-holder {
    show: - webkit-flex;
    show: flex;
    - webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    - webkit-adjust content: center;
    adjust content: center;
    width: 300px;
    stature: 300px;
    foundation shading: lightgrey;
}

Try it yourself »


Flex Item Properties

Ordering

The order property indicates the request of an adaptable thing with respect to whatever remains of the adaptable things inside the equivalent container:

Example

.flex-thing {
    foundation shading: cornflowerblue;
    width: 100px;
    stature: 100px;
    edge: 10px;
}

.first {
    - webkit-request: - 1;
    request: - 1;
}

Try it yourself »

Margin

Setting margin: auto; will retain additional room. It very well may be utilized to push flex things into various positions.

In the accompanying precedent we set margin-right: auto; on the first flex thing. This will cause all the additional room to be assimilated to the directly of that element:

Example

.flex-thing {
    foundation shading: yellow;
    width: 80px;
    stature: 80px;
    edge: 10px;
}

.flex-item:first-tyke {
    edge right: auto;
}

Try it yourself »

Perfect Centering

In the accompanying model we will tackle a practically day by day issue: immaculate centering.

It is extremely simple with flexbox. Setting margin: auto; will make the thing flawlessly focused in both axis:

Example

.flex-thing {
    foundation shading: pink;
    width: 80px;
    stature: 80px;
    edge: auto;
}

Try it yourself »

align-self

The align-self property of flex things abrogates the flex holder's adjust things property for that thing. It has a similar conceivable qualities as the align-items property.

The following precedent sets diverse adjust self qualities to each flex item:

Example

.flex-thing {
    foundation shading: cornflowerblue;
    width: 60px;
    min-stature: 110px;
    edge: 10px;
}

.item1 {
    - webkit-adjust self: flex-start;
    adjust self: flex-start;
}
.item2 {
    - webkit-adjust self: flex-end;
    adjust self: flex-end;
}

.item3 {
    - webkit-adjust self: center;
    adjust self: center;
}

.item4 {
    - webkit-adjust self: baseline;
    adjust self: baseline;
}

.item5 {
    - webkit-adjust self: stretch;
    adjust self: stretch;
}

Try it yourself »

flex

The flex property characterize the length of the flex thing, with respect to whatever remains of the flex things inside the equivalent container.

In the accompanying model, the main flex thing will devour 2/4 of the free space, what's more, the other two flex things will devour 1/4 of the free space each:

Example

.flex-thing {
    foundation shading: cornflowerblue;
    edge: 10px;
}

.item1 {
    - webkit-flex: 3;
    flex: 3;
}

.item2 {
    - webkit-flex: 1;
    flex: 1;
}

.item3 {
    - webkit-flex: 1;
    flex: 1;
}

Try it yourself »