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")