some text

Introduction

We use popular CSS frameworks like Twitter Bootstrap, Foundation and Bulma. Let us know the CSS framework you like.

Flex Items

You do not need to pay in advance. First we complete your project and you can pay us if you happy with our code

Page Speed

Develop optimised code to have higher page speed which is a Google Ranking Factor to show your page in SERP

Custom Requirements

If you have any custom requirements for your project we will do them without any issue

Friendly Team.

You can communicate with our developer team easily. They are very friendly and willing help you always

Properties of the container

You will get following features for every project

We make awesome Bootstrap code. Our professional developers
will give you elegant Bootstrap code

Properties of the container

To define a flex container you can use display:flex;. So this will enable flex properties for all of the child elements.

.container {
  display: flex;
}

Please remember that CSS columns has no effects on flex container

There are several flex container properties and in the following section you can understand them one by one.

flex-direction

This defines the main axis and how the items are layed on the main axis. In other words, this define which direction you can keep the flex items

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

Now we will see the values for flex-direction property

flex-direction

flex-direction :row stacks the items horizontally

flex-direction :row-reverse stacks the items horizontally in reverse order

flex-direction :column stacks the items vertically from top to bottom

flex-direction :column-reverse stack the items vertically in reverse order from bottom to top

In rtl, all these are working in opposite way

The default value of the flex-direction is row

flex-wrap

When the number of items in a row does not fit to the length of the container, they try to move to the next row. You can use flex-wrap to control how those child elements wrap inside the container.

flex-wrap

flex-wrap:no-wrap this is the default value and elements will fit to single line.

flex-wrap:wrap fits on to multiple lines.

flex-wrap:wrap-reverse This will fit to multiple lines if necessary. But here, it starts from bottom to top.

The default value of the flex-wrap is nowrap so all the child elements try to fit into one line. But you can change the child elements to wrap to the next line

You can use the flex-wrap property to implement the responsive of the parent elements and we use this property when we do the PSD to Responsive HTML conversion service https://alligator.io/css/improve-responsiveness-flex-wrap/

flex-flow

This is a shorthand property of flex-direction and flex-wrap

You can achieve the same results using flex-direction and flex-wrap

.container {
  flex-flow: row  wrap ;
}

In the following example, you can see the usage of flex-flow: row wrap; where chilred items are wrapped

<div class="container">
  <div>1 </div>
  <div>2 </div>
  <div>3 </div>
  <div>4</div>
  <div>5</div>
  <div>6 </div>
</div>
.container{
  display:flex;
  flex-flow: row wrap;

}
row-wrap

justify-content

This property is a commonly used property when you want to align the child elements inside the parent property. If you are front-end developer you know the value of this property when it comes to layout building

We use this property often in our PSD to Responsive Conversion Service

So basically this defines how the items are placed along the main axis and by assigning the correct value for the property you can control how the free space between child elements distribute along the main axis

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;

}

justify-content

justify-content:space-arounditems are evenly distributed along the line. spaces are equal between the items. Container’s edge and the first item has got one unit distance and adjacent items has got two units of distance

justify-content:space-evenlySpacing between items are equal and maintain the same space between container edge and the first item as well as last item

justify-content:startChild items are packed towards the start direction of weighing mode. If you have RTL then it is packed towards right direction otherwise towards left direction

justify-content:endItems are packed towards the start direction of writing mode

justify-content:leftItems are pcaked towards left end of the edge of the container

justify-content:rightItems are pcaked towards right end of the edge of the container

align-items

This property is used to align the child elements along the cross-axis of the flex container.

This is like justify-content but now it is along the cross axis (perpendicular to the main axis)

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

There are several values for the align-items property we will look at them one by one

align-items

align-items:stretch This is the default value of this property and it will stretch to fill the entire container

align-items:flex-startItems are placed at the top edge of the container. So this vertical aligned to top of the container

align-items:flex-end Child items are placed at the bottom edge of the container. So this is vertically aligned to the bottom of the container.

align-items:center Items are centered in the cross-axis

align-items:baseline The baseline value will align flex items along their content's baseline. When you look at the diagram above you can understand it clearly

align-content

In the following image you can see the lines in the flex container and if you want to align these lines around the cross-axis when there is enough space to move, you can use the align-content property.

This behaves like justify-content as described above.

There should be more than one line to be effective on this align-content property.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

Now we will see the property values of the align-content in detail.

align-content

align-content:flex-start

Items are placed to the start of the container but this follows the flex-direction. When you look at the above image you can understand how the lines are placed inside the container.

align-content:flex-end

You can see the difference between flex-start and flex-end to understand how the items are packed. Here items are packed to the end of the container. This also follows the flex-direction

align-content:center Items are centered inside the container

align-content:space-between Items are distributed in such a way that the first line is at the top edge of the container and last row at the bottom edge of the container. Rows at the middle are evenly distributed

align-content:space-aroundYou can find evenly distributed space around each line

align-content:space-evenly I am not sure about this and I have to check with example

align-content:stretch This is the default value for the align-content and lines will stretch to take up the remaining space

Properties of the Children

order

You can specify how you want to lay the child elements inside the container. By default it is the source order

.
”flexbox

You can add order property to the flex items, so that they will appear according the order you specify

.div1{
  order:3;
}

flex-grow

Sometimes you may need to fill the additional space of the container with flex items. You can do that with flex-grow property

.

So basically this value tells how much flex item should grow.

The value which you specify here is unitless values and it works as proportion to grow inside the container

”flex-grow”
.div2{
 flex-grow:2;
}

You can see there are three items here and if you want to fill the additional space with 2nd item you can use the following CSS rule

”flex-grow”

In this example, I have used flex-grow:1 for item 1 and flex-grow:2 for item 2. So additional space is filled according to proportions of these values

div1{
  flex-grow:1;
}

.div2{
  flex-grow:2;
}

flex-shrink

This defines how much your flex item (child element) shrinks when there is not enough space to grow inside the container.

In the following example, we have set flex-shrink:0 for all the child elements and you can see the items 3 grows to the outside of the container.

”flex-shrink”
div{
    flex-shrink:0;
}

When you set the flex-shrink:0 for the iem 3 you can see the output in the following image.

You can see how the item 3 shrinks to fit the width of the container.

”flex-shrink”

You can see how the item 3 shrinks to fit the width of the container

.div3{
  flex-shrink:2;
}

flex-basis

If you want to set initial length for flex item you can use the flex-basis property

div{
flex-basis: number|auto|initial|inherit;
}

number: You can put in the initial number and it is a length unit or percentage (e.g. 20%, 5rem, etc.) .

flex-basis: auto;It looks its own height and width

flex-basis: content;Size of the item is beased on its content

”flex-shrink”
div:nth-of-type(2) {
  flex-basis: 100px;
}

In this example all div have 50px width and 2nd div has flex-basis: 100px;

flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined.

This flex property is used to set the flexible length on flex items.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Default value is 0 1 auto

”flex”
.container div:nth-of-type(2) {
  flex:0 1 150px;
}

In this example, length of the 2nd item is set to 100px, flex-grows is 0 and flex-shrink is 1.

align-self

With align-items (container property) you can align the child items across the cross-axis of the container. But if you want to override those rules you can use the align-self property.

”align-self”
.container div:nth-of-type(2) {
  align-self:flex-end;
}

In this example, we have used align-items:center for the parent items and to override it align-self:flex-end is used for the second item.

Browser Compatibility

This biggest drawback of the flex is browser support. But nowadays most of the new versions of the browsers support. Please keep in mind that older IE versions does nor support the flexbox layout.

Make sure you do all the browser testing using browser testing tools to give the best experience to users.

Our Simple Workflow

We have the very simple workflow for responsine HTML development

Place Your Order

You can send your design with any instructions

Review Design Files

We will review your design and send you the development time and cost

Coding and Testing

Our Bootstrap developers will start coding your project

Your Feedback

We will send a link to review the Bootstrap based HTML code. You can send your feedback and we will do the change until everything is perfect

You pay us

You can pay if you are happy with the Responsive Bootstrap HTML Code

Receive Your files

You can send your design with any instructions

    We will carefully read through your project requirements and get back to you with a quote within 8 hours time

    You have a question?

    Contact Us