CSS3 Flexbox Item

- 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.

float, clear and vertical-align have no effect on a flex item, and do not take it out-of-flow.

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.

Setting margin: auto; will absorb extra space. It can be used to push flex items into different positions, and perfectly centered it in both axis.

.flex-item {
 order: -1;
}

- To swap places between first and last flex item, use a code like this:

.item:first-child {
 order:1;
}
.item:last-child {
 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.

flex: flex-grow flex-shrink flex-basis;

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: ;
flex-direction: ;
flex-wrap: ;
justify-content: ;
align-items: ;
align-content: ;
margin:2px;
padding:3px;
height: ;
width: ;
}

/* Flexbox Item Properties */

Demo:

- Content Before..

Flexbox examples.

- Content After..

<<-CSS3 Flexbox Container -- CSS Content->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to add lists into <ul> and <ol> elements?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>

Which value of the "display" property creates a block box for the content and ads a bullet marker?

block list-item inline-block

.some_class {
  display: list-item;
}

Which instruction converts a JavaScript object into a JSON string.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicate the PHP class used to work with HTML and XML content in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net