Align-items
The Align-items property applies to all Flex containers, which are used to set the default alignment of each flex element on the side axis, as well as a response from one of the respondents:
Align-items and Align-content have the same functionality, but the difference is that it is used to center each single-row container instead of the entire container.
Align-content
The Align-content property applies only to multiple lines of flex containers, and when there is extra space on the side axis to align the flex lines inside the Flex container , it feels a little bit abstract after this translation, but one of the main points is that multiple lines ,
Let's write a small example below.
class="child-1"> class="child-2" > </div> class="child-2"> </div></div >
The HTML structure is as above.
If Child-1 is width
set to 100px
, Child-2 is width
set to 30px
, so child-2 will be arranged in a row, the specific CSS is as follows
<style type="text/css">* { margin:0px; padding:0px;} div { border:1px solid #0f0f0f;}. Child-1 { margin:30px auto; Display:flex; width:100px; height:60px; Justify-content:space-around; Align-content:center;}. Child-2 { width:30px; height:20px;} </style>
The final results are as follows
So for a single line of flex elements, align-content is not effective, and .child-1
if align-items:center;
you use it, you will get the desired effect, such as
But if it becomes a multi-row container
The align-items
effect of using is as follows
Use the align-content
effect as follows
[CSS Elastic box model align-content align-items Properties] Elastic box model Flex layout Align-items and Align-content Properties explained and examples of the differences between the demo