Day 22: flexbox

 flex-diection:

flex-wrap: wrap;

justify-content: flex-start;


  1. Flexbox property :
  • Inline-flex : 
  • To make a flex container as an inline-level flex element, use the following syntax : 

container 

{

 display: inline-flex;

}

Using inline-flex, an element is displayed on the same line as the others. Since it follows the height and width of the line of which it is a part, specifying any height and width parameters will be useless, whereas display:flex, takes up the entire available width.

Example :

       
       

1. Using display:inline-flex (takes up limited width)

2. Using display: flex (takes up entire available width)




Other flex properties to explore :

    1. Flex-direction : Defines direction of flex items present inside the flex container.

Values :

      1. row
      2. row-reverse
      3. column
      4. column-reverse

Example :

Flex-direction : column-reverse; 

gives the following output :

Code :

    <!DOCTYPE html>

    <html>

    <head>

    <style>

        .container {

        display: inline-flex;

        flex-direction: column-reverse;

        background-color: rgb(220, 165, 165);

        padding: 10px;

        }

       

        .item {

        background-color: rgba(255, 255, 255, 0.8);

        border: 1px dashed rgba(63, 187, 200, 0.8);

        text-align: center;

        padding: 20px;

        font-size: 30px;

        }

    </style>

    </head>

    <body>

   

    <div class="container">

    <div class="item">flex item 1</div>

    <div class="item">flex item 2</div>

    <div class="item">flex item 3</div>  

    <div class="item">flex item 4</div>

    <div class="item">flex item 5</div>

    <div class="item">flex item 6</div>  

    <div class="item">flex item 7</div>

    <div class="item">flex item 8</div>

    <div class="item">flex item 9</div>  

    </div>

   

    </body>

    </html>

 



Try out the various other values for flex-direction and observe the output.

 

  1. Flex-wrap : wraps the items as per the value assigned to flex-wrap property.

 Values to try :

    1. nowrap
    2. wrap
    3. wrap-reverse

3. Justify-content : 

    Values to try :

    1. flex-start
    2. flex-end
    3. start
    4. end
    5. left
    6. right
    7. center
    8. space-between
    9. space-around
    10. space-evenly

 


Comments

Post a Comment

Popular posts from this blog

else-if condition in if-else statements: Concatenation in JavaScript :

Image
  else-if condition in if-else statements: While specifying conditions for if-else statements, there may arise a need to include more than just two scenarios. For example, suppose we have a variable ‘n’ and we have to check if it is positive or negative. JS code for this problem would look like this: Quite simple, right? However, suppose we twist this problem a bit. If we have to check if the value of ‘n’ is positive, negative, OR zero. Can we do it using only if-else?  No, right? Here comes the scenario where we have to check more than two conditions and give output for each. This is where else-if comes into the game.  Structure of if else-if else looks something like this: If (condition 1)  { statements } else if (condition 2) { statements } else  { statements }   Working for the above code is explained as follows: Condition 1 is checked first. If it is true, statements inside the first block are executed and the remaining conditions are not checked. If t...
Read more

Day 9: CSS - Font Formate

Image
p1{  font style: italic, } p2{ font-variant: small-caps; } p3{ font-weight: 400px: } p4{ font-size: 12pt } p5{ font-family:  } ----------------------------------------------------------------------------------------------------------------------- The CSS font-family Property : The font-family property in CSS is used to specify the typeface of a text.      If the font name has more than one word, such as "Times New Roman," quotation marks must be used.        Example: The following code applies a font family to a paragraph using class ids:I        Code :   Output :     The CSS font-size Property : The font-size attribute controls a font's size.      It has an impact on the text size of an element. Every element can use it, and its default value is medium. This attribute has values like xx-small, small, x-small, etc.      Font-size can also be specified in pixels (which sets the f...
Read more

Day 28: CSS Animation, CSS Transition Animation Box size

Image
------------------------------------------------------------------------------------------------------------------------ <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="styles.css"> <!-- Link to your external CSS file -->   <title>Your Webpage Title</title> </head> <body>   <div class="grad"></div> <!-- Your HTML element with the "grad" class --> </body> </html> @keyframes example {   0% { background-color: red; left: 0px; top: 0px; }   25% { background-color: yellow; left: 200px; top: 0px; }   50% { background-color: blue; left: 200px; top: 200px; }   75% { background-color: green; left: 0px; top: 200px; }   100% { background-color: red; left: 0px; top: 0px; } } .grad {   width: 100px;   heigh...
Read more