DEV Community

Suma
Suma

Posted on

CSS BACKGROUND AND FLEXBOX STYLES

BACKGROUND STYLES

background color : sets background color
body{ background color : blue;}

background image : sets an image as background
div { background-image : ur1("bg.jpg");}

background size : resize background image
div { background-size: cover:}

background repeat : repeat or no-repeat image
div { background-repeat:no-repeat;}

background position : move image position
div { background-position : center;}

FLEXBOX STYLES

display:flex : activates flex container
.container {display:flex;}

flex-direction : row or column layout
.container { flex-direction: column;}

justify-content : align items horizontally
.container { justify-content: space-between;}

align-items : align items vertically
.container { align-items: center;}

flex-wrap : move items to new line
.container { flex-wrap : wrap;}

gap : space between flex items
.container {gap: 10px;}

Top comments (0)