Create a Function for Flexbox Layout

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