" Start your business on internet, we are here to help you "

We are Software Development and Technical Service providing company from kathmandu Nepal. We use latest technologies to fulfill your requirements

Flexbox : CSS3

CSS     Published at 3 months ago    Arjun Ghimire

Flexbox : CSS3

BACKGROUND

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

# display

This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.

.container {

      display: flex; /* or inline-flex */

}

 

# flex-direction

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

.container {

       flex-direction: row | row-reverse | column | column-reverse;

}

 

# flex-wrap

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

.container{

      flex-wrap: nowrap | wrap | wrap-reverse;

}

 

# justify-content

This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

.container {

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

}

 

# align-items

This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-contentversion for the cross-axis (perpendicular to the main-axis).

.container {

         align-items: flex-start | flex-end | center | baseline | stretch;

}

 

# align-content

This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

.container {

         align-content: flex-start | flex-end | center | space-between | space-around | stretch;

}

 

# order

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

.item {

      order: <integer>;

}

 

# flex-grow

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

 

.item {

        flex-grow: <number>; /* default 0 */

}

 

# flex-shrink

This defines the ability for a flex item to shrink if necessary. Negative numbers are invalid.

.item {

       flex-shrink: <number>; /* default 1 */

}

 

# flex-basis

This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property" (which was temporarily done by the main-size keyword until deprecated). The content keyword means "size it based on the item's content" - this keyword isn't well supported yet, so it's hard to test and harder to know what its brethren max-contentmin-content, and fit-contentdo.

If set to 0, the extra space around content isn't factored in. If set to auto, the extra space is distributed based on its flex-grow value.

.item {

       flex-basis: <length> | auto; /* default auto */

}

# flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto.

.item {

        flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

}

# align-self

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

Please see the align-itemsexplanation to understand the available values.

.item {

        align-self: auto | flex-start | flex-end | center | baseline | stretch;

}

Thank You

 

To Top