From d0bd260d71b030ea53884ed5268e6f52ce3d3e67 Mon Sep 17 00:00:00 2001 From: jbranchaud Date: Sat, 30 Nov 2019 13:42:36 -0600 Subject: [PATCH] Add Give Elements The Same Width With Flexbox as a css til --- README.md | 3 ++- ...ve-elements-the-same-width-with-flexbox.md | 26 +++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 css/give-elements-the-same-width-with-flexbox.md diff --git a/README.md b/README.md index 998a0f1..386eef6 100644 --- a/README.md +++ b/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) diff --git a/css/give-elements-the-same-width-with-flexbox.md b/css/give-elements-the-same-width-with-flexbox.md new file mode 100644 index 0000000..48cc59b --- /dev/null +++ b/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/)