We’ve been working with flex, but it’s just one value of the property of display. Items automatically display in their default, which is mostly as a block item. When you inspect your page, you can see colored blocks appear on your page. Blocks have a width and height and by default stretch across the page.

We used span to get something to stay on the same line. That kind of display is called inline. It shows up in the same line. There is even an inline-block value of display. The difference is that the element is now in a block so that you can determine its height and width.

My favorite display value other than flex is none, as in display: none. I use this all the time. It hides things on the page. It doesn’t really come in hand until we start using Javascript, which we will start shortly. Then we can do things like hide something on the page and reveal it when a button is clicked. I am often switching things between display: flex or block and display: none.

There is another property that allows us to hide things. Visibility: hidden is how you would write it. It’s only useful in a few instances. The difference is that visibility: hidden still displays the element as a block. It is just veiling what is there, as if it’s hidden behind the background of the page. Display: none doesn’t put the element on the page so that it isn’t taking up any space.

Display: none is mostly what you want to use. If you were doing something where they clicked to reveal the answer, then it might be nice to have the space there where the reveal was going to take place.

One more quick note on how something appears on the page. We have used text-align to move headings into the center. You can use text-align: left and text-align: right as well to position things on a page.

You can watch this lesson.