The CSS flex property sets the length of eligible items.
Items that are eligible to have their length set by the flex property are "flexible items". That sounds like an overly obvious statement, but it is how the reference pages refer to them.
"Flexible items", in plain English, are those elements which have the CSS property display: flex; applied to them.
"Flexbox" is the name that refers to the Flexible Box Layout features of CSS.
In the "old days" of CSS, the only way you could size elements, center them, and create a page layout was with CSS properties such as margin, width, height, position, float, and a few others. In fact, the previous lessons in this class related to "Responsive Web Design" (RWD), are based on the "old" way of doing things. The "old" way still works, but the flex world is much more... shall we say... flexible.
And to further confuse matters, the CSS folks have also created a new set of CSS properties called grid, which are used for setting up pages based on what they call a Grid Layout. We will talk about the Grid Layout properties in the next lesson.
The CSS Flexbox Layout should be used for one-dimensional layout, with rows OR columns.
The CSS Grid Layout should be used for two-dimensional layout, with rows AND columns.
Flexbox makes it easier to design a flexible responsive layout structure, without using float or position.
A flexbox always consists of:
The Flex Container <div> element has the display: flex; property applied to it.
The Flex Items are those elements directly contained by the Flex Container <div> element.
The CSS properties we use for the flex container are:
The CSS properties we use for the flex items are:
Let's look at an example of laying out a Web page with CSS Flex, with emphasis on making it responsive.
In Lesson 8, we looked at one way of making Responsive Web Design (RWD) pages by using the w3schools.com site's w3.css stylesheet and properties. This way of making a RWD page still works, and works well! The w3.css method is somewhat complicated, though, because it involves:
But now, with CSS Flex, there is another way of making RWD pages. You can still use CSS @media rule if you want, and even the "viewport" meta tag, but they are no longer required.
This sample page shows just one CSS Flex possibility for RWD pages. The page, FlexLayout.html, can be seen here. I have borrowed this sample code from the w3schools.com site, in their CSS Responsive Flexbox section.
You can look at the page's HTML source code by right-clicking the page in your browser, and selecting "View page source".
Then you can look at the stylesheet by clicking the stylesheet's URL in the source code.
Remember that I mentioned that in the old days, in order to center an element, you normally had to use the margin property.
In the flex world, centering is simpler.
Let's look at an example of centering a <p> tag both horizontally and vertically. The page, FlexCentering.html, can be seen here.
You can look at the page's HTML source code by right-clicking the page in your browser, and selecting "View page source".
Then you can look at the stylesheet by clicking the stylesheet's URL in the source code.