|
| 1 | +# CSS Flexbox Crash Course Notes |
| 2 | + |
| 3 | +[CSS Flexbox Crash Course](https://www.youtube.com/watch?v=z62f2k38s64&list=PLC3y8-rFHvwhuX4qGvFx-wPy_MEi6Jdp7&index=3) |
| 4 | + |
| 5 | +Timestamps |
| 6 | +00:00 Introduction |
| 7 | +00:28 Before we begin |
| 8 | +02:01 What is Flebox? |
| 9 | +04:00 Terminology |
| 10 | +06:16 Flex container properties |
| 11 | +08:01 Setup |
| 12 | +10:06 display |
| 13 | +12:13 flex-direction |
| 14 | +15:01 flex-wrap |
| 15 | +19:37 flex-flow |
| 16 | +21:23 gap properties |
| 17 | +23:22 justify-content |
| 18 | +28:13 align-items |
| 19 | +32:28 align-content |
| 20 | +36:36 Flex item properties |
| 21 | +37:46 order |
| 22 | +40:12 flex-grow |
| 23 | +44:16 flex-shrink |
| 24 | +47:58 flex-basis |
| 25 | +50:37 flex |
| 26 | +52:05 align-self |
| 27 | + |
| 28 | +## What is Flexbox |
| 29 | + |
| 30 | +The CSS Flexible Box Module or simply known as Flexbox is a one-dimensional layout model |
| 31 | + |
| 32 | +It allows you to design felixble nad efficient layouts, align and distribute space among items in a container |
| 33 | + |
| 34 | +Flexbox helps you arrange elements in a webpage with ease. |
| 35 | + |
| 36 | +Flexbox provides a lot of flexibility to arrange items, adjust spacing, adjsut alignment, and adjust the order of items. |
| 37 | + |
| 38 | +Before flexbox, there were four layout modes. |
| 39 | + |
| 40 | +1. Block, for sections in a webpage |
| 41 | +2. Inline, for text |
| 42 | +3. Table, for two-dimensional table data |
| 43 | +4. Positioned, for explicit position of an element |
| 44 | + |
| 45 | +## Terminology |
| 46 | + |
| 47 | +When you talk a out flex box, you mainly have two entities, a parent container, which we refer to as flex-container and the immediately children, which we refer to as flex-elements. |
| 48 | + |
| 49 | +## Flex Axes |
| 50 | + |
| 51 | +You deal with two axes with flexbox: |
| 52 | + |
| 53 | +1. Main Axis |
| 54 | + |
| 55 | + - Runs left to right by default |
| 56 | + - The startpoint of the main axis is termed Main Start |
| 57 | + - The endpoint of the main axis is termed Main End |
| 58 | + - The length from main start to main end is called the Main Size. |
| 59 | + - Flex items flow from main start to main end and take up the main size as the length |
| 60 | + |
| 61 | +1. Cross Axis |
| 62 | + - Runs top to bottom by default |
| 63 | + - The startpoint of the main axis is termed Cross Start |
| 64 | + - The endpoint of the main axis is termed Cross End |
| 65 | + - The length from main start to main end is called the Cross Size. |
| 66 | + |
| 67 | +You can change the direction of the main and cross axes by changing how the items are laid out in the container. |
| 68 | + |
| 69 | +## Flex Container Properties |
| 70 | + |
| 71 | +There are ten total flex container properties |
| 72 | + |
| 73 | +1. Display - this is what defines a flex container and is mandatory in order to work with flexbox. |
| 74 | +2. flex-direction - it defines the direction in which the flex items are placed within the container |
| 75 | +3. flex-wrap - used to control the wrapping of items within the container |
| 76 | +4. flex-flow - shorthand for the combination of flex-direction and flex-wrap |
| 77 | +5. column-gap - sets the gap between columns |
| 78 | +6. row-gap - sets the gap between rows |
| 79 | +7. gap - shorthand for setting gap between column and rows |
| 80 | +8. justify-content - defines the alignment of the items along the main axis |
| 81 | +9. align-items - defines how flex-items are laid out along the cross axis |
| 82 | +10. align-content - similar to justify-content, but this will align along the cross axis and not the main axis. This works ony when there are multiple flex rows within the container. |
| 83 | + |
| 84 | +--- |
| 85 | + |
| 86 | +### display |
| 87 | + |
| 88 | +Display creates either a block level or and inline container. The possible values are 'display: flex' or 'display: inline-flex' |
| 89 | + |
| 90 | +On the container class, we set the display: flex; |
| 91 | + |
| 92 | +As with all properties with CSS, some initial values are defined. When creating a flex container, all of the contained flex items behave in a certain way. |
| 93 | + |
| 94 | +First, they will display in a row. |
| 95 | + |
| 96 | +Second, items start from the beginning of the left axis, the left most axis, but do not stretch to the end. However, they can shrink to a certain extent |
| 97 | + |
| 98 | +Third, items will stretch to fill the cross axis, from the top to the bottom. |
| 99 | + |
| 100 | +Also, from the border, the container itself has 100% width, so it does behave similar to a block level element. If you do not want a block level flex container, you can set the flex proeprty to inline-flex and create an inline flex container. |
| 101 | + |
| 102 | +After setting the property to inline-flex, the border wraps around the container instead of filling the full width to accomodate its children. |
| 103 | + |
| 104 | +### flex-direction |
| 105 | + |
| 106 | +Flex Direction establsihes the main axis, which in turn decides how the flex items are placed within the container. |
| 107 | + |
| 108 | +By default, the main access flows from left to right, which is the reason why the initial items are placed from left to right in the browser. |
| 109 | + |
| 110 | +By changing the direction of the flex property, we can change the order of the flex items displayed |
| 111 | + |
| 112 | +There are four possible values for flex-direction: |
| 113 | + |
| 114 | +1. flex-direction: row; - This is the default value. Items flow from left to right |
| 115 | +2. flex-direction: row-reverse; - Sets the row items in a row, reversed. |
| 116 | +3. flex-direction: column; - Sets the main access from top to bottom. The items will be stacked on top of each other. |
| 117 | +4. flex-direction: column-reverse - stacks items in a column in the reverse order. |
| 118 | + |
| 119 | +### flex-wrap |
| 120 | + |
| 121 | +There are three possible valus for flex-wrap |
| 122 | + |
| 123 | +1. flex-wrap: nowrap; - This is the default value. |
| 124 | +2. flex-wrap: wrap; - The values of the container will wrap/unwrap as you decrease/increase the viewport size. Wrapping takes place only when needed. |
| 125 | +3. flex-wrap: wrap-reverse; - Instead of items falling into the row below, they climb from the end up into the row above. |
| 126 | + |
| 127 | +Vertical wrapping of items is also possible. For that, we need to change flex-direction to column and add a height to the flex container. |
| 128 | + |
| 129 | +### flex-flow |
| 130 | + |
| 131 | +Flex flow is a short hand for both flex-direction and flex-wrap. The first value is the flex-direction and the second direction is the flex-wrap. |
| 132 | + |
| 133 | +ie. flex-flow: 'flex-direction''flex-wrap'; |
| 134 | + |
| 135 | +By default, the flex-flow is set to row and nowrap, which are the default values of each of the indvidual properties. |
| 136 | + |
| 137 | +You can type any possible combination of the direction and wrap values and the container will adjust. |
| 138 | + |
| 139 | +### column-gap |
| 140 | + |
| 141 | +Sets the gap between columns. |
| 142 | + |
| 143 | +Values can be a non-negative value or a percentage. |
| 144 | + |
| 145 | +ex. column-gap: 20px; |
| 146 | + |
| 147 | +gives a gap of 20px to the columns. |
| 148 | + |
| 149 | +### row-gap |
| 150 | + |
| 151 | +Sets the gap between rows. |
| 152 | + |
| 153 | +Values can be a non-negative value or a percentage. |
| 154 | + |
| 155 | +ex. row-gap: 20px; |
| 156 | + |
| 157 | +gives a gap of 20px to the rows. |
| 158 | + |
| 159 | +### gap |
| 160 | + |
| 161 | +Gap is shorthad for row-gap and column-gap. The first value is row-gap and the second value is column-gap. |
| 162 | + |
| 163 | +ie. gap: 'row-gap''column-gap' |
| 164 | + |
| 165 | +Values can be a non-negative value or a percentage. |
| 166 | + |
| 167 | +You can type any possible combination of the row and column gap values and the container will adjust. |
| 168 | + |
| 169 | +## Aligment-Based Properties |
| 170 | + |
| 171 | +### justify-content |
| 172 | + |
| 173 | +Defines the content along the main axis. Used to align items and distribute any extra spacing in the parent container. |
| 174 | + |
| 175 | +Possible Values: |
| 176 | + |
| 177 | +1. justify-content: flex-start; - By default, justify-content is set to the value flex-start, which places the flex items at the beginning of the main axis, which is also knonw as 'main start'. |
| 178 | +2. justify-content: flex-end; - Causes the flex items to be placed at the end of the main axis, which is also known as 'main end' |
| 179 | +3. justify-content: center; - Causes the flex items to be placed at the cneter of the main axis. |
| 180 | +4. justify-content: space-between; - evenly distributes the extra space within the container between the flex items. |
| 181 | +5. justify-content: space-around; - evenly distributes the extra space within the container between the flex items and gives a space that is half of the space that's between the items to the start and end. |
| 182 | +6. justify-content: space-evenly; - even distributes the extra space within the container between the flex items and gives equal space to the start and end. |
| 183 | + |
| 184 | +### align-items |
| 185 | + |
| 186 | +Align Items defines the default behavior for how flex items are laid out across the cross axis of the container. It works just like justify-content, but in the perpendicular position. |
| 187 | + |
| 188 | +To visualize the changes, you need a height on the container. |
| 189 | + |
| 190 | +Possible Values: |
| 191 | + |
| 192 | +1. align-items: stretch; - By default, the value of align-items is stretch. This means that items stretch the entire length of the cross axis. |
| 193 | +2. align-items: flex-start; - All items will be pushed to the cross start, which is the starting point of the cross axis. |
| 194 | +3. align-itens: flex-end; - All items will be pushed to the botto of the container, which is the cross end, the ending point of the cross axis. |
| 195 | +4. align-items: center; - Places the items at the center of the cross axis. |
| 196 | +5. align-items: baseline; - The baseline upon which content sits. |
| 197 | + |
| 198 | +### align-content |
| 199 | + |
| 200 | +The align content propety aligns lines of content along the cross axis, similar to how justify-content justifies content along the main axis. |
| 201 | + |
| 202 | +A very important condition is that multiple lines or rows must exist within the container, otherwise the property doesn't have any effect. |
| 203 | + |
| 204 | +First, make sure to have a height on the container and also enable wrapping of items. |
| 205 | + |
| 206 | +Possible Values: |
| 207 | + |
| 208 | +1. align-content: stretch; - By default, the value of align-content is stretch. |
| 209 | +2. align-content: flex-start; - This pulls the rows to the beginning of the cross axis. |
| 210 | +3. align-content: flex-end; - Pushes the content to the end of the cross axis. |
| 211 | +4. align-content: center; - Center aligns the content |
| 212 | +5. align-content: space-between: - Distributes vertical space between rows |
| 213 | +6. align-content: space-around: - distributes the space around the lines. The center portion has twice the amount of space as the top and bottom edges. |
| 214 | + |
| 215 | +## Flex Item Properties |
| 216 | + |
| 217 | +1. order - controls the order in which the items appear in the flex container |
| 218 | +2. flex-grow - defines the ability for a flex item to grow if necessary |
| 219 | +3. flex-shrink - defines the ability for a flex item to shrink if necessary |
| 220 | +4. flex-basis - specififes the initial main size of a flex item |
| 221 | +5. flex - shorthand for flex-grow, flex-shrink and flex-basis |
| 222 | +6. align-align |
| 223 | + |
| 224 | +### order |
| 225 | + |
| 226 | +Order is an integer value used to determine the order in which items appear. |
| 227 | + |
| 228 | +By default, the order of all flex items is 0. You can change the order in which items appear on screen by using 'order: number', ie. 'order: 1', 'order: 2', etc. |
| 229 | + |
| 230 | +If you specify the same order number for two or more items, the items will appear in the order in which they appear in the source code. |
| 231 | + |
| 232 | +### flex-grow |
| 233 | + |
| 234 | +Flex-grow specificies what amount of space inside a container the item should take up if necessary. It is always relative to the other children within the flex container. |
| 235 | + |
| 236 | +By default, all flex iems have a value of 0 and only take up the amount of space required to fit the content. |
| 237 | + |
| 238 | +ex. 'flex-grow: 0;', 'flex-grow: 1;'. 'flex-grow: 3;' etc. |
| 239 | + |
| 240 | +If you want all of te items to grow to take up the extra space evenly, you simply add flex-grow: 1 for all items. |
| 241 | + |
| 242 | +### flex-shrink |
| 243 | + |
| 244 | +Flex shrink defines the ability for a flex item t shrink if necessary. |
| 245 | + |
| 246 | +Unlike flex-grow, the default value for flex-shrink is 1 on every item. |
| 247 | + |
| 248 | +### flex-basis |
| 249 | + |
| 250 | +Specificies the inital size of a flex item before the extra space in the container is distributed. This is used in place of the width property in flex layouts. |
| 251 | + |
| 252 | +It can accept values such as: pixels, percentages, values, rem, or even keywords like auto. |
| 253 | + |
| 254 | +By default, flex-basis has a value of auto. |
| 255 | + |
| 256 | +flex-grow and flex-shrink apply on top of flex-basis. |
| 257 | + |
| 258 | +For example, if you set flex-grow: 1 on item 1, the extra space is added on top of the 200 px. |
| 259 | + |
| 260 | +Flex-box doesn't try to decrease its growth just because it is larger than the other items to begin with. |
| 261 | + |
| 262 | +### flex |
| 263 | + |
| 264 | +Flex is shorthand for flex-grow, flex-shrink, and flex-basis. |
| 265 | + |
| 266 | +Although you can designate grow, shrink and basis individually, Flex is the recommended method. |
| 267 | + |
| 268 | +By default, flex has a value of 'flex: 0 1 auto;', meaning the items will no grow to fit the container, the items will shrink if necessary, and that the width of the items depends on the content. |
| 269 | + |
| 270 | +The flex property can be specified using one, two or three of the values. |
| 271 | + |
| 272 | +ie. |
| 273 | +.item{ |
| 274 | +flex-grow: 2; |
| 275 | +flex-shrink: 5; |
| 276 | +flex-basis: 200; |
| 277 | +} |
| 278 | + |
| 279 | +You can shorthand the above by using: |
| 280 | + |
| 281 | +.item { |
| 282 | +flex: 2 5 200px; |
| 283 | +} |
| 284 | + |
| 285 | +Other examples: |
| 286 | + |
| 287 | +flex: 2; |
| 288 | +flex: 10em; |
| 289 | +flex: 30px; |
| 290 | +flex: 1 30px; |
| 291 | +flex: 2 2; |
| 292 | +flex: 2 2 10%; |
| 293 | +etc... |
| 294 | + |
| 295 | +### align-self |
| 296 | + |
| 297 | +Used to control the alignment of individual items. |
| 298 | + |
| 299 | +The default value for align-self is auto. |
| 300 | + |
| 301 | +Align-self is computed off of the align-items property of the parent container. align-self overides the align-items value fo the flex container. |
| 302 | + |
| 303 | +The values are pretty much the same as the values for align-items. |
| 304 | + |
| 305 | +align-self: flex-start; - the item will be pushed to the beginning of the cross axis |
| 306 | +align-self: flex-end; - the item will be pushed to the end of the cross axis |
| 307 | +align-self: center; - the item will be centered within the cross axis. |
| 308 | +align-self: stretch; - The item will be stretch across the cross axis. |
0 commit comments