From 1464109c62aac7ee6286abc21be242a961c1ac86 Mon Sep 17 00:00:00 2001 From: Jazlyn Date: Fri, 14 Jun 2024 09:30:52 -0700 Subject: [PATCH 1/3] --- study-guides/flexbox.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/study-guides/flexbox.md b/study-guides/flexbox.md index de5a065..11ad53f 100644 --- a/study-guides/flexbox.md +++ b/study-guides/flexbox.md @@ -1 +1,11 @@ # Flexbox +## Creating a Flexbox Container and Items + +You may be wondering, how do we even define or create a Flexbox container and items? Typically developers use the `div` HTML element to create sections that will then be defined as a Flexbox. In the CSS style file, we add a rule for these `div` containers that set the property `display` to the value `flex`. + +```css +.container { + display: flex; +} +``` +In the example above, we create a rule that all `div` elements with the class name `container` will have the `display` property with value `flex` (aka a Flexbox!). Once you have defined a flex container, all elements inside automatically act as flex items. From 74d46683c8876210529b9db6070acba73d533336 Mon Sep 17 00:00:00 2001 From: larnelle15 Date: Fri, 14 Jun 2024 09:31:12 -0700 Subject: [PATCH 2/3] --- study-guides/flexbox.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/study-guides/flexbox.md b/study-guides/flexbox.md index de5a065..1103216 100644 --- a/study-guides/flexbox.md +++ b/study-guides/flexbox.md @@ -1 +1,6 @@ +## What is Responsive Web Design + +**Responsive web design (RWD)** is a development approach that allows for elements to dynamically change its appearance or layout depending on screen size. For example, elements may reorder, grow/shrink in size depending on the size of the screen. + # Flexbox +There are different methods for incorporating responsive design. In this lab, we will explore a tool called **Flexbox** that helps create a fluid layout for website responsiveness. To learn more about other methods, check out [MDN Doc on responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design). \ No newline at end of file From e92b2a20df6e87b8f6ff2d494be4af03b00ad8d8 Mon Sep 17 00:00:00 2001 From: larnelle15 Date: Fri, 14 Jun 2024 10:19:19 -0700 Subject: [PATCH 3/3] --- study-guides/flexbox.md | 1 + 1 file changed, 1 insertion(+) diff --git a/study-guides/flexbox.md b/study-guides/flexbox.md index 7b74a74..5002592 100644 --- a/study-guides/flexbox.md +++ b/study-guides/flexbox.md @@ -3,3 +3,4 @@ **Responsive web design (RWD)** is a development approach that allows for elements to dynamically change its appearance or layout depending on screen size. For example, elements may reorder, grow/shrink in size depending on the size of the screen. # Flexbox +There are different methods for incorporating responsive design. In this lab, we will explore a tool called **Flexbox** that helps create a fluid layout for website responsiveness. To learn more about other methods, check out [MDN Doc on responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design).