84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
align-items and align-content?
align-items
align-content
The
align-items property of flex-box aligns items within a Flex container along the horizontal axis, just like justify-content aligns along the main axis. (With the default flex-direction: row, the cross axis corresponds to the vertical direction and the main axis corresponds to the horizontal direction. When using flex-direction: column, these two axes can be aligned with each other separately. Change).
property of
justify-content
flex-direction: row
flex-direction: column
The following is an example of what align-items:center looks like:
align-items:center
But align-content works for multi-line flexboxes. It has no effect when the items are in a row. It aligns the entire structure according to its value. Here is an example of align-content: space-around;:
align-content: space-around;
This is what align-content: space-around; looks like with align-items:center:
Notice that the third box in the first row and all other boxes change to be vertically centered in that row.
Here are some codepen links you can use:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
This is a super cool pen that displays and allows you to use almost anything in Flexbox.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The
align-items
property offlex-box aligns items within a Flex container along the horizontal axis, just likejustify-contentaligns along the main axis. (With the defaultflex-direction: row, the cross axis corresponds to the vertical direction and the main axis corresponds to the horizontal direction. When usingflex-direction: column, these two axes can be aligned with each other separately. Change).The following is an example of what
align-items:centerlooks like:But
align-contentworks for multi-line flexboxes. It has no effect when the items are in a row. It aligns the entire structure according to its value. Here is an example ofalign-content: space-around;:This is what
align-content: space-around;looks like withalign-items:center:Notice that the third box in the first row and all other boxes change to be vertically centered in that row.
Here are some codepen links you can use:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
This is a super cool pen that displays and allows you to use almost anything in Flexbox.