CSS3 Flexbox Item

Css Course

- flex-grow
- flex-basis
- flex-shrink
- flex
- align-self
- Flexbox Playground

Flexbox item properties

- The css3 flexbox item properties presented bellow are applied to the item child inside flex container.

order

The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container. It takes integer value (-2, -1, 0, 1, 2, ..). Default value is 0, and increasing or decreasing it from there moves the item to the right or left, respectively.

.flex-item {
 order: -1;
}

flex-grow

The flex-grow specifies how much the item will grow relative to the rest of the flexible items inside the same container. It takes positive number value (0, 1, 2, ..). Default value is 0.
- In the following code, the second flex item takes up three times more space than the rest:

.item:nth-child(2) {
 flex-grow: 3;
}

flex-basis

The flex-basis specifies the initial length of a flexible item. Default value auto.
- In the following code, flex-basis is specified for the 4th flex item and dictates the initial size of the element:

.container .item {
 flex-basis:auto;
}

.container .item:nth-child(4) {
 flex-basis: 350px;
}

flex-shrink

The flex-shrink specifies how the item will shrink relative to the rest of the flexible items inside the same container. It takes positive number value (0, 1, 2, ..). Default value is 1.
- In the following code, the second flex item shrinks three times more than the rest:

.container .item {
 flex-basis: 100px;
}

.container .item:nth-child(2) {
 flex-shrink: 3;
}

flex

The flex-shrink property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties. Default value is: 0 1 auto.
- In the following example, the second flexbox item grows twice more than the rest of items, with a flex-basis of 150px. The value for flex-shrink it is not added, so it remains its default value (1).

.container .item:nth-child(2) {
 flex: 2 150px;
}

align-self

The align-self property specifies the alignment for the selected item inside the flexible container. It overrides the flexible container's align-items property.
- align-self values:

• auto - (default) The element inherits its parent container's align-items property.
• stretch - The element is positioned to fit the container.
• flex-start - Item is positioned at the top of the container.
• flex-end - Item is positioned at the bottom of the container.
• center - Item is centered in the vertical axis.
• baseline - The element is positioned at the baseline of the container.

- Example, the 3rd and 4th flex items have overridden alignment through the align-self property:

.container {
 align-items: flex-start;
 display: flex;
 height:90px;
 width: 400px;
}

.container .item:nth-child(3) {
 align-self: stretch;
}

.container .item:nth-child(4) {
 align-self: center;
}

Result:

Flexbox Playground

Here's a flex playground where you can combine and play with several css flex properties. Test css3 flexbox properties for container and each of its child-items.

/* Flexbox Container Properties */
.container {
display: flexinline-flex;
flex-direction: rowrow-reversecolumncolumn-reverse;
flex-wrap: nowrapwrapwrap-reverse;
justify-content: flex-startflex-endcenterspace-betweenspace-aroundspace-evenly;
align-items: stretchflex-startflex-endcenterbaseline;
align-content: stretchflex-startflex-endcenterspace-betweenspace-around;
margin:2px;
padding:3px;
height: auto40px100px200px;
width: auto25%50%75%100%300px500px800px;
}

/* Flexbox Item Properties */

Demo:

First line ...<br>
Other line...

#id {
  letter-spacing: 2px;
}

var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);

echo "Address URL: http://CoursesWeb.net";