- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- Flexbox playground

Flexbox (or Flexible boxe) is a new layout mode in CSS3, intended to accommodate different screen sizes and different display devices.
The flexible box model does not use floats, nor do the flex container's margins collapse with the margins of its contents.
Flexbox gives us complete control over the alignment, direction, order, and size of our boxes.

Flexbox layouts
- This tutorial presents examples and css3 properties for the Flex container.

Creating a flexbox container

Flexbox consists of flex containers and flex items.
To define a flex container, set the display property of an element to flex (rendered as a block) or inline-flex (rendered as inline).
Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.
<style>
.container {
display: ; /* or: inline-flex */
margin:2px;
padding:3px;
}
.container .item {
background:#ccccfe;
margin:2px;
}
</style>

- Content Before..
<div class='container'>
 Parent content.
 <div class='item'>Child 1</div>
 <div class='item'>Child_2</div>
 <div class='item'>Child-3</div>
</div>
- Content After..
Result:
- Content Before..
Parent content.
Flex item #1
Child 2
Flexbox child 3
- Content After..

Flexbox container properties

flex-direction

The flex-direction property specifies the direction of the flexible items inside the flex container. They can be laid out in two main directions, like rows horizontally or like columns vertically.
- flex-direction values: Flexbox direction
Example with inline-flex and column:
.container {
 display: inline-flex;
 flex-direction: column;
}

flex-wrap

By default, the flex container sets its items in one single line.
The flex-wrap property controls if the flex container lay out its items in single or multiple lines, and the direction the new lines are stacked in.
- flex-wrap values: Flexbox flex-wrap
.container {
 display: flex;
 flex-wrap: wrap;
}

flex-flow

flex-wrap is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. Default is row nowrap
- flex-flow syntax:
flex-flow: flex-direction flex-wrap;
.container {
 display: flex;
 flex-flow: row wrap;
}

justify-content

justify-content horizontally aligns the flexible container's items when the items do not use all available space on the main-axis. It helps distribute left free space when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.
- justify-content values: Flexbox justify-content
.container {
 display: flex;
 justify-content: space-around;
}

align-items

align-items vertically aligns the flexible container's items when the items do not use all available space on the cross-axis. It is similar to justify-content but in the perpendicular direction.
- align-items values: Flexbox align-items
.container {
 display: flex;
 align-items: center;
}

align-content

align-content aligns a flex container's lines within when there is extra space in the vertical-axis, similar to how justify-content aligns individual items within the horizontal-axis.
This property has no effect when there is only one line of flex items.
- align-content values: Flexbox align-content
.container {
 display: flex;
 align-content: space-around;
}

Flexbox playground

Here's a flex playground where you can combine and play with several css flex properties.
.container {
display: ;
flex-direction: ;
flex-wrap: ;
justify-content: ;
align-items: ;
align-content: ;
margin:2px;
padding:3px;
height: ;
width: ;
}
.container .item {
background:#ccccfe;
height:50px;
margin:2px;
}
Demo:
- Content Before..
Parent content.
Flex item #1
Child 2
Flexbox child 3
- Content After..

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
CSS3 Flexbox Container

Last accessed pages

  1. Contact page - CoursesWeb (45939)
  2. Tabs effect with CSS (46526)
  3. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (53969)
  4. Get data from string with JSON object (1934)
  5. Ajax-PHP File Manager (6698)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (362)
  2. Tabs effect with CSS (352)
  3. Contact page - CoursesWeb (351)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (133)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (81)