WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 Flexible Box


Flexible boxes are a new layout mode for CSS3.

CSS3 Flexible Box (flexbox or flexbox) is a layout method to ensure that elements have proper behavior when the page needs to adapt to different screen sizes and device types.

The purpose of introducing a flexible box layout model is to provide a more efficient way to arrange, align, and allocate blank space for child elements in a container.

CSS3 Flexbox

The numbers in the table indicate the version number of the first browser that supports this attribute.

-Webkit- or -moz- immediately following the number is the prefix for the specified browser.

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

Flexible box consists of flex container and flex item.

A flexible container is defined as a flexible container by setting the value of the display property to flex or inline-flex.

The flex container contains one or more flex child elements.

Note: Outside the flexible container and inside the flexible child elements are rendered normally. Flexible boxes only define how flexible child elements are laid out in a flexible container.

Elastic child elements are usually displayed on a single line in a flexible box. By default there is only one line per container.

The following elements show flexible child elements displayed in one 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 »

Of course we can modify the arrangement.

If we set direction The attribute is rtl (right-to-left), the arrangement of the flexible child elements will also change, and the page layout will also change:

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

flex-direction attribute specifies the position of the flex child element in the parent container.

Syntax

  flex  -  direction  :   row   |   row  -  reverse   |   column   |   column  -  reverse  
The values ​​of

flex-direction are:

  • row: horizontally from left to right (left-aligned), the default arrangement.
  • row-reverse: reverse the horizontal arrangement (right-aligned, from back to front, with the last item at the front.
  • column: Arrange vertically.
  • column-reverse: reverse the vertical arrangement, from back to front, with the last item at the top.

The following example demonstrates the use of row-reverse :

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 »


justify-content property

The justify-content attribute is applied to the elastic container to align the elastic items along the main axis of the elastic container.

justify-content has the following syntax:

justify-content: flex-start | flex-end | center | space-between | space-around

Analysis of individual values:

  • flex-start:

    Flexible items are populated next to the line. This is the default value. The main-start margin edge of the first elastic item is placed on the main-start edge of the line, and subsequent elastic items are placed in parallel.

  • flex-end:

    Flex items are padded to the end of the line. The main-end margin edge of the first elastic item is placed on the main-end edge of the row, and the subsequent elastic items are placed flush.

  • center:

    Flexible items are centered and filled next. (If the remaining free space is negative, the flex item will overflow in both directions at the same time).

  • space-between:

    The elastic items are evenly distributed on this line. If the remaining space is negative or has only one flex term, this value is equivalent to flex-start. Otherwise, the margin of the first elastic item is aligned with the main-start edge of the line, and the margin of the last 1 elastic item is aligned with the main-end edge of the line, and then the remaining elastic items are distributed on the line, adjacent Items are equally spaced.

  • space-around:

    Flexible items are evenly distributed on the line, leaving half space between the two sides. If the remaining space is negative or has only one flex term, this value is equivalent to center. Otherwise, the flexible items are distributed along the line, and they are equally spaced from each other (for example, 20px). At the same time, there is a half space between the front and rear sides and the flexible container (1/2 * 20px = 10px).

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 »