-
Notifications
You must be signed in to change notification settings - Fork 2
/
App.css
71 lines (48 loc) · 3.23 KB
/
App.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header {
background-color: #222;
height: 150px;
padding: 20px;
color: white;
}
.App-title {
font-size: 1.5em;
}
.navbar {
margin-top: auto;
}
#top-filler {
margin-bottom: auto
}
.nav-container {
align-items: flex-end;
}
.App-intro {
font-size: large;
}
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 1> flex-end - The items are packed flush to each other toward the edge of the alignment container depending on the flex container's cross-end side.
This only applies to flex layout items. For items that are not children of a flex container, this value is treated like end.
https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#Formal_syntax
A Flexible Layout must have a parent element with the display property set to flex - This requirement here is taken care of by < header className="navbar App-header" id="nav-container"> Because if I do inspect element on the running app on Navbar login section I will see that the navbar class of spectree framework, has display: flex
An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area's container's display property to flex or inline-flex. As soon as we do this the direct children of that container become flex items. As with all properties in CSS, some initial values are defined,
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#The_flex_container
2> flex-end - Explanation on how flex-end is putting things at the end here
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#Start_and_end_lines
Do inspect element on the running app on Navbar login section -> In the devtool change 'flex-end' to 'flex-start' and I will see the <section className="navbar-section"> which **holds home login sign up** section will move vertically up to take the top left position of the navbar
3> What exactly is Flexbox -
The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.
Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
Source - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/