Flex:align-items

align-items　项目在交叉轴上对齐方式

  • flex-start：交叉轴的起点对齐。
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             .box{
 8                 width: 500px;
 9                 height: 200px;
10                 border: 1px solid #999;
11                 margin: 0 auto;
12                 display: flex;
13                 align-items: flex-start;
14             }
15             .div1{
16                 width: 100px;
17                 height: 100px;
18                 border: 1px solid red;
19             }
20             .div2{
21                 width: 100px;
22                 height: 150px;
23                 border: 1px solid red;
24             }
25         </style>
26     </head>
27     <body>
28         <div class="box">
29             <div class="div1">
30                 <h3>1</h3>
31             </div>
32             <div class="div2">
33                 2
34             </div>
35         </div>
36     </body>
37 </html>

  • flex-end：交叉轴的终点对齐。

  • center：交叉轴的中点对齐。

  • baseline: 项目的第一行文字的基线对齐。

  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             .box{
 8                 width: 500px;
 9                 height: 200px;
10                 border: 1px solid #999;
11                 margin: 0 auto;
12                 display: flex;
13                 align-items: stretch;
14             }
15             .div1{
16                 background-color: #F8B3D0;
17             }
18             .div2{
19                 background-color: #5F9EA0;
20             }
21         </style>
22     </head>
23     <body>
24         <div class="box">
25             <div class="div1">div1</div>
26             <div class="div2">div2</div>
27         </div>
28     </body>
29 </html>

 

posted @ 2021-10-28 21:47  十七日尾  阅读(70)  评论(0)    收藏  举报