CSS - Code Snippets

How do you align items along the main axis?

Use the justify-content property to align items along the main axis. Common values include:

flex-start: Items align to the start of the container (default).
flex-end: Items align to the end of the container.
center: Items are centered.
space-between: Items are evenly distributed with space between them.
space-around: Items are evenly distributed with equal space around

What is the difference between flex-direction: row and flex-direction: column?

flex-direction: row: The main axis runs horizontally, and flex items are laid out from left to right (default behavior).
flex-direction: column: The main axis runs vertically, and flex items are laid out from top to bottom.

How do you create a flex container?

To create a flex container, set the display property of an element to flex or inline-flex:

1

2

3

.container {

display: flex; /* or inline-flex */

}

What are the main components of Flexbox?

The main components of Flexbox are:

Flex Container: The parent element that holds flex items. It is created by setting display: flex or display: inline-flex.
Flex Items: The child elements inside the flex container.
Main Axis: The primary axis along which flex items are laid out (horizontal by default).
Cross Axis: The axis perpendicular

What is CSS Flexbox?

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that allows you to design flexible and responsive layouts. It provides an efficient way to align, distribute, and space items within a container, even when their sizes are unknown or dynamic.

Customize the Browser’s Scrollbar only with CSS

Snippets

-webkit-scrollbar consists of seven different pseudo-elements, and together comprise a full scrollbar UI element:

::-webkit-scrollbar the background of the bar itself.
::-webkit-scrollbar-button the directional buttons on the scrollbar.
::-webkit-scrollbar-track the empty space “below” the progress bar.
::-webkit-scrollbar-track-piece the top-most layer of the the progress bar not covered by the thumb.
::-webkit-scrollbar-thumb the draggable scrolling element resizes depending on the size of

Fix iOS bug not displaying 100vh correctly

Snippets

There are many Javascript fixes for the viewport height units bug in iOS 7 (iPhone & iPad), this article will cover how to resolve this bug with CSS. This particular bug affects the rendering of viewport height units, for example: if you try to make a full viewport height container

Pure CSS Page Loader in website

Snippets

A preloader or what some call a loading screen — is the what you see on some sites before the main content of the web page is loaded.

.page-loader{
    position: fixed;
    z-index: 200;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background: #fff;
    display: block;  
    
}
.page-loader .fa{
    font-size: 2.5rem;
}
.page-loader,
.page-loader.visible{
    -webkit-transition: 0.6s;
    -ms-transition: 0.6s;
    -moz-transition: 0.6s;
    transition: 0.6s;
    opacity: 1;
    visibility: visible;    
}
.page-loader.p-hidden{
    visibility: hidden;
    opacity: 0;
}
    .page-loader div{
        position: absolute;
        top:50%;
        width: 100%;
        text-align: center;
        color: #1d1d1d;
        margin-top: -50px;
    	display: block; 
    }
		.page-loader div .icon{
			display: inline-block;
			margin-left: -20px;
            left: 50%;
			width: 40px;
			height: 40px;
			content: "";
			background: #1d1d1d;
			border-radius: 100px;
			border: 8px solid #fff;
			border-top-color: rgba(255, 255, 255, 0.58);
			border-bottom-color: rgba(255, 255, 255, 0.58);
		}
        .page-loader div p{
            margin-top: 100px;
            font-size: 14px;
            color: #555;
            letter-spacing: 1em;
            padding-left: 1em;
            text-transform: uppercase;
			font-family: 'Roboto', 'Helvetica', sans-serif;
			font-weight: bold;
        }

.ion-spin, .ion-loading-a, .ion-loading-b, .ion-loading-c, .ion-loading-d, .ion-looping, .ion-refreshing, .ion-ios7-reloading {
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

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

72

73

74

.page-loader{

position: fixed;

z-index: 200;

width: 100%;

height: 100%;

top:0;

left:0;

background: #fff;

display: block;

}

.page-loader .fa{

font-size: 2.5rem;

}

.page-loader,

.page-loader.visible{

-webkit-transition: 0.6s;

-ms-transition: 0.6s;

-moz-transition: 0.6s;

transition: 0.6s;

opacity: 1;

visibility: visible;

}

.page-loader.p-hidden{

visibility: hidden;

opacity: 0;

}

.page-loader div{

position: absolute;

top:50%;

width: 100%;

text-align: center;

color: #1d1d1d;

margin-top: -50px;

display: block;

}

.page-loader div .icon{

display: inline-block;

margin-left: -20px;

left: 50%;

width: 40px;

height: 40px;

content: "";

background: #1d1d1d;

border-radius: 100px;

border: 8px solid #fff;

border-top-color: rgba(255, 255, 255, 0.58);

border-bottom-color: rgba(255, 255, 255, 0.58);

}

.page-loader div p{

margin-top: 100px;

font-size: 14px;

color: #555;

letter-spacing: 1em;

padding-left: 1em;

text-transform: uppercase;

font-family: 'Roboto', 'Helvetica', sans-serif;

font-weight: bold;

}

.ion-spin, .ion-loading-a, .ion-loading-b, .ion-loading-c, .ion-loading-d, .ion-looping, .ion-refreshing, .ion-ios7-reloading {

-webkit-animation: spin 1s infinite linear;

-moz-animation: spin 1s infinite linear;

-o-animation: spin 1s infinite linear;

animation: spin 1s infinite linear;

}

@keyframes spin {

from {

transform:rotate(0deg);

}

to {

transform:rotate(360deg);

}

HTML

1

2

3

4

5

6

<div>

<p>loading</p>

</div>

Create responsive websites with CSS3 media query

Snippets

Responsive web design (RWD) is an approach whereby a designer creates a web page that “responds to” or resizes itself depending on the type of device it is being seen through. That could be an over-sized desktop computer monitor, a laptop or devices with small screens such as smartphones and