├── flexbox30-cover.png ├── code-tidbits ├── 20-order.png ├── 27-flex.png ├── 7-display.png ├── 10-flex-wrap.png ├── 11-flex-flow.png ├── 16-baseline.png ├── 21-flex-grow.png ├── 25-flex-basis.png ├── 28-align-self.png ├── 1-flexbox-intro.png ├── 23-flex-shrink.png ├── 4-flexbox-axes.png ├── 15-align-items-row.png ├── 18-align-content.png ├── 5-flexbox-module.png ├── 8-block-vs-inline.png ├── 9-flex-direction.png ├── bonus-auto-margins.png ├── 19-child-properties.png ├── 6-parent-properties.png ├── 12-justify-content-row.png ├── 17-align-items-column.png ├── 26-flex-basis-vs-widths.png ├── 29-flexbox-properties.png ├── 3-immediate-child-only.png ├── 30-flexbox-cheatsheet.png ├── 14-justify-content-column.png ├── 22-flex-grow-calculation.png ├── 24-flex-shrink-calculation.png ├── 13-space-around-vs-space-evenly.png └── 2-flex-container-and-flex-items.png ├── flexbox30-cover-square.png ├── flexbox-aligning-with-auto-margins ├── auto-margins-center.png ├── auto-margins-examples.png ├── auto-margins-vertical.png ├── understanding-margin.png ├── auto-margins-horizontal.png ├── auto-margins-vs-flexbox.png └── README.md ├── .gitignore ├── LICENSE └── README.md /flexbox30-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/flexbox30-cover.png -------------------------------------------------------------------------------- /code-tidbits/20-order.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/20-order.png -------------------------------------------------------------------------------- /code-tidbits/27-flex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/27-flex.png -------------------------------------------------------------------------------- /code-tidbits/7-display.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/7-display.png -------------------------------------------------------------------------------- /flexbox30-cover-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/flexbox30-cover-square.png -------------------------------------------------------------------------------- /code-tidbits/10-flex-wrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/10-flex-wrap.png -------------------------------------------------------------------------------- /code-tidbits/11-flex-flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/11-flex-flow.png -------------------------------------------------------------------------------- /code-tidbits/16-baseline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/16-baseline.png -------------------------------------------------------------------------------- /code-tidbits/21-flex-grow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/21-flex-grow.png -------------------------------------------------------------------------------- /code-tidbits/25-flex-basis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/25-flex-basis.png -------------------------------------------------------------------------------- /code-tidbits/28-align-self.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/28-align-self.png -------------------------------------------------------------------------------- /code-tidbits/1-flexbox-intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/1-flexbox-intro.png -------------------------------------------------------------------------------- /code-tidbits/23-flex-shrink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/23-flex-shrink.png -------------------------------------------------------------------------------- /code-tidbits/4-flexbox-axes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/4-flexbox-axes.png -------------------------------------------------------------------------------- /code-tidbits/15-align-items-row.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/15-align-items-row.png -------------------------------------------------------------------------------- /code-tidbits/18-align-content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/18-align-content.png -------------------------------------------------------------------------------- /code-tidbits/5-flexbox-module.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/5-flexbox-module.png -------------------------------------------------------------------------------- /code-tidbits/8-block-vs-inline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/8-block-vs-inline.png -------------------------------------------------------------------------------- /code-tidbits/9-flex-direction.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/9-flex-direction.png -------------------------------------------------------------------------------- /code-tidbits/bonus-auto-margins.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/bonus-auto-margins.png -------------------------------------------------------------------------------- /code-tidbits/19-child-properties.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/19-child-properties.png -------------------------------------------------------------------------------- /code-tidbits/6-parent-properties.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/6-parent-properties.png -------------------------------------------------------------------------------- /code-tidbits/12-justify-content-row.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/12-justify-content-row.png -------------------------------------------------------------------------------- /code-tidbits/17-align-items-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/17-align-items-column.png -------------------------------------------------------------------------------- /code-tidbits/26-flex-basis-vs-widths.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/26-flex-basis-vs-widths.png -------------------------------------------------------------------------------- /code-tidbits/29-flexbox-properties.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/29-flexbox-properties.png -------------------------------------------------------------------------------- /code-tidbits/3-immediate-child-only.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/3-immediate-child-only.png -------------------------------------------------------------------------------- /code-tidbits/30-flexbox-cheatsheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/30-flexbox-cheatsheet.png -------------------------------------------------------------------------------- /code-tidbits/14-justify-content-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/14-justify-content-column.png -------------------------------------------------------------------------------- /code-tidbits/22-flex-grow-calculation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/22-flex-grow-calculation.png -------------------------------------------------------------------------------- /code-tidbits/24-flex-shrink-calculation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/24-flex-shrink-calculation.png -------------------------------------------------------------------------------- /code-tidbits/13-space-around-vs-space-evenly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/13-space-around-vs-space-evenly.png -------------------------------------------------------------------------------- /code-tidbits/2-flex-container-and-flex-items.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/code-tidbits/2-flex-container-and-flex-items.png -------------------------------------------------------------------------------- /flexbox-aligning-with-auto-margins/auto-margins-center.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/flexbox-aligning-with-auto-margins/auto-margins-center.png -------------------------------------------------------------------------------- /flexbox-aligning-with-auto-margins/auto-margins-examples.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/flexbox-aligning-with-auto-margins/auto-margins-examples.png -------------------------------------------------------------------------------- /flexbox-aligning-with-auto-margins/auto-margins-vertical.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/flexbox-aligning-with-auto-margins/auto-margins-vertical.png -------------------------------------------------------------------------------- /flexbox-aligning-with-auto-margins/understanding-margin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/flexbox-aligning-with-auto-margins/understanding-margin.png -------------------------------------------------------------------------------- /flexbox-aligning-with-auto-margins/auto-margins-horizontal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/flexbox-aligning-with-auto-margins/auto-margins-horizontal.png -------------------------------------------------------------------------------- /flexbox-aligning-with-auto-margins/auto-margins-vs-flexbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samanthaming/Flexbox30/HEAD/flexbox-aligning-with-auto-margins/auto-margins-vs-flexbox.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Custom 2 | draft/ 3 | .history 4 | 5 | # > https://gist.github.com/octocat/9257657 6 | 7 | # Compiled source # 8 | ################### 9 | *.com 10 | *.class 11 | *.dll 12 | *.exe 13 | *.o 14 | *.so 15 | 16 | # Packages # 17 | ############ 18 | # it's better to unpack these files and commit the raw source 19 | # git has its own built in compression methods 20 | *.7z 21 | *.dmg 22 | *.gz 23 | *.iso 24 | *.jar 25 | *.rar 26 | *.tar 27 | *.zip 28 | 29 | # Logs and databases # 30 | ###################### 31 | *.log 32 | *.sql 33 | *.sqlite 34 | 35 | # OS generated files # 36 | ###################### 37 | .DS_Store 38 | .DS_Store? 39 | ._* 40 | .Spotlight-V100 41 | .Trashes 42 | ehthumbs.db 43 | Thumbs.db 44 | -------------------------------------------------------------------------------- /flexbox-aligning-with-auto-margins/README.md: -------------------------------------------------------------------------------- 1 | # Flexbox: Aligning with Auto Margins 2 | 3 | You learned that `align-self` gives you control of the child item in the cross axis. Your next question might be "is there something similar for the main axis", say a "justify-self" 🤔 Great question! Unfortunately, the answer is NO 😅. But we have an existing CSS property that we can use! And that's **auto margins**. We can use it to control the horizontal alignment of a specific element. 4 | 5 |

Horizontal Alignment with Auto Margins

6 | 7 | Actually, you can also use **auto margins** to control the vertical alignment of a specific element. 8 | 9 |

Vertical Alignment with Auto Margins

10 | 11 | And if you apply all the margins (left, right, top, bottom) with the shorthand `margins`. You actually center that particular child in the horizontal and vertical direction! 12 | 13 |

Centering with Auto Margins

14 | 15 | ## Understanding Margin 16 | 17 | You might be a bit confused at this point. Why does `margin-left:auto` push things to the right or why does `margin-right: auto` push things to the left. It seems counter-intuitive. Don't worry, I was too 😅 18 | 19 | Remember the basics of margin. It adds **space** to the element. So with `margin-left:50px`, it adds `50px` worth of space to the left of the element. Which pushes the element to the right. With `margin-left:auto`, the `auto` calculates the entire available space and makes that the amount of space to the left of the element. Which pushes the element all the way to the right. 20 | 21 |

Understanding Margin

22 | 23 | | margin | space | appearance | 24 | |-----------------|--------------------------|------------------------------| 25 | | `margin-left` | adds space to the left | pushes element to the right | 26 | | `margin-right` | adds space to the right | pushes element to the left | 27 | | `margin-top` | adds space to the top | pushes element to the bottom | 28 | | `margin-bottom` | adds space to the bottom | pushes element to the top | 29 | | `margin` | adds space all around | pushes element to the center | 30 | 31 | ## Auto Margins Always Wins 🏆 32 | 33 | If you use **auto margins**, it will reign supreme and your Flexbox alignment properties will have no effect 💪 34 | 35 |

Auto Margins vs Flexbox Properties

36 | 37 | **Why?** 38 | 39 | > Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing. 40 | 41 | In non dev terms, **auto margins** is that clueless friend who you kindly invited to stay at your house and then they think the entire house is theirs and takes over all the space. No? You don't have that type of friend. Neither do I 😳 But I think you get the point 😂 42 | 43 | ## Auto Margins Examples 44 | 45 | Here are some examples where **auto margins** really shine! It's great to layout your navbar in whatever style you prefer 🤩 46 | 47 |

Auto Margins Examples

48 | 49 | ## Which should I use 🤔 50 | 51 | I bet your head is spinning now as to use which and when to use what (the problem with choices am I right) 😅. Here's how I go about it: 52 | 53 | 1. Always use **Flexbox** properties 54 | 2. If not possible, use **auto margins** 55 | 56 | Reasoning? I think Flexbox properties are more intuitive and read more explicit than "auto margins". Check it: 57 | 58 | ```css 59 | .child { 60 | align-self: flex-end; 61 | } 62 | ``` 63 | 64 | **vs** 65 | 66 | ```css 67 | .child { 68 | margin-top: auto; 69 | } 70 | ``` 71 | 72 | Even if you don't have any Flexbox knowledge. Just be reading this code, you can conclude that the `child` is aligning to the _end_. However, with `margin-top: auto` option, you're kinda spinning your head with what that exactly looks like. Of course, this is just my recommendation. You feel free to do what works for you and your team 😊 73 | 74 | ## Resources 75 | 76 | - [W3C Flexbox Spec: Aligning with auto margins](https://www.w3.org/TR/css-flexbox-1/#auto-margins) 77 | - [Hackernoon: Flexbox's Best-Kept Secret](https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6) 78 | - [CSS Tricks: The peculiar magic of flexbox and auto margins](https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/) 79 | - [Stack Overflow: Why are there no "justify-items" and "justify-self" properties?](https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties/33856609#33856609) 80 | - [Stack Overflow: Can't scroll to top of flex item that is overflowing container](https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container) 81 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Attribution-NonCommercial-NoDerivatives 4.0 International 2 | 3 | --- 4 | 5 | Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International Public License 6 | By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions. 7 | 8 | Section 1 – Definitions. 9 | 10 | Adapted Material means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image. 11 | Copyright and Similar Rights means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights. 12 | Effective Technological Measures means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements. 13 | Exceptions and Limitations means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material. 14 | Licensed Material means the artistic or literary work, database, or other material to which the Licensor applied this Public License. 15 | Licensed Rights means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license. 16 | Licensor means the individual(s) or entity(ies) granting rights under this Public License. 17 | NonCommercial means not primarily intended for or directed towards commercial advantage or monetary compensation. For purposes of this Public License, the exchange of the Licensed Material for other material subject to Copyright and Similar Rights by digital file-sharing or similar means is NonCommercial provided there is no payment of monetary compensation in connection with the exchange. 18 | Share means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them. 19 | Sui Generis Database Rights means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world. 20 | You means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning. 21 | Section 2 – Scope. 22 | 23 | License grant. 24 | Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to: 25 | reproduce and Share the Licensed Material, in whole or in part, for NonCommercial purposes only; and 26 | produce and reproduce, but not Share, Adapted Material for NonCommercial purposes only. 27 | Exceptions and Limitations. For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions. 28 | Term. The term of this Public License is specified in Section 6(a). 29 | Media and formats; technical modifications allowed. The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material. 30 | Downstream recipients. 31 | Offer from the Licensor – Licensed Material. Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License. 32 | No downstream restrictions. You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material. 33 | No endorsement. Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i). 34 | Other rights. 35 | 36 | Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise. 37 | Patent and trademark rights are not licensed under this Public License. 38 | To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties, including when the Licensed Material is used other than for NonCommercial purposes. 39 | Section 3 – License Conditions. 40 | 41 | Your exercise of the Licensed Rights is expressly made subject to the following conditions. 42 | 43 | Attribution. 44 | 45 | If You Share the Licensed Material, You must: 46 | 47 | retain the following if it is supplied by the Licensor with the Licensed Material: 48 | identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated); 49 | a copyright notice; 50 | a notice that refers to this Public License; 51 | a notice that refers to the disclaimer of warranties; 52 | a URI or hyperlink to the Licensed Material to the extent reasonably practicable; 53 | indicate if You modified the Licensed Material and retain an indication of any previous modifications; and 54 | indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License. 55 | For the avoidance of doubt, You do not have permission under this Public License to Share Adapted Material. 56 | You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information. 57 | If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable. 58 | Section 4 – Sui Generis Database Rights. 59 | 60 | Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material: 61 | 62 | for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database for NonCommercial purposes only and provided You do not Share Adapted Material; 63 | if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material; and 64 | You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database. 65 | For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights. 66 | Section 5 – Disclaimer of Warranties and Limitation of Liability. 67 | 68 | Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You. 69 | To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You. 70 | The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability. 71 | Section 6 – Term and Termination. 72 | 73 | This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically. 74 | Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates: 75 | 76 | automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or 77 | upon express reinstatement by the Licensor. 78 | For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License. 79 | For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License. 80 | Sections 1, 5, 6, 7, and 8 survive termination of this Public License. 81 | Section 7 – Other Terms and Conditions. 82 | 83 | The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed. 84 | Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License. 85 | Section 8 – Interpretation. 86 | 87 | For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License. 88 | To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions. 89 | No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor. 90 | Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority. 91 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Read this on my new website: [samanthaming.com/flexbox30/](https://www.samanthaming.com/flexbox30/) 2 | 3 | # Flexbox30 4 | 5 | Learn Flexbox in 30 days with 30 code tidbits ✨ 6 | 7 | Flexbox Cover 8 | 9 | ## Table of Contents 10 | 11 | 1. [Introduction](#flexbox-intro) 12 | 1. [Flex Container & Flex Items](#flex-container-and-flex-items) 13 | 1. [Immediate Child Only](#immediate-child-only) 14 | 1. [Flexbox Axes](#flexbox-axes) 15 | 1. [Flexbox Module](#flexbox-module) 16 | 1. [Parent Properties](#parent-properties) 17 | 1. [Display](#display) 18 | 1. [block vs inline](#block-vs-inline) 19 | 1. [flex-direction](#flex-direction) 20 | 1. [flex-wrap](#flex-wrap) 21 | 1. [flex-flow](#flex-flow) 22 | 1. [justify-content [row]](#justify-content-row) 23 | 1. [justify-content [column]](#justify-content-column) 24 | 1. [space-around vs space-evenly](#space-around-vs-space-evenly) 25 | 1. [align-items [row]](#align-items-row) 26 | 1. [baseline](#baseline) 27 | 1. [align-items [column]](#align-items-column) 28 | 1. [align-content](#align-content) 29 | 1. [Child Properties](#child-properties) 30 | 1. [order](#order) 31 | 1. [flex-grow](#flex-grow) 32 | 1. [flex-grow calculation](#flex-grow-calculation) 33 | 1. [flex-shrink](#flex-shrink) 34 | 1. [flex-shrink calculation](#flex-shrink-calculation) 35 | 1. [flex-basis](#flex-basis) 36 | 1. [flex-basis vs widths](#flex-basis-vs-widths) 37 | 1. [flex](#flex) 38 | 1. [align-self](#align-self) 39 | 1. [Flexbox Properties](#flexbox-properties) 40 | 1. [Flexbox Cheatsheet](#flexbox-cheatsheet) 41 | 1. [Aligning with Auto Margins](#bonus-aligning-with-auto-margins) 42 | 1. [Resources](#resources) 43 | 1. [Say Hello](#say-hello) 44 | 1. [Download & Share](#download-and-share) 45 | 1. [Contribution](#contribution) 46 | 1. [License](#license) 47 | 48 | ## Flexbox Core Concepts 49 | 50 | 51 | 52 | ### [Day 1: Introduction](#flexbox-intro) 53 | 54 | Before Flexbox, we were mainly using floats for layout. And for those CSS developers, we all know the frustrations and limitations of the old way -- especially the ability to vertically center inside a parent. Ugh, that was so annoying! Not anymore! Flexbox for the win! 55 | 56 |

Flexbox Introduction

57 | 58 | 59 | 60 | ### [Day 2: Flex Container & Flex Items](#flex-container-and-flex-items) 61 | 62 | In order to get Flexbox to work, you need to set up the Parent-Child relationship. The parent is the flex container, and everything within it is the children or flex items. 63 | 64 |

Flex Container & Flex Items

65 | 66 | 67 | 68 | ### [Day 3: Immediate Child Only](#immediate-child-only) 69 | 70 | One VERY important thing I want to point out is that the flex container only wraps around its immediate children. The flex container doesn't wrap beyond one layer deep. Only the immediate children. So there is NOT a grandchildren or grand-grandchildren relationship. Only Parent ↔️ Immediate Children! 71 | 72 | Of course, you can establish a Flexbox as long as there is a parent-child relationship. So a child can also be the flex container to its children. But it will be a separate flex container. And it doesn't carry over the grandparent flex properties. 73 | 74 | This is probably one of the most important concepts that helped me understand how Flexbox works. And knowing this will help solve a lot of those "hey, why isn't this working" moments 😅 75 | 76 |

Immediate Child Only

77 | 78 | 79 | 80 | ### [Day 4: Flexbox Axes](#flexbox-axes) 81 | 82 | Flexbox operates in a 2 axes system: a main and a cross axis. The main axis is your defining direction of how your flex items are placed in the flex container. Determining the cross axis is very simple, it's in the direction that's perpendicular to your main axis. 83 | 84 | Remember in math class, we were taught **x** and **y** axis. Well, throw that out. Because the main axis can be horizontal or vertical. The **x** axis is not always the main axis. This was a mistake I made, so hopefully you won’t make the same incorrect assumption as I did 😅 85 | 86 |

Flexbox Axes

87 | 88 | 89 | 90 | ### [Day 5: Flexbox Module](#flexbox-module) 91 | 92 | Let's zoom in on one of the layouts and check out the anatomy of our Flexbox. On each axis, there is a start and an end. If it's on the main axis, the starting position is called **main start** and if the ending position is called **main end**. The same concept applies to the cross axis. Knowing your start and end is important because you can control where your flex items are placed. 93 | 94 | And this concludes our Flexbox Fundamentals. 95 | 96 |

Flexbox Module

97 | 98 | **[⬆ back to top](#table-of-contents)** 99 | 100 | ## Parent Properties 101 | 102 | 103 | 104 | ### [Day 6: Parent Properties](#parent-properties) 105 | 106 | Now you know Flex operates in a Parent-Child relationship. So we have 2 entities involved to get this tango started. And each entity will have its own set of unique CSS properties that can be applied to them. That's why it's important that you know which element is the parent and which element(s) is the child. Let's get started with the parent properties 🤰 107 | 108 |

Parent Properties

109 | 110 | 111 | 112 | ### [Day 7: Display](#display) 113 | 114 | To start this Flexbox party, we need to first create our flex container. This is done by applying `flex` to the `display` property on the parent element. Bam! Now all its immediate children will become flex items 🎊 115 | 116 | There are 2 types of flex container: `flex` will create a *block* level flex container. And `inline-flex` will create an *inline* level flex container. More on *block* and *inline* tomorrow 😉 117 | 118 |

Display

119 | 120 | ```css 121 | .parent { 122 | display: flex /* default */ 123 | or inline-flex 124 | } 125 | ``` 126 | 127 | 128 | 129 | ### [Day 8: block vs inline](#block-vs-inline) 130 | 131 | Very simply explained, `block` element takes up the entire width of the container. They look like building blocks where each block is stacked on each other. Whereas `inline` element only takes up the space it needs. So they appear to be in a line, or side by side of each other. 132 | 133 |

block vs inline

134 | 135 | 136 | 137 | ### [Day 9: flex-direction](#flex-direction) 138 | 139 | This is the property that allows us to define our main axis. Remember I mentioned that our main axis can be horizontal or vertical. So if we want the main axis to be horizontal, that's called **row**. And if we want it to be vertical, that's called **column**. Also, remember we had a **main start** and **main end**. We simply add a `reverse` suffix to set our "main start" in the reverse direction. Pretty cool eh 👍 140 | 141 |

flex-direction

142 | 143 | ```css 144 | .parent { 145 | flex-direction: row /* default */ 146 | or row-reverse 147 | or column 148 | or column-reverse 149 | } 150 | ``` 151 | 152 | 153 | 154 | ### [Day 10: flex-wrap](#flex-wrap) 155 | 156 | By default, flex items will try to shrink itself to fit onto one line, in other words, `no wrap`. However if you want the flex items to maintain its size and have the overflow spread on multiple lines in the containers, then you can turn on `wrap`. 157 | 158 | This property is what will allow flex items in your container to occupy more than one line. 159 | 160 |

flex-wrap

161 | 162 | ```css 163 | .parent { 164 | flex-wrap: nowrap /* default */ 165 | or wrap 166 | or wrap-reverse 167 | } 168 | ``` 169 | 170 | 171 | 172 | ### [Day 11: flex-flow](#flex-flow) 173 | 174 | So we've learned `flex-direction` and `flex-wrap`. If you understand those 2, you'll get `flex-flow`! Because it's just a shorthand for these two properties 👏 175 | 176 | You can set both properties at the same time. Or you can just pass one of them. The default value is `row nowrap`. So if you just set one value, the property that you didn't set will just take on the default value. 177 | 178 |

flex-flow

179 | 180 | ```css 181 | .parent { 182 | flex-flow: row nowrap /* default */ 183 | or 184 | or 185 | or 186 | } 187 | ``` 188 | 189 | 190 | 191 | ### [Day 12: justify-content [row]](#justify-content-row) 192 | 193 | Here comes the fun part. This is the property that sets alignment along the main axis. In this example, the main axis lies horizontally. In other words, the flex-direction is set to `row`. 194 | 195 | This is probably my most used parent property. You just choose the layout you like and BAM Flexbox automatically does it for you. And it's absolutely responsive. As your grow or shrink the window width, Flexbox will do the behind-the-scene calculation and ensure that your chosen layout is maintained. It's like one of those kitchen appliances where "you set it and forget it" 🍗 196 | 197 |

justify-content row

198 | 199 | ```css 200 | .parent { 201 | justify-content: flex-start /* default */ 202 | or flex-end 203 | or center 204 | or space-around 205 | or space-between 206 | or space-evenly 207 | } 208 | ``` 209 | 210 | 211 | 212 | ### [Day 13: justify-content [column]](#justify-content-column) 213 | 214 | The main axis can also lie vertically. In that case, flex-direction is set to `column`. Here's how the flex items will be aligned in that instance. 215 | 216 |

justify-content column

217 | 218 | ```css 219 | .parent { 220 | flex-direction: column; 221 | 222 | justify-content: flex-start /* default */ 223 | or flex-end 224 | or center 225 | or space-around 226 | or space-between 227 | or space-evenly 228 | } 229 | ``` 230 | 231 | 232 | 233 | ### [Day 14: space-around vs space-evenly](#space-around-vs-space-evenly) 234 | 235 | You might not notice the subtle difference between space-around and space-evenly. So let's talk about it. In `space-evenly`, the empty space in between the flex items is always equal. However, in `space-around`, only the inner items will have equal spacing in between each other. The first and last item will only be allocated half the spacing. Giving the visual appearance of it being more spread out. One may say these folks like to live life on the edge 😂 236 | 237 |

space-around vs space-evenly

238 | 239 | 240 | 241 | ### [Day 15: align-items [row]](#align-items-row) 242 | 243 | So justify-content controls how items are laid out on the main axis. What about their layout in the cross axis? Don't worry, that's where `align-items` come into play. Remember the cross axis is always perpendicular to the main axis. So if the main axis is sitting horizontally, where flex-direction is `row`. Then , the cross axis is sitting vertically. Aren't you glad we spend almost a week on the fundamentals, that knowledge is all being applied now 🤓 244 | 245 |

align-items row

246 | 247 | ```css 248 | .parent { 249 | align-items: stretch /* default */ 250 | or flex-start 251 | or flex-end 252 | or center 253 | or baseline 254 | } 255 | ``` 256 | 257 | 258 | 259 | ### [Day 16: baseline](#baseline) 260 | 261 | The baseline value is a bit tricky. So let's make sure we understand what that is. Baseline has to do with typography or text. It is the imaginary line where the text sits. If you have the same font size, you really don't visually see a difference. However when you have different font sizes, then the text seems all over the place because the baseline is off. The way to ensure a uniform baseline where all the different sizes of text can rest on is to use the `baseline` value 👍 262 | 263 |

baseline

264 | 265 | 266 | 267 | ### [Day 17: align-items [column]](#align-items-column) 268 | 269 | Now let's take a look at how our flex items are aligned if the cross axis is sitting horizontally. In other words, flex-direction is `column`. 270 | 271 |

align-items column

272 | 273 | ```css 274 | .parent { 275 | flex-direction: column; 276 | 277 | align-items: stretch /* default */ 278 | or flex-start 279 | or flex-end 280 | or center 281 | or baseline 282 | } 283 | ``` 284 | 285 | 286 | 287 | ### [Day 18: align-content](#align-content) 288 | 289 | Remember we had `flex-wrap` where we allow flex items to wrap on separate lines. Well, with `align-content` we can control how those row of items are aligned on the cross axis. Since this is only for wrapped items, this property won't have any effect if you only have a singular line of flex items. 290 | 291 |

align-content

292 | 293 | ```css 294 | .parent { 295 | align-content: stretch /* default */ 296 | or flex-start 297 | or flex-end 298 | or center 299 | or space-between 300 | or space-around 301 | } 302 | ``` 303 | 304 | **[⬆ back to top](#table-of-contents)** 305 | 306 | ## Child Properties 307 | 308 | 309 | 310 | ### [Day 19: Child Properties](#child-properties) 311 | 312 | Yay, you did it! We made it through the parent properties. Up next, let dig into the child properties. Take a breather today, tomorrow we go full speed again 🏎 313 | 314 |

Child Properties

315 | 316 | 317 | 318 | ### [Day 20: order](#order) 319 | 320 | By default, flex items are displayed in the same order they appear in your code. But what if you want to change that? No problem! Use the `order` property to change the ordering of your items 🔢 321 | 322 |

order

323 | 324 | ```css 325 | .child { 326 | order: 0 /* default */ 327 | or 328 | } 329 | ``` 330 | 331 | 332 | 333 | ### [Day 21: flex-grow](#flex-grow) 334 | 335 | I mentioned in the beginning that Flexbox is great for responsive design. This is where it shines. The `flex-grow` property allows our flex item to grow if necessary. So if there is extra free space in my container, I can tell a particular item to fill it up based on some proportion. That's pretty nuts! When I was learning CSS, I remember everything is pretty static. Now with this property, it's like it has its own brain and it will adjust its size depending on the container. That's so great. I don't have to monitor the size. It will adjust accordingly. This was a quite the mind blow for me 🤯 336 | 337 |

flex-grow

338 | 339 | ```css 340 | .child { 341 | flex-grow: 0 /* default */ 342 | or 343 | } 344 | ``` 345 | 346 | 347 | 348 | ### [Day 22: flex-grow calculation](#flex-grow-calculation) 349 | 350 | Being able to grow and fill the free space is pretty cool. Because we don't set the final width of our flex item, the size it grows to always seem so random to me. So let's look at the math. Honestly you don't need to know this to understand Flexbox. The browser takes care of this automatically for you. But knowing what's behind this sorcery might demystify this process and help you understand it better. It's like once you know the trick to the magic, you're no longer tricked by the magic 😉 351 | 352 |

flex-grow calculation

353 | 354 |
355 | Expand to see the calculation
356 | 357 | I know it can be quite overwhelming to see all numbers crammed into a tidbit. So let's walk through the calculation 👍 358 | 359 | Here's the `HTML` and `CSS` we're working with: 360 | 361 | _HTML_ 362 | 363 | ```html 364 |
365 |
366 |
367 |
368 |
369 | ``` 370 | 371 | _CSS_ 372 | 373 | ```css 374 | .parent { 375 | width: 700px; 376 | } 377 | .child { 378 | width: 100px; 379 | } 380 | .green { 381 | flex-grow: 1; 382 | } 383 | .yellow { 384 | flex-grow: 0; 385 | } 386 | .blue { 387 | flex-grow: 3; 388 | } 389 | ``` 390 | 391 |
392 | 393 | **Step 1: Breaking down the variables** 394 | 395 | Here's the formula: 396 | 397 | ```code 398 | new width = ( (flex grow / total flex grow) x free space) + width 399 | ``` 400 | 401 | Let's extract the variables required in the formula to this handy table we can fill in as we go: 402 | 403 | Variables | | 404 | --- | --- | 405 | flex grow | *provided from css* 406 | total flex | *need to calculate* 407 | free space | *need to calculate* 408 | width | *provided from css* 409 | 410 |
411 | 412 | **Step 2: Fill in what we know** 413 | 414 | From the `CSS` value, we can conclude the following: 415 | 416 | - Each child element has a width `100` 417 | - The parent element (container) has a width of `700` 418 | - The child has a `flex-grow` of `1`, `0`, `3` 419 | 420 | Let's update our chart with this information: 421 | 422 | | Green | Yellow | Blue 423 | --- | --- | --- | --- | 424 | flex grow | 1 | 0 | 3 425 | total flex | 426 | free space | 427 | width | 100 | 100 | 100 428 | 429 |
430 | 431 | **Step 3: Calculate "free space"** 432 | 433 | This is the formula: 434 | 435 | ```code 436 | free space = parent width - total children widths 437 | ``` 438 | 439 | Remember what we know: 440 | 441 | - Each child element has a width `100` 442 | - The parent element (container) has a width of `700` 443 | 444 | Great, we can use that information to calculate "total children widths": 445 | 446 | ```code 447 | total children widths = green + yellow + blue 448 | = 100 + 100 + 100 449 | 450 | => 300 451 | ``` 452 | 453 | Now we can calculate our "free space": 454 | 455 | ```code 456 | free space = parent width - total children widths 457 | = 700 - 300 458 | 459 | => 400 460 | ``` 461 | 462 | Let's update our chart and add these additional information: 463 | 464 | | Green | Yellow | Blue | Total 465 | --- | --- | --- | --- | --- | 466 | flex grow | 1 | 0 | 3 467 | total flex | 468 | free space | - | - | - | **400** 469 | width | 100 | 100 | 100 470 | 471 |
472 | 473 | **Step 4: Calculate "total flex grow"** 474 | 475 | This is an easy one, we simply add up our total `flex-grow`: 476 | 477 | ```code 478 | total flex grow = green + yellow + blue 479 | = 1 + 0 + 3 480 | 481 | => 4 482 | ``` 483 | 484 | Fill in our chart and Voilà! We have all the information we need for the final calculation 👍 485 | 486 | | Green | Yellow | Blue | Total 487 | --- | --- | --- | --- | --- | 488 | flex grow | 1 | 0 | 3 | **4** 489 | free space | - | - | - | 400 490 | width | 100 | 100 | 100 | 491 | 492 |
493 | 494 | **Final step: Calculate "new width"** 495 | 496 | Remember the formula: 497 | 498 | ```code 499 | new width = ( (flex grow / total flex grow) x free space) + width 500 | ``` 501 | 502 | _a. Green_ 503 | 504 | ```code 505 | new width = ( (1/4 * 400) ) + 100 506 | 507 | => 200 508 | ``` 509 | 510 | _b. Yellow_ 511 | 512 | ```code 513 | new width = ( (0/4 * 400) ) + 100 514 | 515 | => 100 516 | ``` 517 | 518 | _c. Blue_ 519 | 520 | ```code 521 | new width = ( (3/4 * 400) ) + 100 522 | 523 | => 400 524 | ``` 525 | 526 | Done! We have successfully calculated the new width 🥳 527 | 528 | | Green | Yellow | Blue | Total 529 | --- | --- | --- | --- | --- | 530 | width | 200 | 100 | 400 531 | flex grow | 1 | 0 | 3 | 4 532 | free space | | | | 400 533 | **new width** | **200** | **100** | **400** 534 | 535 |
536 | 537 |
538 | 539 | 540 | 541 | ### [Day 23: flex-shrink](#flex-shrink) 542 | 543 | So `flex-grow` will expand to fill the extra space if there are any. The opposite of that is `flex-shrink`. What happens when you run out of space. This is the property that controls how much your flex items will shrink to fit. Note the larger the number, the more it will shrink 👍 544 | 545 |

flex-shrink

546 | 547 | ```css 548 | .child { 549 | flex-shrink: 1 /* default */ 550 | or 551 | } 552 | ``` 553 | 554 | 555 | 556 | ### [Day 24: flex-shrink calculation](#flex-shrink-calculation) 557 | 558 | This is another optional knowledge. But if you're like me and is curious how the browser calculates flex-shrink. Join me in this rabbit hole 🐰 559 | 560 | The math behind `flex-shrink` is a bit more complicated then `flex-grow`. You need to take into account of it's existing proportion and shrink it accordingly to the flex shrink amount. Hence, a few more calculation involved. Again, if this is throwing you off. Skip it. You don't need to know this to understand Flexbox. Luckily the browser takes care of it for you, how wonderful 😌 561 | 562 |

flex-shrink calculation

563 | 564 |
565 | Expand to see the calculation
566 | 567 | Indeed the calculation is a bit more complicated. But no worries, let's break it down we go through it step by step, you got this 💪 568 | 569 | Here's the `HTML` and `CSS` we're working with: 570 | 571 | _HTML_ 572 | 573 | ```html 574 |
575 |
576 |
577 |
578 | ``` 579 | 580 | _CSS_ 581 | 582 | ```css 583 | .parent { 584 | width: 800px; 585 | } 586 | .green { 587 | width: 300px; 588 | flex-shrink: 4; 589 | } 590 | .yellow { 591 | width: 600px; 592 | flex-shrink: 6; 593 | } 594 | ``` 595 | 596 |
597 | 598 | **Step 1: Breaking down the variables** 599 | 600 | This is the formula: 601 | 602 | ```code 603 | new width = width - (shrink space x shrink ratio) 604 | ``` 605 | 606 | Let's extract the variables required in the formula to this handy table we can fill in as we go: 607 | 608 | Variables | | 609 | --- | --- | 610 | width | *need to calculate* 611 | shrink space | *need to calculate* 612 | shrink ratio | *need to calculate* 613 | 614 |
615 | 616 | **Step 2: Fill in what we know** 617 | 618 | From the `CSS` value, we can conclude the following: 619 | 620 | - The parent element (container) has a width of `800` 621 | - Green child element has a width `300` and `flex-shrink` of `4` 622 | - Yellow child element has a width `600` and `flex-shrink` of `6` 623 | 624 | Let's update our chart with this information: 625 | 626 | | Green | Yellow | 627 | --- | --- | --- | 628 | flex shrink | 4 | 6 629 | width | 300 | 600 630 | 631 |
632 | 633 | **Step 3: Calculate "shrunk space"** 634 | 635 | This is the formula: 636 | 637 | ```code 638 | shrunk space = total children widths - parent width 639 | ``` 640 | 641 | Remember what we know: 642 | 643 | - The parent element (container) has a width of `800` 644 | - The child elements has a width of `300`, `600` 645 | 646 | Great, we can use that information to calculate "total children widths": 647 | 648 | ```code 649 | total children widths = green + yellow 650 | = 300 + 600 651 | 652 | => 900 653 | ``` 654 | 655 | Now we can calculate our "shrunk space": 656 | 657 | ```code 658 | shrunk space = total children widths - parent width 659 | = 900 - 800 660 | 661 | => 100 662 | ``` 663 | 664 | Let's update our chart and add the additional information: 665 | 666 | | Green | Yellow | Total 667 | --- | --- | --- | --- | 668 | flex shrink | 4 | 6 669 | width | 300 | 600 670 | shrunk space | - | - | **100** 671 | 672 |
673 | 674 | **Step 4: Calculate "shrink ratio"** 675 | 676 | This is the formula: 677 | 678 | ```code 679 | shrink ratio = (width x flex shrink) / total shrink scaled width 680 | ``` 681 | 682 | Notice this new variable, `total shrink scaled width`. So we need to calculate that first to get our shrink ratio. 683 | 684 |
685 | 686 | **Step 4-1: Calculate "total shrink scaled width"** 687 | 688 | This is the formula: 689 | 690 | ```code 691 | total shrink scaled width = Σ(width x flex shrink) 692 | ``` 693 | 694 | "Σ" Sigma is a math symbol that means the summation of something. So we need to apply `width x flex shrink` for all the child elements. 695 | 696 | _Green_ 697 | 698 | ```code 699 | width x flex shrink = 300 x 4 700 | 701 | => 1200 702 | ``` 703 | 704 | _Yellow_ 705 | 706 | ```code 707 | width x flex shrink = 600 x 6 708 | 709 | => 3600 710 | ``` 711 | 712 | _Finally_ 713 | 714 | ```code 715 | total shrink scaled width = 1200 + 3600 716 | 717 | => 4800 718 | ``` 719 | 720 | Let's add this information to our chart: 721 | 722 | | Green | Yellow | Total 723 | --- | --- | --- | --- | 724 | flex shrink | 4 | 6 725 | width | 300 | 600 726 | shrunk space | - | - | 100 727 | total shrink scaled width | - | - | **4800** 728 | 729 |
730 | 731 | **Step 4-2: Back to calculating "shrink ratio"** 732 | 733 | Fantastic, now that we know the "total shrink scaled width", we can return with calculating the "shrink ratio". Remember the formula: 734 | 735 | ```code 736 | shrink ratio = (width x flex shrink) / total shrink scaled width 737 | ``` 738 | 739 | _Green_ 740 | 741 | ```code 742 | shrink ratio = (300 x 4) / 4800 743 | 744 | => 0.25 745 | ``` 746 | 747 | _Yellow_ 748 | 749 | ```code 750 | shrink ratio = (600 x 6) / 4800 751 | 752 | => 0.75 753 | ``` 754 | 755 | Let's add this information to our chart: 756 | 757 | | Green | Yellow | Total 758 | --- | --- | --- | --- | 759 | flex shrink | 4 | 6 760 | width | 300 | 600 761 | shrunk space | - | - | 100 762 | shrink ratio | **0.25** | **0.75** 763 | 764 |
765 | 766 | **Final step: Calculate "new width"** 767 | 768 | Remember the formula: 769 | 770 | ```code 771 | new width = width - (shrink space x shrink ratio) 772 | ``` 773 | 774 | _Green_ 775 | 776 | ```code 777 | new width = 300 - (100 x 0.25) 778 | 779 | => 275 780 | ``` 781 | 782 | _Yellow_ 783 | 784 | ```code 785 | new width = 600 - (100 x 0.75) 786 | 787 | => 525 788 | ``` 789 | 790 | Done! We have successfully calculated the new width 🥳 791 | 792 | | Green | Yellow 793 | --- | --- | --- | 794 | width | 300 | 600 795 | shrunk space | 4 | 6 796 | shrink ratio | 0.25 | 0.75 797 | **new width** | **275** | **525** 798 | 799 |
800 |
801 | 802 | 803 | 804 | ### [Day 25: flex-basis](#flex-basis) 805 | 806 | With the flex-grow and flex-shrink property, we know the flex size changes. With the `flex-basis` property, this is where we set its initial size. You can think of this property as the width of our flex items. So your next question might be what's the difference between width and flex-basis. Of course, you can still use width and it will still work. The reason it works is because if you didn't set the flex-basis, it will default to the width. So your browser will always try to find the `flex-basis` value as the size indicator. And if it can't find it, then it has no choice but to go with your width property. Don't make the browser do extra work. Do it the proper flex way and use `flex-basis`. 807 | 808 | You may notice I referenced width in my previous formulas. That's because I had not cover flex-basis at that point. So if we want to be **flex** correct, please replace where I mentioned width with flex-basis 😝 809 | 810 |

flex-basis

811 | 812 | ```css 813 | .child { 814 | flex-basis: auto /* default */ 815 | or 816 | } 817 | ``` 818 | 819 | Valid width values are absolute [``](https://developer.mozilla.org/en-US/docs/Web/CSS/length) and [``](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage). You can see some examples and read more on MDN web docs: 820 | 821 | - [`MDN: `](https://developer.mozilla.org/en-US/docs/Web/CSS/length) 822 | - [`MDN: `](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) 823 | 824 | 825 | 826 | ### [Day 26: flex-basis vs widths](#flex-basis-vs-widths) 827 | 828 | Here you can see very clearly that when an item has a flex-basis and a width. The browser will always use the value set with `flex-basis` . Again, another reason to use the proper flex way 😉 829 | 830 | But watch out, if you also set a `min-width` and `max-width`. In those cases, `flex-basis` will lose and will not be used as the width. 831 | 832 |

flex-basis vs widths

833 | 834 | 835 | 836 | ### [Day 27: flex](#flex) 837 | 838 | Sometimes, setting `flex-grow`, `flex-shrink` and `flex-basis` separately are tiring. Well, don't you worry. For the lazy programmers, I mean the efficient programmers 😜 You can set all 3 with the `flex` shorthand. The added bonus of this way is you don't have to set all 3 value, you can skip the properties you're not interested in and just set the one you are. And for the ones you skipped, it will just take on the default value. Awesome 👍 839 | 840 |

flex

841 | 842 | ```css 843 | .child { 844 | flex: 0 1 auto /* default */ 845 | or 846 | or 847 | or 848 | or 849 | or 850 | } 851 | ``` 852 | 853 | 854 | 855 | ### [Day 28: align-self](#align-self) 856 | 857 | Remember our `align-items` property where we can set the flex item along the cross axis. The thing with `align-items` is that it forces ALL of the flex items to play with the rules. But what if you want one of them to break the rule. No worries, for you independent thinkers, you can use `align-self`. This property accepts all of the same values given to `align-items`, so you can easily break from the pack 😎 858 | 859 |

align-self

860 | 861 | ```css 862 | .child-1 { 863 | align-self: stretch /* default */ 864 | or flex-start 865 | or flex-end 866 | or center 867 | or baseline 868 | } 869 | ``` 870 | 871 | ## Summary 872 | 873 | 874 | 875 | ### [Day 29: Flexbox Properties](#flexbox-properties) 876 | 877 | YAY!!! You did it! You learned all the properties of Flexbox! You're a Flexbox ninja now! We covered a lot in this short amount of time. Go back and re-visit the ones you still don't understand. Don't just read my Flexbox lessons. Check out other Flexbox tutorials. Sometimes reading a different perspective will help solidify your knowledge and fill in any gaps. Remember the best way to get better is to apply. I gave you the knowledge, now it's on YOU to apply and build something with it 💪 878 | 879 |

Flexbox Properties

880 | 881 | 882 | 883 | ### [Day 30: Flexbox Cheatsheet](#flexbox-cheatsheet) 884 | 885 | Final tidbit! Let me give you one more tidbit for the road. Memorizing all the available properties is not easy. Even after doing creating this entire tutorial, I still don't have all these properties memorized. Being a good programmer is not about how much you memorize, it's about problem solving. And that's why it's important for a programmer to continue to stay humble and learn. It's all about expanding our toolkit so when we do face a problem, we have a variety of tools that we can select from to fix it 🧰 886 | 887 | Congratulation for completing Flexbox30! I hope you learned a lot and thank you for letting my tidbits be part of your programming journey 💛 888 | 889 |

Flexbox Cheatsheet

890 | 891 | **[⬆ back to top](#table-of-contents)** 892 | 893 | 894 | 895 | ### [Bonus: Aligning with Auto Margins](#auto-margins) 896 | 897 | Bonus content! Another way to align Flexbox child elements is to use auto margins. Although this isn't a Flexbox property, it's still important to be aware of it because it has a very interesting relationship with Flexbox. Check out my code notes on it if you're interested 👉 [Flexbox: Aligning with Auto Margins](/flexbox-aligning-with-auto-margins/README.md) 898 | 899 |

Flexbox Cheatsheet

900 | 901 | 902 | 903 | ## 📚 Resources 904 | 905 | **Learning Flexbox** 906 | 907 | - [MDN web docs: Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) 908 | - [MDN web docs: Basic Concepts of flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) 909 | - [CSS-Tricks: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 910 | - [Yoksel: Flex Cheatsheet](https://yoksel.github.io/flex-cheatsheet/) 911 | - [JoniBologna.com: Flexbox Cheatsheet](http://jonibologna.com/flexbox-cheatsheet/) 912 | - [Interneting is hard: Flexbox](https://internetingishard.com/html-and-css/flexbox/) 913 | 914 | **Official Spec** 915 | 916 | - [W3C: Flexbox](https://www.w3.org/TR/css-flexbox-1/) 917 | 918 | **Community Suggestion** 919 | 920 | - [Flexbox Zombies](https://flexboxzombies.com) $ 921 | - [Flexbox Froggy](https://flexboxfroggy.com/) 922 | - [Wes Bos: What the Flexbox?!](https://flexbox.io/) 923 | 924 | 925 | 926 | ## 👋 Say Hello 927 | 928 | > I share JS, HTML, CSS tidbits every week! 929 | 930 | Twitter: [@samantha_ming](https://twitter.com/samantha_ming) 931 | Instagram: [@samanthaming](https://www.instagram.com/SamanthaMing/) 932 | Facebook: [@hi.samanthaming](https://www.facebook.com/hi.samanthaming/) 933 | Medium: [@samanthaming](https://medium.com/@samanthaming) 934 | Dev: [@samanthaming](https://dev.to/samanthaming) 935 | Official: [samanthaming.com](https://www.samanthaming.com/) 936 | 937 | 938 | 939 | ## 💖 Download & Share 940 | 941 | Absolutely! You are more than welcome to download and share my code tidbits. If you've gotten any value from my content and would like to help me reach more people, please do share! 942 | 943 | One thing that I kindly ask is that you don't edit the images or crop my name out. Please leave the images intact. Thank you for choosing to do the right thing 😇 944 | 945 | 946 | 947 | ## 🌟 Contribution 948 | 949 | ~~Yes! Anyone is welcome to contribute to the quality of this content. Please feel free to submit a PR request for typo fixes, spelling corrections, explanation improvements, etc. If you want to help translate the tutorial, that's even cooler! I'm hoping to at least create a Chinese version soon 👩🏻‍🏫~~ 950 | 951 | (Note: all updates will now appear in the new repo: https://github.com/samanthaming/samanthaming.com) 952 | 953 | **[⬆ back to top](#table-of-contents)** 954 | 955 | 956 | 957 | ## 👩🏻‍⚖️ License 958 | 959 | Thank you for wanting to share and include my work in your project 😊 If you're wondering how to provide attributions. It simply means don't edit the images. There is attribution automatically built into them. Easy peasy right! So you don't have to provide additional attribution when you share the images ⭐️ 960 | 961 | Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License. 962 | 963 | **[⬆ back to top](#table-of-contents)** 964 | --------------------------------------------------------------------------------