- 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;
}
flexbox-order
- 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;
}
flexbox-flex-grow

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;
}
flexbox-flex-basis

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;
}
flexbox-flex-shrink

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;
}
flexbox-flex

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: - 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-align-self

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

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
CSS3 Flexbox Item

Last accessed pages

  1. String Object (415)
  2. Detect when page visibility state is changed (64)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (52162)
  4. HTML Course - Free Lessons (10923)
  5. Register and show online users and visitors (22293)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (369)
  2. Register and show online users and visitors (344)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (311)
  4. Insert, Select and Update NULL value in MySQL (247)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (244)