gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: sent to local repo in error (#31165)

Browse Source 
* 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 <code></code> 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 <code></code> 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 <code></code> labels to individual code items.
Sorry for all of the commits. I just saw the styling guide. Doing my own QC.
This commit is contained in:
Lee
2019-07-19 20:58:03 +00:00
committed by Quincy Larson
parent a1ff408e00
commit 6d49b972fb
3 changed files with 196 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
guide/english/css/flexbox-display-flex/index.md Normal file
View File

@ -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 <code>display:flex;</code>.
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
<div class="container">
<div class="box">
<p>Box 1</p>
</div>
<div class="box">
<p>Box 2</p>
</div>
<div class="box">
<p>Box 3</p>
</div>
<div class="box">
<p>Box 4</p>
</div>
</div>
```
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 <code>display: flex;</code> 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 <code>flex-direction: row;</code>. It is behaving in the same way as <code>float: left;</code>.
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")

47
guide/english/css/flexbox-flex-basis/index.md Normal file
View File

@ -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 <code>flex-basis:</code> instead of <code>width:</code> or <code>height:</code>. <code>flex-basis:</code> is dynamic, so it can shrink or grow to fit inside the flex container.
<code>flex-basis:</code> can be set as a value, e.g. <code>200px;</code> <code>20vw;</code> <code>50vh;</code> or <code>auto</code>. Auto will assess the contents of the flex item and expand or contract with them. Example 1 shows a nested div with <code>flex-basis: 20vw;</code>, while the second and third use <code>flex-basis: auto;</code>.
**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
<div class="container">
<div class="box">Box 1</div>
</div>
```
![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;")

92
guide/english/css/flexbox-flex-grow/index.md Normal file
View File

@ -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 <code>flex-direction</code> of the flex container. When there are multiple flex items in a container, the available space is shared among them to provided proportions. <code>flex-grow:</code> has no effect with static dimensions; use <code>min-width:</code>, <code>min-height:</code> or <code>flex-basis:</code>.
Here’s an example with just one div in a flex container. Notice than <code>min-</code> is used with <code>width</code> and <code>height</code> to allow it to be affected. However, <code>flex-grow:</code> 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
<div class="container">
<div class="box">Box 1</div>
</div>
```
![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 <code>flex-grow: 1;</code> applied to the <code>.box</code> class. With <code>flex-grow:</code> 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 <code>box</code> and <code>box2</code> 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
<div class="container">
<div class="box">Box 1</div>
<div class="box2">Box 2</div>
</div>
```
![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 <code>flex-grow: 2;</code>.
```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.