Preview
Video Player
00:00
00:00
Create a Function for Flexbox Layout
6:23In this video, we'll write a function that gives us total control over the number of flex items being displayed on one line. The function will help us display equally sized and spaced items that line up perfectly across multiple lines.
Our site uses Flexbox to
layout the card components
0:00
displaying the different VR topic areas.
0:05
Now over in the card partial,
you can see that in the small breakpoint,
0:07
a flex value of 1 is applied to each
card to place them side by side.
0:14
Now, you can learn all about Flexbox
by taking our Flexbox course.
0:18
I posted a link to
the course in teachers note.
0:21
So currently, the cards are flexible but
0:24
they do not always appear
as equal with items.
0:28
And notice how they don't line up
perfectly across multiple rows or
0:32
flex lines.
0:37
Now, I could manually calculate
a flex spaces value to force
0:38
equal with cards that line up perfectly.
0:43
And flex is a short hand property,
so if you give the property a second
0:46
length value it will apply
it as the flex basis value.
0:50
So for example, to force two equal with
items per line add a second value of 50%.
0:53
And now let's margins or gutters to
create visual space around each card.
1:07
So first in the variables partial,
I will define the variable
1:13
gutter here under layout and
set it to 10 pixels.
1:19
I'll give this a save.
1:25
And over in the cards partial, we'll
set the margin value of card to gutter.
1:27
And as you can see, this breaks the two
column layout because the browser
1:39
does not include margin values
in its flex spaces calculations.
1:43
It doesn't account for any margins
in a flex lines available space.
1:48
Now, I could manually subtract each lines
total margin value from the flex basis for
1:54
example a smaller value
like 45% will do the trick.
2:00
So now we have equally sized and spaced
items that line up across multiple lines.
2:12
So now, if we wanted to force three equal
with items per line in a large break
2:19
point, we need to manually figure out
another flex basis value to achieve this.
2:23
So Sass can do this work for us.
2:28
We just need to create a function
to do the calculations.
2:30
The function will subtract
the total gutter value
2:33
of each line based on
the number of items per line.
2:36
So it's gonna return a percentage
value we'll use as the flex basis.
2:39
In the function, we'll give us total
control over the wrapping of cards
2:44
displaying perfectly lined up columns
right at the given break point.
2:47
Over in the functions partial,
let's first delete the test rule.
2:51
And we'll create a new
function called per-line.
2:57
And the function will accept
the parameter items, or
3:04
the number of items to display per line.
3:08
Let's add return.
3:12
First, we'll convert the gutter value
to a flexible percentage value.
3:16
So, let's store the value in
the variable g_pct or gutter percentage.
3:21
Now you can call functions
within other functions.
3:28
So, we'll use our handy pics to
pc function to divide gutter
3:31
by the max width.
3:36
As the value for this variable,
3:37
we'll type pics to pc,
passing in the gutter variable.
3:39
Then, we'll multiply the result by two
3:45
to get the combined value of both
the left and right side gutters.
3:49
Next, let's declare
the variable g dash total
3:53
to get the total gutter value
of each row or flex line.
3:57
To get the value,
4:02
we'll multiply the gutter percentage
value by the number of items per line.
4:03
So we'll say, items times
the variable that are percentage.
4:08
Finally to return the value to
use as the flex basis, we divide
4:16
100%for the total available width
by the number of items per line.
4:21
Then we'll subtract the total gutter value
by saying minus the variable g total.
4:29
Notice how we declared two variables,
gutter percentage and
4:39
gutter total within the function.
4:43
Now because we declared
the variables inside the function,
4:45
they're known as local variables.
4:49
A local variable only lives
within its function, so
4:51
it can't be used outside the function.
4:54
Local variables also can't be changed or
overridden by other rules.
4:56
So now let's test our function.
5:00
We'll go back to the card partial.
5:02
And at the small break point I want to
force two equal with items per line.
5:05
So I'll set the second value of the flex
property to our per line function,
5:11
passing in two as the argument.
5:17
So now at the large breakpoint,
I want to force three items per line.
5:20
Inside the card rule,
I'll create a media query using
5:25
the expression min-width break l for
the large break point.
5:30
Then add a flex basis property.
5:40
And set the value to our per-line
function passing in three items per line.
5:44
All right, let's give this a save.
5:51
And open up the output CSS.
5:52
And here you can see that passing
the function, the argument to,
5:56
returns the value 46% and
passing at three returns 27.33333%.
6:01
All right, perfect.
6:06
So, let's have a look in the browser.
6:07
Refresh.
6:09
And it works using the function gives us
total control over the number of items
6:13
being displayed on one line and the line
up perfectly across multiple flex lines.
6:18