File tree 4 files changed +79
-0
lines changed
Curso-em-Video-Html-CSS/Html-css/Exercicios/ex027-flex-box
4 files changed +79
-0
lines changed Original file line number Diff line number Diff line change 1+ <!DOCTYPE html>
2+ < html lang ="pt-br ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > Flex Box</ title >
7+ < style >
8+ div .container {
9+ display : flex;
10+ flex-flow : row nowrap;
11+
12+ background-color : lightsalmon;
13+ }
14+
15+ div .item {
16+ flex-basis : 250px ;
17+ flex-shrink : 1 ;
18+ flex-grow : 1 ;
19+
20+ background-color : lightblue;
21+ border : 1px solid black;
22+ text-align : center;
23+ }
24+ </ style >
25+ </ head >
26+ < body >
27+ < div class ="container ">
28+ < div class ="item "> A</ div >
29+ < div class ="item "> B</ div >
30+ < div class ="item "> C</ div >
31+ </ div >
32+ </ body >
33+ </ html >
Original file line number Diff line number Diff line change 1+ <!DOCTYPE html>
2+ < html lang ="pt-br ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > Flex Box</ title >
7+ < style >
8+ div .container {
9+ display : flex;
10+ flex-flow : row nowrap;
11+
12+ background-color : lightsalmon;
13+ }
14+
15+ div .item {
16+ flex-basis : 200px ;
17+
18+ background-color : lightblue;
19+ border : 1px solid black;
20+ text-align : center;
21+ }
22+
23+ div # cxA {
24+ flex-shrink : 1 ;
25+ flex-grow : 1 ;
26+ }
27+
28+ div # cxB {
29+ flex-shrink : 1 ;
30+ flex-grow : 4 ;
31+ }
32+
33+ div # cxC {
34+ flex-shrink : 1 ;
35+ flex-grow : 0 ;
36+ }
37+ </ style >
38+ </ head >
39+ < body >
40+ < div class ="container ">
41+ < div class ="item " id ="cxA "> A</ div >
42+ < div class ="item " id ="cxB "> B</ div >
43+ < div class ="item " id ="cxC "> C</ div >
44+ </ div >
45+ </ body >
46+ </ html >
You can’t perform that action at this time.
0 commit comments