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

Doc: Adding HTML Editors Documents (#33343)

Browse Source 
* Add new Content flex box

* add content FlexBox

* add content flexbox

* add content flexbox

* improve bootstrap doc

* improve the bootstrap doc

* improve the bootstrap doc

* Create fcc123

adding jumbotron documentation..

* adding document html editors

* fix: made Editors folder lowercase

* chore: delete unwanted file
This commit is contained in:
Amitkumar
2019-02-09 03:09:33 +05:30
committed by Randell Dawson
parent 8b47ed264b
commit ddc8839e67
3 changed files with 220 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
guide/english/html/responsive-web-design/index.md
View File

@@ -49,6 +49,76 @@ The Bootstrap framework divides a row into twelve columns. In the above example,
![Grid Example](https://www.javatpoint.com/bootstrappages/images/bootstrapgrid.jpg "Basic Grid Example")
### 3. Flexbox Model
The `flexbox layout model`, makes it's easier to design responsive layout structure without using float or positioning.
This layout model is one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
The main axis is defined by `flex-direction`, which has four possible values:
* row
* row-reverse
* column
* column-reverse
To start using the Flexbox model, you need to first define a `flex container`.
The flex container becomes flexible by setting the display property to flex:
```
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
```
#### The flex container properties are:
* flex-direction
* flex-wrap
* flex-flow
* justify-content
* align-items
* align-content
#### The flex item properties are:
* order
* flex-grow
* flex-shrink
* flex-basis
* flex
* align-self
#### CSS Flexbox Properties
The following table lists the CSS properties used with flexbox:
| Property | Description |
| ------------- | -------------------------------------------------------------------------------- |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| justify-content | Horizontally aligns the flex items when the items do not use all available | | | space on the main-axis |
| flex-wrap | Specifies whether the flex items should wrap or not,there is not enough |
| | if room for them on one flex line |
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items,but| | | instead of aligning flex items, it aligns flex lines |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| order | Specifies the order of a flexible item relative to the rest of the flex items | | | inside the same container |
| align-self | Used on flex items. Overrides the container's align-items property |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis |
| | properties |
| align-items | Vertically aligns the flex items when the items do not use all available |
| | space on the cross-axis |
#### Shorthand values for the flex properties
The predefined values are as follows:
- flex: initial
- flex: auto
- flex: none
- flex: <positive-number>
### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
1. <a href='https://medium.freecodecamp.org/css-flexbox-interactive-tutorial-in-8-minutes-including-cheat-sheet-6214e00de3d2' target='_blank' rel='nofollow'>CSS Flexbox Complete tutorial in 8 minutes</a>