Flexbox or flexible boxes is a new layout mode in CSS. Flexbox is used for ensuring that elements behave predictably when the page layout is responsive or has different display and screen size. Flex box consists of flex containers and flex items. Inside a flex container there is one or more flex items. Flex items are inside a flex container along a flex line. There is one flex line for each flex container. Even though this sounds like the best thing ever it would not be as effective in my opinion when making something like a portfolio. There are downsides to using flex box.
The downside to using flexbox are performance issues. Using flex box can increase the page loading time if you have a large project. Another downside is browser compatibility. For example I found on teamtreehouse.com that flexbox is not supported by internet explorer 9. So basically flex box can cause choke lag if you have a big website which in my opinion I would not like. I would rather use another method because I want my website to look beast. However this is probably the only method I am going to learn.
The first property is the flex wrap property. The flexwrap property specifies whether the flex items should wrap or not, if there is not enough room to fit on one flex line. The next property is the align-items property. This property vertically aligns the flexible containers items when the items do not use all available space on the cross axis. There are many values for each property that do different things. The last property is the justify content property, the justify content property horizontally aligns the flexible containers items when the items do not use all the space on the main axis. So what this is saying is it just aligns it horizontally if the items don’t use all the space.
The three tutorials I found were on a website called scotch.io. The tutorials were easy to understand for me and it helped me a lot on what the syntax looks like. The first tutorial was the flex direction tutorial. This helped me understand the concept by showing me the proper syntax. It showed me that this property specifies how the flex items are laid out in the flex container. It does this by setting the direction of the flex containers main axis. They can be laid out 2 different ways, horizontally or vertically.
The second tutorial was a flexwrap tutorial. This tutorial in my option is more helpful than w3 schools because it’s easier to understand if you suck at technology like me. This tutorial taught me proper syntax when doing the flexwrap property. It also told me that the flex wrap controls if the flex container lays out its items in single or multiple lines. It also tells the direction the new lines are stacked in.
The last tutorial is the flex flow tutorial. This helped me understand that there are shortcuts in flexbox related things. It helped me because it showed the proper syntax when creating this and it showed me the use of it. All of these tutorials helped me because before these tutorials if you asked me what flex box was I wouldn’t get the answer for a million dollars. Now I have a way better understanding of what it is so maybe, hopefully I can do the next assignment without getting lost.