Johan Kohlin
Lecturer at School of engineering, Jönköping University.
Today
- Focus on Flexbox
- some properties for now
- display:flex
- justify-content
- flex-wrap
- flex-basis
- flex-grow/-shrink
- More selectors
- Pseudo classes
The lab
quiz time
Quiz results
Flexbox
Simple and powerful tools for distributing space and aligning content
flexbox
display: flex
A parent property
flexbox
By default, makes child elements stack horizontally (in a row)
Item widths may differ and depend on each item's content.
All heights get stretched to match each other.
flex-wrap
flexbox
controls whether the flex container is single-line or multi-line
flex-wrap:wrap
flex-wrap:nowrap
flex-basis
flexbox
Specifies the initial main size of the flex item, before free space is distributed according to the flex grow-/shrink factors
| Values | |
|---|---|
| auto | listen to width / height if present, otherwise sets to content |
| content | Automatic size based on the flex item’s content "optimal width" |
| <value> | any value that could be used for width |
| 0 | Smallest possible width. Longest word determine |
There's a little more to this but we'll get back to that when we talk about flex-direction
flex-grow + flex-shrink
flexbox
Determines how much a flex item will grow relative to the rest of the flex items in the flex container.
determines how much the flex item will shrink relative to the rest of the flex items in the flex container
Values: 0 or any positive number
default:0
default:1
flex
shorthand for flex-grow flex-shrink flex-basis
flex: 1 0 200px;
/* is the equivalent of: */
flex-grow: 1;
flex-shrink:0;
flex-basis: 200px;flexbox
align-items
cross-axis alignment
justify-content
main axis alignment
When there is space left in a flex container
justify-content
A parent property to align flex items horizontally
flexbox
There's a little more to this but we'll get back to that when we talk about flex-direction
center
justify-content
flexbox
There's a little more to this but we'll get back to that when we talk about flex-direction
flex-start (default)
justify-content
flexbox
There's a little more to this but we'll get back to that when we talk about flex-direction
flex-end
justify-content
flexbox
There's a little more to this but we'll get back to that when we talk about flex-direction
space-between
justify-content
flexbox
There's a little more to this but we'll get back to that when we talk about flex-direction
space-around
justify-content
flexbox
There's a little more to this but we'll get back to that when we talk about flex-direction
space-evenly
justify-content
A parent property to align flex items horizontally
flexbox
| value | How child elements align |
|---|---|
| flex-start | |
| center | |
| space-between | |
| space-around | |
| space-evenly | |
| flex-end |
There's a little more to this but we'll get back to that when we talk about flex-direction
align-items
A parent property to align flex items vertically
flexbox
There's a little more to this but we'll get back to that when we talk about flex-direction
center
align-items
A parent property to align flex items vertically
flexbox
stretch (default)
align-items
A parent property to align flex items vertically
flexbox
flex-start
align-items
A parent property to align flex items vertically
flexbox
flex-end
align-items
A parent property to align flex items vertically
flexbox
base-line
TEXT FLOOR
kind of center
flex-direction
make horizontal be vertical
Values
row (default)
column
row-reverse
column-reverse
Confusing behaviour!
When changing direction:
- justify-contents adjusts vertically
- align-items adjust horizontally
- fles-basis becomes height
flex-direction
column-reverse
align-content
(when flex-wrap:wrap)
align-content
(when flex-wrap:wrap)
align-self
A flex-item property
order
re-arranging flex items
/*
* Lowest number goes to the left.
* Negative numbers can be used.
* 0 is default
*/
.post-image {
order: -2;
}
.post-container {
order: -1
}
/*for mobile */
.post-container {
order: -2
}
.post-image {
order: -1;
}
Flexbox
Exercise
Make this codepen look like this mockup
Practise flexbox
Lists as menus
- A menu is a list of links
- Screen readers say "list of 3 items"
- Looks like a menu even with CSS disabled
menus in lists or not (read)
How a screen reader explains menus in lists
Styling lists as menus
the basics
<ul>
<li>Home</li>
<li>Products</li>
<li>About us</li>
</ul>ul {
display: flex;
list-style: none;
padding: 0;
}- Home
- Products
- About us
Home Products About us
- make children stack horizontally
- remove bullets
- remove default indentation
Till next time
Ch 13 - Pseudo-elements
web5
By Johan Kohlin
web5
Focus on Flexbox display:flex justify-content flex-wrap flex-basis flex-grow/-shrink More selectors: Pseudo classes
