{"id":947,"date":"2023-03-23T08:25:03","date_gmt":"2023-03-23T08:25:03","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/?page_id=947"},"modified":"2023-03-30T16:13:31","modified_gmt":"2023-03-30T15:13:31","slug":"css-flex-and-grid","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/es\/software\/authoring-a-website\/week-2\/css-flex-and-grid\/","title":{"rendered":"CSS Flex and grid"},"content":{"rendered":"\n

CSS3 brings two useful methods for creating designs that work on varying resolutions of screen.<\/p>\n\n\n\n

\n
\n

Flex<\/h2>\n\n\n\n

Flex allows you to define how elements will be arranged inside a container. Do you want them stacked in a column, or going horizontally. Do they gather to the left, right or spaced evenly.<\/p>\n\n\n\n

As the size of the container changes, the sub items will rearrange to fit.<\/p>\n<\/div>\n\n\n\n

\n

Grid<\/h2>\n\n\n\n

Grid allows you to split an area up into rows and columns. This is useful for making the layout of a page or a section of it.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n\n\n\n

Flex<\/h2>\n\n\n\n
\n
\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <title>Flex Test<\/title>\n  <style>\n    .flexbox-container {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n    }\n    .flexbox-container div {\n      background-color: #8888ff;\n      border: 1px solid black;\n      margin: 5px;\n      font-size: 4rem;\n      width: 15em;\n      height: 5em;\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"flexbox-container\">\n    <div>1<\/div>\n    <div>2<\/div>\n    <div>3<\/div>\n  <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Try changing the direction and wrap rules to see how the display changes. <\/p>\n\n\n\n
There are further options. For example, flex-direction can also use row-reverse and column-reverse for values. Flex-wrap can be set to wrap-reverse if you wanted the extra items to wrap to lines above the original.<\/p>\n<\/div>\n\n\n\n
\n
Here we define a div to be the container by using the display: flex<\/strong> property. We use flex-direction: row<\/strong> to tell the browser to show the sub items of the contain in a horizontal row. We could have used flex-direction: column<\/strong> if you wanted them stacked vertically on top of each other. We use flex-wrap: wrap<\/strong> to say “When you can’t fit all the elements on one line, wrap them onto another one”<\/em>. If you wanted to force them onto a line you could use flex-wrap: nowrap<\/strong>.<\/p>\n\n\n\n
You can ignore all the properties on the the child items as that’s just to make them more visible for the demonstration.<\/p>\n\n\n\n
\"Flex
Flex items on a wide display<\/figcaption><\/figure><\/div>\n\n\n\n
If we look at the same code on a display that can only fit one of the child items into the contain on a row they automatically stack.<\/p>\n\n\n\n
\"Flex
Flex items on a narrow display<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
If you want to use a percentage of the flex container you could use the flex-basis<\/strong> property on the child elements. So 2 equal columns could use:<\/p>\n\n\n\n
.flexbox-container {\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n}\r\n.flexbox-container > div {\r\n  flex-basis: 50%;\r\n}<\/code><\/pre>\n\n\n\n
Each child div would take up 50% of the width of the parent.<\/p>\n\n\n\n
\n\n\n\n
Justify-content<\/h3>\n\n\n\n
justify-content aligns the items within the container. By default it puts all the items to the left, unless you are using a flex-direction of row-reverse. But it can have the values:<\/p>\n\n\n\n
\n
\n
flex-start<\/h4>\n\n\n\n
\"Example
 Example of justify-content: flex-start<\/figcaption><\/figure><\/div>\n\n\n\n
All the child elements are aligned to the left side of the container, or right on row-reverse.<\/p>\n<\/div>\n\n\n\n
\n
flex-end<\/h4>\n\n\n\n
\"Example
 Example of justify-content: flex-end<\/figcaption><\/figure><\/div>\n\n\n\n
All the child elements are aligned to the right side of the container, or left for row-reverse.<\/p>\n<\/div>\n\n\n\n
\n
center<\/h4>\n\n\n\n
\"Example
Example of justify-content: center<\/figcaption><\/figure><\/div>\n\n\n\n
All the child elements are aligned in the center of the container.<\/p>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
space-around<\/h4>\n\n\n\n
\"Example
 Example of justify-content: space-around<\/figcaption><\/figure><\/div>\n\n\n\n
The container works out how many will fit on a row and then divides the width available between the child elements then centre aligns each element in its own section.<\/p>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
space-between<\/h4>\n\n\n\n
\"Example
 Example of justify-content: space-between<\/figcaption><\/figure><\/div>\n\n\n\n
The container works out how many will fit on a row and then puts one to the far left, one to the far right, and the rest are equally spaced between.<\/p>\n<\/div>\n<\/div>\n\n\n\n
Add a justify-content property to your container. Choose whichever value you want.<\/p>\n\n\n\n
\n\n\n\n
Align-content<\/h3>\n\n\n\n
This property controls how the child items are vertically aligned within the container if the container is taller than the items. By default it puts all the items to the top. It can have the values:<\/p>\n\n\n\n
\n
\n
flex-start<\/h4>\n\n\n\n
\"An
An example of align-content: flex-start<\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n
\n
flex-end<\/h4>\n\n\n\n
\"An
 An example of align-content: flex-end<\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n
\n
center<\/h4>\n\n\n\n
\"An
 An example of align-content: center<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
space-around<\/h4>\n\n\n\n
\"An
 An example of align-content: space-around <\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n
\n
space-between<\/h4>\n\n\n\n
\"An
 An example of align-content: space-between<\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n
\n
stretch<\/h4>\n\n\n\n
\"An
 An example of align-content: stretch<\/figcaption><\/figure><\/div>\n\n\n\n
Stretch will only be apparent if you haven’t set a height property for the child elements.<\/p>\n<\/div>\n<\/div>\n\n\n\n
\n\n\n\n
Grid<\/h2>\n\n\n\n
\n
\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <title>Grid Test<\/title>\n  <style>\n\n    body {\n      margin: 0;\n    }\n    .grid-container {\t\n      display: grid;\n      grid-template-columns: auto auto auto;\n    }\n    .grid-item {\n      background-color: #8888ff;\n      border: 1px solid black;\n      margin: 2px;\n      height: 5em;\n    }\n  <\/style>\n<\/head>\n<body>\n<div class=\"grid-container\">\n  <div class=\"grid-item\">1<\/div>\n  <div class=\"grid-item\">2<\/div>\n  <div class=\"grid-item\">3<\/div>\n<\/div>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n\n\n\n
\n
Here we define a div to be our grid container using display: grid<\/strong>, we then use the grid-template-columns: auto auto auto<\/strong> to set the grid to have 3 equally sized colums.<\/p>\n\n\n\n
\"Example
Example of grid with 3 even columns<\/figcaption><\/figure>\n\n\n\n
Maybe we want to use this grid for a layout and have a large centre area and different sizes on each side. Instead of using auto auto auto we can set sizes<\/p>\n\n\n\n
grid-template-columns: 25vw 70vw 5vw;<\/code><\/pre>\n\n\n\n
\"Example
Example of grid with 3 uneven columns<\/figcaption><\/figure><\/div>\n\n\n\n
A really useful new size unit for grids is fr which stands for fraction of the available space. <\/p>\n\n\n\n
grid-template-columns: 1fr 2fr;<\/code><\/pre>\n\n\n\n
In the above the 2nd column will be twice the width of the 1st column. And fr ignores any space set aside for gaps between columns.<\/p>\n\n\n\n
How to change the number of columns? Change the number of values in the grid-template-column property. So 5 equal columns would be:<\/p>\n\n\n\n
grid-template-columns: auto auto auto auto auto;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
If you want to control the rows rather than columns then it follows the same pattern. Just use the grid-template-rows<\/strong> property instead.<\/p>\n\n\n\n
\n
\n
grid-template-rows: 200px 100px 50px;<\/code><\/pre>\n<\/div>\n\n\n\n
\n
\"Example
Example of grid-template-rows<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n\n\n\n
Justify-content<\/h3>\n\n\n\n
If the items don\u2019t take up the full width of the container then you can use the justify-content property to change how they are arranged:<\/p>\n\n\n\n
\n
\n
space-evenly<\/h4>\n\n\n\n
\"Example
Example of justify-content: space-evenly<\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n
\n
space-around<\/h4>\n\n\n\n
\"Example
Example of justify-content: space-around<\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n
\n
space-between<\/h4>\n\n\n\n
\"Example
Example of justify-content: space-between<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
flex-start<\/h4>\n\n\n\n
\"Example
Example of justify-content: flex-start<\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n
\n
center<\/h4>\n\n\n\n
\"Example
Example of justify-content: center<\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n
\n
flex-end<\/h4>\n\n\n\n
\"Example
Example of justify-content: flex-end<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n\n\n\n
Align-content<\/h3>\n\n\n\n
If the items don\u2019t take up the full height of the container then you can use the align-content property to change how they are vertically arranged:<\/p>\n\n\n\n
\n
\n
space-evenly<\/h4>\n\n\n\n
\"Example
Example of align-content: space-evenly<\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n
\n
space-around<\/h4>\n\n\n\n
\"Example
Example of align-content: space-around<\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n
\n
space-between<\/h4>\n\n\n\n
\"Example
Example of align-content: space-between<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
flex-start<\/h4>\n\n\n\n
\"Example
Example of align-content: flex-start<\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n
\n
center<\/h4>\n\n\n\n
\"Example
Example of align-content: center<\/figcaption><\/figure><\/div>\n<\/div>\n\n\n\n
\n
flex-end<\/h4>\n\n\n\n
\"Example
Example of align-content: flex-end<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n\n\n\n
Gaps<\/h3>\n\n\n\n
\n
\n
What if your grid items take up the full size but you still want a space between each. Use a gap property.<\/p>\n\n\n\n