You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
#### I can ceneter an element responsively like below
2
+
3
+
In CSS I will have
4
+
5
+
```js
6
+
spacer: {
7
+
flex:"1 1 100%";
8
+
}
9
+
```
10
+
11
+
And then to center "Some Element"
12
+
13
+
```js
14
+
<div className={classes.spacer} />
15
+
... Some Element...
16
+
<div className={classes.spacer} />
17
+
```
18
+
19
+
#### Explanation
20
+
21
+
1> < flex: 1 1 100% > - With < flex: 1 1 100% > I am making 'spacer' to stay full-width. And then adding two 'spacer' class to both side of the 'Some Element' to make the 'Some Element get centered.
22
+
23
+
A) 100% - this % is the 'flex-basis'. Its a sub-property of the Flexible Box Layout module. It specifies the initial size of the flexible item, before any available space is distributed according to the flex factors. If the element is not a flexible item, the flex-basis property has no effect. flex-basis can be a number (e.g. 100px) representing a length unit, or percentage, )
24
+
25
+
B) The general syntax - flex : flex-grow | flex-shrink | flex-basis
**flex-grow** - defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.
**flex-shrink** - specifies the "flex shrink factor", which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row. When omitted, it is set to 1 and the flex shrink factor is multiplied by the flex basis when distributing negative space.
33
+
34
+
---
35
+
36
+
SO, in the example above, if I want to expand the middle element's width, I use flex-shrink to make it '2' instead of '1'
37
+
38
+
C) The general way flex work - You need to add display:flex to the parent tag for and then flex:1 to the child to enable the child to expand to 100% of parent.
39
+
40
+
flex - This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto.
Copy file name to clipboardExpand all lines: CSS/flexbox.md
+43-9Lines changed: 43 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,13 +1,18 @@
1
-
2
1
### What exactly is Flexbox -
3
2
4
3
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").
5
4
5
+
### Container and Items
6
+
7
+
In flexbox we have a container and it’s items. These are the two components of any flexbox component. Any html element that is a direct child of the flexbox container, becomes a flexbox item.
8
+
6
9
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.
7
10
8
-
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.).
11
+
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 to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
12
+
13
+
A good example of turning a block to a flex-box design for few div elements - [https://vegibit.com/css-flexbox-tutorial/](https://vegibit.com/css-flexbox-tutorial/)
9
14
10
-
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.
15
+
### 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.
Note, this is the only property you need to set on the parent container and all its immediate children will become automatically flex items.
28
+
29
+
And then this is how generally it works - I need to add **display:flex** to the parent tag for and then **flex:1** to the child to enable the child to expand to 100% of parent.
30
+
31
+
```js
32
+
.fb-container {
33
+
background-color:green;
34
+
flex:1;
35
+
36
+
}
37
+
.somedatadiv {
38
+
width:75%;
39
+
max-width:345px;
40
+
background-color: grey;
41
+
padding:30px;
42
+
}
43
+
<body style="height:100vh;display:flex;">
44
+
<div class="fb-container">
45
+
<div class="somedatadiv">
46
+
Some data
47
+
</div>
48
+
<div class="anotherdiv">
49
+
data
50
+
</div>
51
+
</div>
52
+
</body>
53
+
```
54
+
22
55
### 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,
@@ -31,7 +64,6 @@ Since flexbox is a whole module and not a single property, it involves a lot of
31
64
32
65
If regular layout is based on both block and inline flow directions, the flex layout is based on "flex-flow directions". Please have a look at this figure from the specification, explaining the main idea behind the flex layout.
Copy file name to clipboardExpand all lines: React/setState-what-does-it-do.md
+5-1Lines changed: 5 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,4 +7,8 @@ The first thing React will do when setState is called is merge the object you pa
7
7
8
8
Whenever setState() method is called, ReactJS creates the whole Virtual DOM from scratch. Creating a whole tree is very fast so it does not affect the performance. At any given time, ReactJS maintains two virtual DOM, one with the updated state Virtual DOM and other with the previous state Virtual DOM.
9
9
10
-
ReactJS using diff algorithm compares both the Virtual DOM to find the minimum number of steps to update the Real DOM.
10
+
ReactJS using diff algorithm compares both the Virtual DOM to find the minimum number of steps to update the Real DOM.
11
+
12
+
I wouldn't worry too much about calling renders excessively until you have determined you have a performance problem.
13
+
14
+
#### Rendering (in the React context) and committing the virtual DOM updates to the real DOM are different matters. The rendering here is referring to generating virtual DOMs, and not about updating the browser DOM. React may batch the setState calls and update the browser DOM with the final new state.
0 commit comments