Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted March 24th, 2016
Starting with Flexbox

What is flexbox? According to wikipedia:

CSS Flex Box Layout is a CSS3 web layout model. It is in the W3C’s Candidate Recommendation (CR) stage. The flex layout allows responsive elements within a container, automatically arranged to different size screens or devices.

Lets explain this a little bit better:

In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

How to start?

HTML & CSS:

<div class="parent">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
.parent {
    border: 3px #ff9c00 solid;
    display: flex;
}

.item {
    height: 100px;
    margin: 10px;
    background: #abf8bb;
}

Result:

alt text

Flexbox Properties

CSS properties used with flexbox:

Property Description
flex-direction Specifies the direction of the flexible items inside a flex container
justify-content Horizontally aligns the flex items when the items do not use all available space on the main-axis
align-items Vertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flow A shorthand property for flex-direction and flex-wrap
order Specifies the order of a flexible item relative to the rest of the flex items inside the same container
align-self Used on flex items. Overrides the container’s align-items property
flex Specifies the length of a flex item, relative to the rest of the flex items inside the same container

If u want to try flexbox yourself I suggest u go to this link. There are a lot of examples for you to try out.

Posted by Eelco Poelstra

Leave a Reply

Your email address will not be published. Required fields are marked *