Skip to main content

Flex box css

 


body {
    text-align: center;
    /* align-items: center; */
}

.container {
    border: 5px solid red;
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    flex-wrap: wrap;
}

.container div {
    margin: 10px;
    text-align: center;
    font-size: 1.5rem;
    color: white;
}

.item1 {
    background-color: rebeccapurple;
    order: 3;
}

.item2 {
    background-color: coral;
    order: 2;
}

.item3 {
    background-color: tomato;
    order: 1;
}

Comments

Post a Comment

Popular posts from this blog

Topic Learned!

 Topic Learned! State : State is updated whenever user want to update it. Example : ToDo List Props:           Props would be whatever the current state is! useEffect:            componentDidMount() {             // Run This code while the app is loading          Example fetchUser();      } Alternative For componentDidMount(): In functional components    //On Every Render   useEffect (() => {     console . log ( "I re-rendered" );   }); Alternative For componentDidMount() but runs only in first Render: //On First Render/Mount - componentDidMount   useEffect (() => {     console . log ( "Component Is Mounted" );   }, []); Alternative for componentDidUpdate(): //On First Render + whenever the component changes   //componentDidUpdate alternative   useEffect (() => {   ...
Post a Comment
Read more

VERCEL DEPLOYMENT ERROR

 VERCEL DEPLOYMENT ERROR Options | NextAuth.js (next-auth.js.org) Step 1 : cmd $ openssl rand -base64 32 (Copy generated key) Step 2: Go to Project Environment Variables Add NEXTAUTH_SECRET : Key  Step 3: Redeploy
Post a Comment
Read more

Advanced JS Notes

 Advanced JS Notes : Arrow Functions:  Code:  let sumIs = ( a , b ) => a + b console . log ( sumIs ); let randomIs = () => Math . random ; document . addEventListener ( 'click' , () => console . log ( "click" );) Spread Operator // Spread Operator arr = [ 1 , 3 , 1 ]; let sum = ( a , b ) => a + b ; let s = sum (... arr ); // console.log(s); arr2 = [ 2 , 5 , 5 ]; let b = [... arr , ... arr2 ]; //Concating arr using spread console . log ( b ); // Spread With Obj let obj1 = {   name : "Mihir" ,   age : 24 ,   favStar : "TrishCollins" , }; let obj2 = { ... obj1 , name : "Rahul" , favStar : "SRK" }; // Object manipulation using spread operator console . log ( obj2 );
Post a Comment
Read more