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.
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
What attribute makes a radio button or checkbox input selected?
checked="checked" selected="selected" disabled="disabled"
<input type="checkbox" name="a_name" value="value" checked="checked" />
What CSS value scales the background image to the largest size contained within the element?
repeat-x contain linear-gradient
#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}
What operator is used to determine the rest of the division of two numbers?
% * /
var rest8_7 = 8 % 7;
alert(rest8_7);
Indicate the PHP function that rounds a number up to the next highest integer.
floor() ceil() abs()
$nr = ceil(3.5);
echo $nr;        // 4
CSS3 Flexbox Item

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (109107)
  2. Using the Bone Tool (3385)
  3. Area and Perimeter Calculator for 2D shapes (7977)
  4. Disable button and Enable it after specified time (9934)
  5. Register and show online users and visitors (34834)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (62)
  2. JavaScript Course - Free lessons (43)
  3. Read Excel file data in PHP - PhpExcelReader (43)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (38)
  5. HTML Course - Free Lessons (37)