CSS Flex Box
Published: 2020-11-02 10:16:29

#What's a Flexbox?
####Flexbox allows coders to create a layout model in websites to organize subtopics and other sources for information such as a link to "contacts"
###Heres an example of a coded flexbox:
<img src="https://uploads.sitepoint.com/wp-content/uploads/2014/07/1404915977flex-container-and-elements.png" alt="Are We Ready to Use Flexbox? - SitePoint"/>
####As you can see, a flexbox helps organize links to other locations within the website and makes coding easy for beginners. 

#Intro to the Structure of a Flexbox
###Terms You Should Know
####Flex Axes
+ Main Axis- the primary axis along which flex items are laid out. It extends in the main dimension.
+ Flex Items- structures within the container starting on the main-start side and going toward the main-end side.
+ Main Size- A flex item’s width or height, whichever is in the main dimension; A flex items width or height property is determined with `width` and `height` codes.
+ Cross Axis- The axis perpendicular to the main axis; It extends in the cross dimension.
+ Cross Size- The width or height of a flex item, whichever is in the cross dimension; Also determined by `width` and `height` codes through CSS
+ Flex lines- lines filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.

####Flex Lines

+ Single Lines: flex container lays out all of its children in a single line, even if that would cause its contents to overflow.

+ Multi-Lines:  flex container breaks its flex items across multiple lines; When stacked in the flex container along the cross axis, the property `flex-wrap` is used.

<img src="https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2014/10/flex-axes.png" alt="Flexbox | Codrops"/>

###How should I Structure My Flexbox?

####The Flexible Box Layout Module

Coding with the flexbox layout module makes it easier to design flexible responsive layout structure without using the code `float`    or     `positioning`

+ Block, for sections in a webpage
+ Inline, for text
+ Table, for two-dimensional table data
+ Positioned, for explicit position of an element

Example of a simple container with three flexbox items:
```Code```
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

#Coding in Flexbox

Change the `flex-direction` from `row` to `column` at a specific breakpoint, to create a 2 column layout for the flexbox.
As Shown:
####(Done in style.css)
```
.flex-container {
  display: flex;
  flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}
```

...or, change the percentage of the `flex` property of the flex items to create different layouts for different screen sizes. 

####(Note that we also have to include `flex-wrap: wrap;` on the flex container for this example to work):


```
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item-left {
  flex: 50%;
}

.flex-item-right {
  flex: 50%;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
```
#Flexbox Properties
###Code Terms to Know:

+ `display`--Specifies the type of box used for an HTML element.

+ `flex-direction`--Specifies the direction of the flexible items inside a flex container.

+ `justify-content`--Horizontally aligns the flex items when the items do not use all available space on the main-axis.

+ `align-items`--Vertically aligns the flex items when the items do not use all available space on the cross-axis.

+ `flex-wrap`--Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line.

+ `align-content`--Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.

+ `flex-flow`--A shorthand property for flex-direction and flex-wrap.

+ `order`--Specifies the order of a flexible item relative to the rest of the flex items inside the same container.

+  `align-self`--Used on flex items. Overrides the container's align-items property.

+  `flex`--A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties.


#How Can I Make Websites Using Flexbox?
Here's an example of a prototype website using flexbox:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tjamw0b4mz5esem9tvrq.png)
1. Use flexbox to organize separate links outside of your main website page.
2. Use CSS to redesign the structure and color of the flexbox
+ Plus changing the font, height and width, etc.

3. Use a coding resource that allows easy access to links and website for other users, such as replit.

References:
+ https://tympanus.net/codrops/css_reference/flexbox/

+ https://www.w3schools.com/css/css3_flexbox.asp\

+ https://www.figma.com/file/Zdn7QcDMue6m64kLdC9EZE/Untitled?node-id=0%3A1

+ https://www.hilton.com/en/