CSS

Demo Flex in CSS

See the Pen Demo Flexbox 2 by Hugo Giraudel (@HugoGiraudel) on CodePen.

 

Example:
/* We tell all items to be 100% width */
.header, .main, .nav, .aside, .footer {
flex: 1 100%;

.navigation {
list-style: none;
margin: 0;

background: deepskyblue;

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-flex-flow: row wrap;
justify-content: flex-end;
}

.navigation a {
text-decoration: none;
display: block;
padding: 1em;
color: white;
}

.navigation a:hover {
background: darken(deepskyblue, 20%);
}

@media all and (max-width: 800px) {
.navigation {
justify-content: space-around;
}
}

@media all and (max-width: 600px) {
.navigation {
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
padding: 0;
}

.navigation a {
text-align: center;
padding: 10px;
border-top: 1px solid rgba(255,255,255,0.3);
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.navigation li:last-of-type a {
border-bottom: none;
}
}

 

.parent {
display: flex;
height: 300px; /* Or whatever */
}

.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}

Example 2:
.flex-container {
/* We first create a flex layout context */
display: flex;

/* Then we define the flow direction and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;

/* Then we define how is distributed the remaining space */
justify-content: space-around;
}

Example 3:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Property Values
Value Description Play it
inline Default value. Displays an element as an inline element (like ) Play it »
block Displays an element as a block element (like

) Play it »
flex Displays an element as an block-level flex container. New in CSS3
inline-block Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box
inline-flex Displays an element as an inline-level flex container. New in CSS3
inline-table The element is displayed as an inline-level table
list-item Let the element behave like a

  • element Play it »
    run-in Displays an element as either block or inline, depending on context
    table Let the element behave like a
    element table-caption Let the element behave like aelement
    table-header-group Let the element behave like a
    element table-footer-group Let the element behave like aelement table-row-group Let the element behave like aelement table-cell Let the element behave like aelement
    table-column Let the element behave like a
    element
    table-row Let the element behave like a
    element none The element will not be displayed at all (has no effect on layout) Play it » initial Sets this property to its default value. Read about initial Play it » inherit Inherits this property from its parent element. Read about inherit
element
table-column-group Let the element behave like a

 

Add your comments

Loading Facebook Comments ...
Loading Disqus Comments ...