From 6d49b972fb2309107e9ddce113f924e6eef5916d Mon Sep 17 00:00:00 2001 From: Lee Date: Fri, 19 Jul 2019 20:58:03 +0000 Subject: [PATCH] fix: sent to local repo in error (#31165) * Create index.md This file introduces flex-grow: with screen shots and code samples. As with all of my commits, this is a proper contribution effort, neither copy & paste nor a links list. * Update index.md Added title: 'Flex Grow' to avoid Travis CL no frontmatter error. * Update index.md Added labels to the code blocks. * fix: updated individual code items & sentences Added tags to individual code items. Sorry for so many commits. I just saw the styling guide. * Create flexbox-display-flex.md (#2) * Create flexbox-display-flex.md This file introduces the concept of display:flex and flex-direction:[row | column]. * Rename guide/english/css/flexbox-display-flex.md to guide/english/css/flexbox-display-flex/index.md Changed the folder structure to comply with index.md. * Update index.md Added title: Display Flex to avoid Travice CL no frontmatter error. * Update index.md Added labels to the code blocks. * fix: update individual code items. Added tags to individual code items. Sorry for so many commits. I just saw the styling guide. * Create index.md (#4) * Create index.md This file contains details about flex-basis, with screenshots and code samples. As with all of my commits, this is my own work not copy & paste or a lazy linkathon. * Update index.md Added the title; Flex Basis, to avoid Travis CI no frontmatter error. * Update index.md Added labels to the code blocks. * fix: added labels for code items Added labels to individual code items. Sorry for all of the commits. I just saw the styling guide. Doing my own QC. --- .../english/css/flexbox-display-flex/index.md | 57 ++++++++++++ guide/english/css/flexbox-flex-basis/index.md | 47 ++++++++++ guide/english/css/flexbox-flex-grow/index.md | 92 +++++++++++++++++++ 3 files changed, 196 insertions(+) create mode 100644 guide/english/css/flexbox-display-flex/index.md create mode 100644 guide/english/css/flexbox-flex-basis/index.md create mode 100644 guide/english/css/flexbox-flex-grow/index.md diff --git a/guide/english/css/flexbox-display-flex/index.md b/guide/english/css/flexbox-display-flex/index.md new file mode 100644 index 0000000000..d5f66f192f --- /dev/null +++ b/guide/english/css/flexbox-display-flex/index.md @@ -0,0 +1,57 @@ +--- +title: Display Flex +--- +# Display Flex + +A flexbox container can grow and shrink dynamically according to the size of the viewport. +To transform a CSS container into a flexbox container, we need to use display:flex;. +Any elements nested inside the flex container will be displayed according to any attributes given to it. + +![alt text](https://raw.githubusercontent.com/leebut/Flexbox-Images/master/flexcontainer.png "Flex container with nested flex items") + +**Example:** +CSS CODE +-------- + +```css +.container { + display: flex; + background: yellow; +} +.box { + background-color: brown; + width: 200px; + height: 200px; + box-sizing: border-box; + border: solid 1px black; + color: white; +``` +HTML CODE +--------- +```html +
+
+

Box 1

+
+
+

Box 2

+
+
+

Box 3

+
+
+

Box 4

+
+
+``` +Here's the result: +![alt text](https://raw.githubusercontent.com/leebut/Flexbox-Images/master/flex-direction-row.png "Container set to flex-direction: row;") + +The normal behaviour of divs is for them to stack vertically, but display: flex; lays out the divs into a single horizontal row, along what is called the **main axis**, which runs horizontally from left to right. This is because the default direction of a flex container is flex-direction: row;. It is behaving in the same way as float: left;. + +The other flex direction is _column_, and its main axis runs vertically from top to bottom. +The images below summarise the significance of the main axis, and they also show some alignment attributes. + +![alt text](https://raw.githubusercontent.com/leebut/Flexbox-Images/master/main%20axis%20row.png "Row: the main axis") + +![alt text](https://raw.githubusercontent.com/leebut/Flexbox-Images/master/main%20axis%20col.png "Column: the main axis") diff --git a/guide/english/css/flexbox-flex-basis/index.md b/guide/english/css/flexbox-flex-basis/index.md new file mode 100644 index 0000000000..36aa14391e --- /dev/null +++ b/guide/english/css/flexbox-flex-basis/index.md @@ -0,0 +1,47 @@ +--- +title: Flex Basis +--- + +# Flex-basis + +To determine the initial width or height of a flex element along the main axis, we can use flex-basis: instead of width: or height:. flex-basis: is dynamic, so it can shrink or grow to fit inside the flex container. +flex-basis: can be set as a value, e.g. 200px; 20vw; 50vh; or auto. Auto will assess the contents of the flex item and expand or contract with them. Example 1 shows a nested div with flex-basis: 20vw;, while the second and third use flex-basis: auto;. + +**Example 1:** +```css +.container { +display: flex; +flex-direction: row; +justify-content: center; +background-color: yellow; +} +.box { +background-color: brown; +flex-basis: 20vw; +height: 200px; +box-sizing: border-box; +border: solid 1px black; +color: white; +} +``` +```html +
+
Box 1
+
+``` +![text alt](https://raw.githubusercontent.com/leebut/Flexbox-Images/master/flex-basis-20vw.png "flex-basis: 20vw;") + +**Examples 2 and 3:** +```css +.box { +background-color: brown; +flex-basis: auto; +height: 200px; +box-sizing: border-box; +border: solid 1px black; +color: white; +} +``` +![text alt](https://raw.githubusercontent.com/leebut/Flexbox-Images/master/flex-basis-auto-shrank.png "flex-basis: auto;") + +![text alt](https://raw.githubusercontent.com/leebut/Flexbox-Images/master/flex-basis-auto-resized-to-longer-content.png "flex-basis: auto;") diff --git a/guide/english/css/flexbox-flex-grow/index.md b/guide/english/css/flexbox-flex-grow/index.md new file mode 100644 index 0000000000..9ea540dd66 --- /dev/null +++ b/guide/english/css/flexbox-flex-grow/index.md @@ -0,0 +1,92 @@ +--- +title: Flex Grow +--- +# Flex-grow + +A flex item can be set to ‘grow’ along the main axis. What this means is that the item will occupy any total available space inside the flex container, making it wider or taller depending on the flex-direction of the flex container. When there are multiple flex items in a container, the available space is shared among them to provided proportions. flex-grow: has no effect with static dimensions; use min-width:, min-height: or flex-basis:. + +Here’s an example with just one div in a flex container. Notice than min- is used with width and height to allow it to be affected. However, flex-grow: has not been applied in this instance. + +```css +.container { + display: flex; + flex-direction: row; + justify-content: center; + background-color: yellow; +} +.box { + background-color: brown; + min-width:200px; + min-height: 200px; + box-sizing: border-box; + border: solid 1px black; + color: white; +} +``` +```html +
+
Box 1
+
+``` +![alt text](https://raw.githubusercontent.com/leebut/Flexbox-Images/master/flex-grow-no-grow.png "flex-grow: not applied") + +The next example shows the div with flex-grow: 1; applied to the .box class. With flex-grow: the div *grows* into the available space both sides of it. +```css +.box { + background-color: brown; + min-width:200px; + min-height: 200px; + box-sizing: border-box; + border: solid 1px black; + color: white; + flex-grow: 1; +} +``` +![alt text](https://github.com/leebut/Flexbox-Images/blob/master/flex-grow-one-item.png?raw=true "One flex item, flex-grow: 1;") + +The value of 1 could have been any number because it only becomes significant when multiple flex items are allocated different proportions of free space. It is similar to cutting a cake into pieces, one piece is the whole cake, but if there are two people, they get (as close to) one equal piece each. Let’s take a look at that now. + +In this example, the classes box and box2 both receive 1 piece of the free space each (50%), an equal allocation. If the number were 15, they’d both receive 15 smaller pieces of the space. +```css +.box { + background-color: brown; + min-width:200px; + min-height: 200px; + box-sizing: border-box; + border: solid 1px black; + color: white; + flex-grow: 1; +} +.box2 { + display: flex; + min-width:200px; + min-height: 200px; + justify-content: center; + background: rgb(142, 213, 255); + align-items: center; + flex-grow: 1; +} +``` +```html +
+
Box 1
+
Box 2
+
+``` +![alt text](https://raw.githubusercontent.com/leebut/Flexbox-Images/master/flex-grow-two-items-grow-val-1.png "Two flex items receiving flex-grow: 1;") + +See what happens when Box 2 is allocated flex-grow: 2;. +```css +.box2 { + display: flex; + min-width:200px; + min-height: 200px; + justify-content: center; + background: rgb(142, 213, 255); + align-items: center; + flex-grow: 2; +} +``` +![alt text](https://raw.githubusercontent.com/leebut/Flexbox-Images/master/flex-grow-two-items-grow-val-1%2B2.png "One item receives flex-grow: 1, the other receives flex-grow: 2") + +This time, Box 2 receives twice as much free space as Box 1. Remember, it does not make Box 2 twice as wide. It is simply allocated twice as much free space. To use the cake analogy, Box 1 receives one piece of cake, while Box 2 receives two pieces.