What is flexbox

#flexbox

Flexbox is a container organizer that is used to make anything be in a set order. While lists are only vertical, Flexbox is in any way you set it to be.

How to use

First you make your list of divs
Each div is an individual container for a list item. These divs order and properties is what will decide how it interacts and works on the website.

<div class="flex-container">
  <div>img1</div>
  <div>img2</div>
  <div>img3</div>
</div>

(The class can be whatever you want, as long as you get your CSS right it should work)
before we decide the order of the list we need to set the Flexbox to show up. so in CSS put this in.

.flex-container {
  display: flex;
}

this will display the divs as a flexbox, you can place them in any direction you want.
Next is actually deciding its direction, below is the code for doing so

.flex-container {
  display: flex;
  flex-direction: (enter the direction you want);
}

but this isn't the end how you can change your flexbox to be best for your site. just below are some direction and properties that can be used to determine how the flexbox works

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

Now those are just an order of words. below we get into what each of them mean and how they work on the flexbox

css flex-direction

: defines in which direction the container wants to stack the flex items. like columns and rows, the order within the rows and columns can be reversed.
flex-wrap: flex wrap decides if the row/column you are making will wrap back around if you've reached the end on a side. like how this text just hit the edge of the post and wrapped to the line under.

css flex-flow

: is for setting both the flex-direction and flex-wrap properties in one command.

css justify-content

: will decide which direction the flexbox will lean, its like using padding on text so it sits in a certain position.

css align-items

: is similar to justify-content except that justify-content is a horizontal change while align-items is vertical

css align-content

: is the lines in flexbox relative to each other instead of the ones above that do it relative to its container. here you decide the distance and ways the lines are compared to each other.

Now that you've decided which to use we can explain what that means. Now for my Figma I chose a right facing wrapping image Flexbox. AKA a nice looking list that goes by from left to right. so in the divs you want to put some things. lets say i want to put some images there so id need to go into each individual div and give each one its own image

<div class="flex-container">
  <div><img src="monkey.jpg" alt="monkeyimg"></div>
  <div><img src="giraffe.jpg" alt="giraffeimg"></div>
  <div><img src="zebra.jpg" alt="zebraimg"></div>
</div>

(This list can go on for as long as needed but I'm stopping it at 3 so its easier to read)
Now each of these divs that are within the class "Flex-container" will go with the flexbox you made.