My experience on Web Development My experience with CSS on web development was frustrating before meeting with Flex-Box. The experience of calculating margins, widths, alignments, heights for the web page to look quite attractive. It made my web development experience quite not attractive. Only with the idea to put exactly a numerical value in the specific property, makes web designing tedious. Flexbox the SOLUTION With Flex-box property you don't need to worry about calculating: specific margins, widths, heights. Flex-box will calculate that perfect alignments and sizes so your website looks perfect. That's not all, but also make your website responsive, that's right, even if your website changes its size, your webpage should still look great. That's because Flex-box will accommodate the components based on the size of the browser window. Start with flex Before jumping into code and properties. First, we have to know how does Flex-box actually work. We have to know-how Flex-box works. Flex-box as the word says its a box, so we gotta think that we are going to fix the elements INSIDE THAT box. After we have defined who is the "Box" and the "elements" we can proceed starting using flex, to start with flex, we put in our box: As the image above, the box is the gray-dotted and the elements we will apply a specific order are the child's of that box (A, B, C). { :flex; } Box display Flex-Direction(Row) By default <flex-direction:row> Some properties we can use on flex-direction:row { :flex; :{center,flex-end,flex-start, space-between, space-around } Box display justify-content If the flex-direction is on , the alignments will be distributed to the X-axis with property row justify-content can be achieved with the property. This property has by default the value " ". Vertical alignment align-items stretch : Our box must have a defined attribute defined, so properties can work on the IMPORTANT height justify content Y- Axis. { :flex; :(flex-end, flex-start,center,stretch,baseline) height: ; } Box display align-items 400px Flex-Direction(Column) If we need a column view we can achieve this, by using the property value " " on flex-direction; column { :flex; :column; } Box display flex-direction Now if we use this approach, to move around the we will need , and to move around the we use X-Axis align-items Y-Axis justify-content; will need a height attribute for IMPORTANT: align-items Box, so space-between, center, Setting Weights and Orders to Childs Let's pretend we have 3 Childs in our Box, and we want the middle child to be bigger than the other 2.In order to achieve this, we will have to use the property flex on b. The order of the childs is the following: A B C In order to make "B" bigger, we do the following: { :flex; :column; } { : ; } { : ; } { : ; } Box display flex-direction A flex 1 B flex 2 C flex 1 For orders of children is not necessary to put in the HTML a specific order of elements. This can be done on CSS with Flex-box property callled order Box{ :flex; } A{ : ; } B{ : ;} C{ : } display order 3 order 2 order 1 Conclusion:Flex-Box is the best choice. is best for arranging elements in either a single row, it will guarantee us: precision, time, and save us lines of codes. The use of Flex-Box is to make our web page looks better with the smallest amount of effort. Flexbox
