CSS Flexbox: Align Elements Using the align-items Property

Align Elements Using the align-items Property

The align-items property is similar to justify-content. Recall that the justify-content property aligned flex items along the main axis. For rows, the main axis is a horizontal line and for columns it is a vertical line.
Flex containers also have a cross axis which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal.
CSS offers the align-items property to align flex items along the cross axis. For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container.
The different values available for align-items include:
  • flex-start: aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.
  • flex-end: aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.
  • center: align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).
  • stretch: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom.
  • baseline: align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.

 

1.center
Hello
Goodbye
2.flex-start
Hello
Goodbye
3.flex-end
Hello
Goodbye
4-stretch
Hello
Goodbye
5.baseline
Hello
Goodbye

html code

<style>
  #box-container15 {
    background: gray;
    display: flex;
    height: 100px;
    align-items : ;

  }
  #box-122222 {
    background-color: dodgerblue;
    width: 200px;
    font-size: 24px;
  }

  #box-211111 {
    background-color: orangered;
    width: 200px;
    font-size: 18px;
  }
</style>

<br />
<div id="box-container15">
<div id="box-122222">
Hello</div>
<div id="box-211111">
Goodbye</div>
</div>
source

Comments

Post a Comment

Popular posts from this blog

ES6 : 5 Prevent Object Mutation

As seen in the previous post declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function Object.freeze() to prevent data mutation. Once the object is frozen, you can no longer add, update, or delete properties from it. Any attempt at changing the object will be rejected without an error. let obj = { name:"FreeCodeCamp" review:"Awesome" }; Object.freeze(obj); obj.review = "bad"; //will be ignored. Mutation not allowed obj.newProp = "Test"; // will be ignored. Mutation not allowed console.log(obj); // { name: "FreeCodeCamp", review:"Awesome"}
Read more

ES6: 1 Explore Differences Between the var and let Keywords

One of the biggest problems with declaring variables with the var keyword is that you can overwrite variable declarations without an error. var camper = 'James'; var camper = 'David'; console.log(camper); // logs 'David' As you can see in the code above, the camper variable is originally declared as James and then overridden to be David . In a small application, you might not run into this type of problem, but when your code becomes larger, you might accidentally overwrite a variable that you did not intend to overwrite. Because this behavior does not throw an error, searching and fixing bugs becomes more difficult. A new keyword called let was introduced in ES6 to solve this potential issue with the var keyword. If you were to replace var with let in the variable declarations of the code above, the result would be an error. let camper = 'James'; let camper = 'David'; // throws an error This error can be seen...
Read more

CSS Grid: Reduce Repetition Using the repeat Function

 When we used grid-template-columns and grid-template-rows to define the structure of a grid, you entered a value for each row or column you created. Lets say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the repeat function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat. Here's an example that would create the 100 row grid, each row at 50px tall. grid-template-rows: repeat(100, 50px); You can also repeat multiple values with the repeat function, and insert the function amongst other values when defining a grid structure. Here's what I mean: grid-template-columns: repeat(2, 1fr 50px) 20px;  this will be translated to :            grid-template-columns:1fr 50px 1fr 50px  20px;   1fr 50px is repeated t...
Read more