Display – block, inline and flex

Display Properties

Every HTML element falls into a display family such as block, inline or replaced (which refers to elements such as form fields and media inserted by the browser).

The display property allows the designer to change the native behaviour of an element.

A common example relates to navigation bars and HTML lists created with the <ul> and <li> elements. The <li> is natively a block element but with display it can be changed to an inline element with a rule as follows:

li{
display:inline;
}

By creating a rule like this the <li> elements will now flow from left to right rather than top to bottom. This means the list becomes horizontal rather than vertical. See Horizontal Menus from Humble HTML Lists for a demonstration of this trick.

The display property can (amongst other things) be used to do the following:

inline

makes the element act as inline even if it is by default a block element.

li{
display:inline;
}

block

makes the element act as block even if it is by default an inline element.

img{
display:block;
}

Note: By making an element inline you will not be able to access box model properties such as width, height, margin and padding

Flexbox and Display – ‘flexing rather than flowing’

Modern browsers support the display property of flex. This converts the element to what is known as a flex container. Immediate child elements inside that container are now known as flex items and how they flow in the container can be controlled. This is great for creating layouts.

For example here is a simple pair of nested <div> tags. Both the <div> elements of classcontent and sidebar are children of the <div> of classmain.

Flexbox is a relatively new CSS concept and does a lot more than the above. Take a look at this post to dig deeper.

Tip: The nature of this guide is to give you 20 CSS properties to get you started. You will find lots of sites using layout techniques based around float. We’ll look at float later but I’m recommending flexbox for new starters as it has solid browser support that will only grow over time, and it is a much easier way to layout pages than the likes of float.

Other useful display properties

There are a number of other display properties that it is useful to be aware of.

none

results in the element not been displayed – ie hides it! This is particularly useful when CSS is used with Javascript) to create interactive pages and with print friendly pages.

.hide{
display:none;
}

list-item – makes non-list elements act like a list.

.list{
display:list-item;
}

inline-block

displays the element as inline but allows access to the box model properties of width, height, margin and padding.

ul.menu li{
display:inline-block;
width: 120px;
}

The above makes list items inline but all of the same width.

Unfortunately display: inline-block is not supported by IE7. The following amended code uses the ‘has layout’ hack to enable display: inline-block for IE7. When using this hack take care to remove all unneeded whitespacing as it will be rendered.

Recent Posts

Posted in capacity as Module Leader Group Software Development, Department of Computing Sheffield Hallam University A Morgue One hundred students, 10 clients, 5 labs of University PCs, overzealous Facilities department and the Sheffield weather. What could possibly go wrong? Last week was ‘Scrum Week’. Nineteen groups of students working flat out 9-5, Monday to Friday…

Before reading the following ensure you are happy with the flexbox concepts of main axis and cross axis discussed in my previous post. Justification on the main axis The CSS property justify-content is used to control spacing between and around items along the main axis (assuming extra space is available). It is applied to the…

The concept of ‘flexible box’ or flexbox is name of the CSS3 flex layout model. Flexbox is based around flex containers and flex items. A flex container is a parent element to flex items. Flex items are the immediate children of the flex container and can be laid out in any direction. Take the following simple…