Flexbox Blog
Tags: css, html
Published: 2020-10-26 12:37:00

#Introduction
Flexbox is a layout mode for CSS use, allowing easy formatting of elements throughout webpages. 
##Properties 
Flexbox has 10 main properties:
###1:
`display` - this property controls which type of box is used. The only accepted value for this property is `flex` (if you are using flexbox. Other values are accepted, but not compatible with flexbox elements)
```css
.navbar {
width: 1000px;
height: 100px;
display: flex;
```

###2: 
`flex-direction` - this property will decide which direction your boxes will take. These options are clearly described by the value names: `row`, `row-reverse`, `column`, `column-reverse`. `row` will show a standard left to right line of boxes, unless interrupted by the edge of a page, or the sides of a container. If the edge of the page or container happens to interrupt this line, the rest of the line will automatically move to the next line, following the same formatting. `row-reverse` will do almost exactly the same thing, but in a right to left style. `column` will display a simple top to bottom line of boxes, adding a line to the right side if interrupted by the edge of a page or container. `column-reverse` will, again, do the same, but in a bottom to top fashion. 

###3: 
`justify-content` - this property is used for moving a certain piece of content vertically. The accepted values are `center`, `flex-start`, `flex-end`, `space-around`, and `space-between`. The value `center` is rather self explanatory, centering an item in the middle of a container, expanding out in both directions as the content increases. `flex-start` and `flex-end` are quite simple, moving their content to the start or end of a container, respectively (the start will be on the left of the container, unless the `flex-direction` property has been set to `row-reverse`, in which case the start will be on the right, and the end will be on the left). `space-around` is the value that equally spaces out the boxes assigned to it, adding an equal amount of distance between each item, and adding one half that same space on either side of the edge items. Finally, `space-between` is similar to `space-around`, however it does not add space between the sides of the container and the first/last item.
```css
.flex-container {
  display: flex;
  justify-content: space-between;
  background-color: limegreen;
}
```
This above code snippet will result in evenly spaced items, with no padding on the left side of the first item, or on the right side of the last item. The items inside will look like so: 
!["space-around example"](https://dev-to-uploads.s3.amazonaws.com/i/dtz61jpyrwvwye5unn2u.PNG "Space-between example")

```css
.flex-container {
  display: flex;
  justify-content: space-around;
  background-color: limegreen;
}
``` 
However, if we now change the `space-between` value to `space-around`, the items now have a notable side padding: 
!["space-around example"](https://dev-to-uploads.s3.amazonaws.com/i/3k7skstpnydwejsrizms.PNG "Space-around example")

###4: 
`align-items` is not dissimilar to its cousin, `justify-content`, but instead of aligning items vertically, it aligns them horizontally. Accepted values are `center`, `flex-start`, `flex-end`, `stretch`, and `baseline`. The first 3 are quite simple, so they will be covered quickly. `center` will align an item in the center of the y-axis in a container, `flex-start` will align the item on the top, or bottom if the `flex-direction` is set to `column-reverse`, vice versa for `flex-end`. However, `stretch` and `baseline` are slightly more complex. `stretch` will make any inside item stretch to fill the y-axis, keeping the width that was originally assigned to them. 
```css
.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
  background-color: limegreen;
  justify-content: center;
}
``` 
This above code snippet will result in your items stretching to the top and bottom of the container, if not already assigned a height per item. If an item already has a designated height, the item will simply start from the top of the container, ending wherever the height will run out. For instance, when combined with the above code snippet, 3 50px boxes with a width of 25px each will space evenly in the center, yet will have their y-axis changed to start at the top of the container. They will then extend down for 50px before stopping. 
Finally, the `baseline` value will align all boxes by what text is in them. This means the bottom of the text of all text sizes will be aligned, regardless of box height. Boxes will move to accommodate this new alignment. 

###5: 
`flex-wrap` - this property is quite simple, only consisting of 3 almost completely self explanatory values. The first value is `wrap`, which allows the box sizes to stay the same if the container size increases or increases, but will move the boxes that cannot fit onto a new line. The second value is `nowrap`, which is the default wrap value for flexbox. This value will adjust the size of boxes to fit the size of the container, and will not spawn any new lines. The final value is `wrap-reverse`, which behaves exactly like the `row-reverse` value used by `flex-direction`. 

###6:
`align-content` - this property is almost exactly like the `align-items` property, but works vertically instead of horizontally. The values are also almost identical, with `align-content` **missing** only the `baseline` value that `align-items` had. For a quick recap, the `align-content` accepted values would be as follows: `space-between`, `space-around`, `stretch`, `center`, `flex-start`, and `flex-end`. If you need the explanation of each, reread the description on `align-items`, but apply all examples to vertical circumstances. 

###7:
`flex-flow` - the `flex-flow` property is a shorthand way of combining the `flex-direction` and `flex-wrap` properties. Any combination of values is possible, but the format would be as follows: 
```css
.flex-container {
  display: flex;
  flex-flow: [flex-direction] [flex-wrap];
}
```
In the above example, you would replace the `[flex-direction]` area with any acceptable value for `flex-direction`, and `[flex-wrap]` area with any acceptable value for `flex-wrap` (barring the brackets, of course). 

###8: 
`order` - the `order` property is the first of the flexbox properties to be applied through inline CSS. This property allows you to rearrange your flexbox boxes in any way you want, despite how they can be positioned in the code. 
```html
<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>
```
In the above example, you see we use inline CSS to apply an `order` property to each `<div>`, one at a time. If we were to load this code into a website with flexbox, it would look like this: ![order property](https://dev-to-uploads.s3.amazonaws.com/i/ubpgaqjzagwctantwnx3.PNG)

###9:
`align-self` - this property, like `order`, uses inline CSS. This property will override any settings made using `align-items`, but only for that specific element on the page. The accepted values for this property are `flex-start`, `flex-end`, and `center`. It is important to remember that these elements lose their designated `align-items` property, because `align-self` only applies to vertical setting. 
```html
<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div style="align-self: center">4</div>
</div>
```

###10:
`flex` - finally, we meet `flex`. `flex` is the final inline CSS property to be covered, and it is a shorthand property. `flex` combines 3 inline CSS properties, `flex-grow`, `flex-shrink`, and `flex-basis`. `flex-grow` describes how much each element it is applied to will grow in comparison to any other flexbox element. The default is 0, which means it will not grow bigger than any other element. `flex-shrink` is the exact same thing as `flex-grow`, except will make any element smaller instead of bigger. Again, 0 is the default, making everything equal in size. As with `flex-grow`, the value can be any float value (any value that is a whole number or a decimal point, such at 62, .62, or 6.2). `flex-basis` decides the initial width of an element. The entire `flex` property looks like so:
```html
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 2 4 200px">3</div>
  <div>4</div>
</div>
```
The format for `flex` is as follows: the value for `flex-grow` (our 2), the value for `flex-shrink` (our 4), and the value for `flex-basis` (our 200px). 

#Conclusion 

Here is what a fleshed out flexbox website can look like: ![Flexbox website design](https://dev-to-uploads.s3.amazonaws.com/i/5kojjlusx245lhxkj6xv.PNG)

#Resources Used

####w3schools
https://www.w3schools.com/css/css3_flexbox.asp
####Figma
https://www.figma.com/
####My Website Design
https://flexbox-website.chrisferrer2314.repl.co/