Flex Box

  1. A flexbox makes sure that the elements do what they are supposed to do or makes sure that it doesn't get messed up when the screen changes to different sizes and on different display devices.
  2. The drawbacks to using flex box is that it can increases the page’s loading time if your project is large.
  3. ~Column : writing system = horizontal = flex items; laid out vertically

.flex-container {
 display: -webkit-flex;
 display: flex;
 -webkit-flex-direction: column;
 flex-direction: column;
 width: 400px;
 height: 250px;
 background-color: lightgrey;
}

~Space-Around: Items are positioned with space before, between, and after the lines

.flex-container {
 display: -webkit-flex;
 display: flex;
 -webkit-justify-content: space-around;
 justify-content: space-around;
 width: 400px;
 height: 250px;
 background-color: lightgrey;
}

~Wrap: Flexible items will wrap if necessary

.flex-container {
 display: -webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 width: 300px;
 height: 250px;
 background-color: lightgrey;
}

4. Tutorial 1: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Tutorial 2: http://learnlayout.com/flexbox.html

Tutorial 3: http://www.w3schools.com/css/css3_flexbox.asp

//These websites helped me understand the concepts of flexboxes. I was able to learn how to code them because they provided pictures and the codes beside or underneath it. I also learned that you can make rows or columns of boxes with it. It’s like a different way of making divs and coding the divs to float a certain coordinate on the side. With flexbox, you can just use that code to make rows or columns or boxes without having to code each box separately and predict the measurement of where it’s supposed to go. With flexbox you are able to add your div wherever you want.

Bibliography

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.