Add Give Elements The Same Width With Flexbox as a css til

README.md

@@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_879 TILs and counting..._
+_880 TILs and counting..._
 
 ---
 
@@ -99,6 +99,7 @@ _879 TILs and counting..._
 - [Circular Icons With A Massive Border Radius](css/circular-icons-with-a-massive-border-radius.md)
 - [Create A Pulsing Background With CSS Animation](css/create-a-pulsing-background-with-css-animation.md)
 - [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md)
+- [Give Elements The Same Width With Flexbox](css/give-elements-the-same-width-with-flexbox.md)
 - [Lighten And Darken With CSS Brightness Filter](css/lighten-and-darken-with-css-brightness-filter.md)
 - [Lighten And Darken With SCSS](css/lighten-and-darken-with-scss.md)
 - [Make A Block Of Text Respect New Lines](css/make-a-block-of-text-respect-new-lines.md)

css/give-elements-the-same-width-with-flexbox.md

@@ -0,0 +1,26 @@
+# Give Elements The Same Width With Flexbox
+
+By default, a row of elements in a basic flex container are going to have
+dynamic widths that accommodate their contents. This may not be desirable if
+you're going for a uniform look. You could give all child elements a fixed
+width (e.g. `width: 100px`), but that loses out on the _flexibility_ of a
+flexbox layout.
+
+You can instead give all child elements a uniform and flexible width using the
+`flex` property.
+
+```css
+.flex-container {
+  display: flex;
+}
+
+.flex-child {
+  flex: 1;
+}
+```
+
+This value is a relative ratio. If all children of the flex container have the
+same `flex` value (i.e. `1`), then they will all be equally sized and that size
+will adjust as the width of the flex container changes.
+
+[source](https://css-tricks.com/the-thought-process-behind-a-flexbox-layout/)