Skip to content

Commit 57db68b

Browse files
LaaouatniLaaouatni
committed
5 CSS FlexBox - FREECODECAMP
1 parent 0fc97af commit 57db68b

File tree

35 files changed

+928
-0
lines changed

35 files changed

+928
-0
lines changed

‎5-CSS-Flexbox/150-Livello-FreeCodeCamp(0)/150(0)Use-display-flex-to-Position-Two-Boxes.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<style>
2+
#box-container {
3+
height: 500px;
4+
display: flex;
5+
}
6+
7+
#box-1 {
8+
background-color: dodgerblue;
9+
width: 50%;
10+
height: 50%;
11+
}
12+
13+
#box-2 {
14+
background-color: orangered;
15+
width: 50%;
16+
height: 50%;
17+
}
18+
</style>
19+
<div id="box-container">
20+
<div id="box-1"></div>
21+
<div id="box-2"></div>
22+
</div>
23+
24+
<!-- Use display: flex to Position Two Boxes This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will
25+
apply the flexbox concept. Placing the CSS property display: flex; on an element allows you to use other flex properties to build a responsive page. Add the CSS property display to #box-container and set its value to flex. -->

‎5-CSS-Flexbox/150-Livello-FreeCodeCamp(0)/5-150-0.png‎

186 KB
Loading

‎5-CSS-Flexbox/151-Livello-FreeCodeCamp(1)/151(1)Add-Flex-Superpowers-to-the-Tweet-Embed.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<style>
2+
body {
3+
font-family: Arial, sans-serif;
4+
}
5+
6+
header {
7+
display: flex;
8+
}
9+
10+
header .profile-thumbnail {
11+
width: 50px;
12+
height: 50px;
13+
border-radius: 4px;
14+
}
15+
16+
header .profile-name {
17+
margin-left: 10px;
18+
display: flex;
19+
}
20+
21+
header .follow-btn {
22+
margin: 0 0 0 auto;
23+
display: flex;
24+
}
25+
26+
header .follow-btn button {
27+
border: 0;
28+
border-radius: 3px;
29+
padding: 5px;
30+
}
31+
32+
header h3,
33+
header h4 {
34+
margin: 0;
35+
display: flex;
36+
}
37+
38+
#inner p {
39+
margin-bottom: 10px;
40+
font-size: 20px;
41+
}
42+
43+
#inner hr {
44+
margin: 20px 0;
45+
border-style: solid;
46+
opacity: 0.1;
47+
}
48+
49+
footer {
50+
display: flex;
51+
}
52+
53+
footer .stats {
54+
font-size: 15px;
55+
display: flex;
56+
}
57+
58+
footer .stats strong {
59+
font-size: 18px;
60+
}
61+
62+
footer .stats .likes {
63+
margin-left: 10px;
64+
}
65+
66+
footer .cta {
67+
margin-left: auto;
68+
}
69+
70+
footer .cta button {
71+
border: 0;
72+
background: transparent;
73+
}
74+
</style>
75+
<header>
76+
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
77+
<div class="profile-name">
78+
<h3>Quincy Larson</h3>
79+
<h4>@ossia</h4>
80+
</div>
81+
<div class="follow-btn">
82+
<button>Follow</button>
83+
</div>
84+
</header>
85+
<div id="inner">
86+
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
87+
<span class="date">1:32 PM - 12 Jan 2018</span>
88+
<hr>
89+
</div>
90+
<footer>
91+
<div class="stats">
92+
<div class="Retweets">
93+
<strong>107</strong> Retweets
94+
</div>
95+
<div class="likes">
96+
<strong>431</strong> Likes
97+
</div>
98+
</div>
99+
<div class="cta">
100+
<button class="share-btn">Share</button>
101+
<button class="retweet-btn">Retweet</button>
102+
<button class="like-btn">Like</button>
103+
</div>
104+
</footer>
105+
106+
<!--
107+
Add Flex Superpowers to the Tweet Embed To the right is the tweet embed that will be used as a practical example. Some of the elements would look better with a different layout. The last challenge demonstrated display: flex. Here you'll add it to several
108+
components in the tweet embed to start adjusting their positioning. Add the CSS property display: flex to all of the following items - note that the selectors are already set up in the CSS: header, the header's .profile-name, the header's .follow-btn,
109+
the header's h3 and h4, the footer, and the footer's .stats. -->

‎5-CSS-Flexbox/151-Livello-FreeCodeCamp(1)/5-151-1.png‎

294 KB
Loading

‎5-CSS-Flexbox/152-Livello-FreeCodeCamp(2)/152(2)Use-the-flex-direction-Property-to-Make-a-Row.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<style>
2+
#box-container {
3+
display: flex;
4+
height: 500px;
5+
flex-direction: row-reverse;
6+
}
7+
8+
#box-1 {
9+
background-color: dodgerblue;
10+
width: 50%;
11+
height: 50%;
12+
}
13+
14+
#box-2 {
15+
background-color: orangered;
16+
width: 50%;
17+
height: 50%;
18+
}
19+
</style>
20+
21+
<div id="box-container">
22+
<div id="box-1"></div>
23+
<div id="box-2"></div>
24+
</div>
25+
26+
<!-- Use the flex-direction Property to Make a Row Adding display: flex to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the flex-direction property to the
27+
parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically. Other options for flex-direction are row-reverse and column-reverse. Note: The default value for
28+
the flex-direction property is row. Add the CSS property flex-direction to the #box-container element, and give it a value of row-reverse. -->

‎5-CSS-Flexbox/152-Livello-FreeCodeCamp(2)/5-152-2.png‎

203 KB
Loading

‎5-CSS-Flexbox/153-Livello-FreeCodeCamp(3)/153(3)Apply-the-flex-direction-Property-to-Create-Rows-in-the-Tweet-Embed.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<style>
2+
body {
3+
font-family: Arial, sans-serif;
4+
}
5+
6+
header {
7+
display: flex;
8+
flex-direction: row;
9+
}
10+
11+
header .profile-thumbnail {
12+
width: 50px;
13+
height: 50px;
14+
border-radius: 4px;
15+
}
16+
17+
header .profile-name {
18+
display: flex;
19+
margin-left: 10px;
20+
}
21+
22+
header .follow-btn {
23+
display: flex;
24+
margin: 0 0 0 auto;
25+
}
26+
27+
header .follow-btn button {
28+
border: 0;
29+
border-radius: 3px;
30+
padding: 5px;
31+
}
32+
33+
header h3,
34+
header h4 {
35+
display: flex;
36+
margin: 0;
37+
}
38+
39+
#inner p {
40+
margin-bottom: 10px;
41+
font-size: 20px;
42+
}
43+
44+
#inner hr {
45+
margin: 20px 0;
46+
border-style: solid;
47+
opacity: 0.1;
48+
}
49+
50+
footer {
51+
display: flex;
52+
flex-direction: row;
53+
}
54+
55+
footer .stats {
56+
display: flex;
57+
font-size: 15px;
58+
}
59+
60+
footer .stats strong {
61+
font-size: 18px;
62+
}
63+
64+
footer .stats .likes {
65+
margin-left: 10px;
66+
}
67+
68+
footer .cta {
69+
margin-left: auto;
70+
}
71+
72+
footer .cta button {
73+
border: 0;
74+
background: transparent;
75+
}
76+
</style>
77+
<header>
78+
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
79+
<div class="profile-name">
80+
<h3>Quincy Larson</h3>
81+
<h4>@ossia</h4>
82+
</div>
83+
<div class="follow-btn">
84+
<button>Follow</button>
85+
</div>
86+
</header>
87+
<div id="inner">
88+
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
89+
<span class="date">1:32 PM - 12 Jan 2018</span>
90+
<hr>
91+
</div>
92+
<footer>
93+
<div class="stats">
94+
<div class="Retweets">
95+
<strong>107</strong> Retweets
96+
</div>
97+
<div class="likes">
98+
<strong>431</strong> Likes
99+
</div>
100+
</div>
101+
<div class="cta">
102+
<button class="share-btn">Share</button>
103+
<button class="retweet-btn">Retweet</button>
104+
<button class="like-btn">Like</button>
105+
</div>
106+
</footer>
107+
108+
<!-- Apply the flex-direction Property to Create Rows in the Tweet Embed The header and footer in the tweet embed example have child items that could be arranged as rows using the flex-direction property. This tells CSS to align the children horizontally.
109+
Add the CSS property flex-direction to both the header and footer and set the value to row. -->

‎5-CSS-Flexbox/153-Livello-FreeCodeCamp(3)/5-153-3.png‎

245 KB
Loading

‎5-CSS-Flexbox/154-Livello-FreeCodeCamp(4)/154(4)Use-the-flex-direction-Property-to-Make-a-Column.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<style>
2+
#box-container {
3+
display: flex;
4+
height: 500px;
5+
flex-direction: column;
6+
}
7+
8+
#box-1 {
9+
background-color: dodgerblue;
10+
width: 50%;
11+
height: 50%;
12+
}
13+
14+
#box-2 {
15+
background-color: orangered;
16+
width: 50%;
17+
height: 50%;
18+
}
19+
</style>
20+
21+
<div id="box-container">
22+
<div id="box-1"></div>
23+
<div id="box-2"></div>
24+
</div>
25+
26+
<!-- Use the flex-direction Property to Make a Column The last two challenges used the flex-direction property set to row. This property can also create a column by vertically stacking the children of a flex container. Add the CSS property flex-direction to
27+
the #box-container element, and give it a value of column. -->

‎5-CSS-Flexbox/154-Livello-FreeCodeCamp(4)/5-154-4.png‎

185 KB
Loading

0 commit comments

Comments
 (0)