Flexbox - 對齊專案

align-items 屬性與 justify-content 屬性類似。但在這裡，專案是在交叉軸線（垂直方向）上對齊的。

用法 -

align-items: flex-start | flex-end | center | baseline | stretch;

此屬性接受以下值 -

flex-start - 彈性專案在容器頂部垂直對齊。
flex-end - 彈性專案在容器底部垂直對齊。
flex-center - 彈性專案在容器中心垂直對齊。
stretch - 彈性專案垂直對齊，以填充容器的整個垂直空間。
baseline - 彈性專案對齊，使它們的文字基線沿水平線對齊。

flex-start

將此值傳遞給 align-items 屬性時，彈性專案將在容器頂部垂直對齊。

Align Start

以下示例演示了將 flex-start 值傳遞給 align-items 屬性的結果。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

它將產生以下結果 -

flex-end

將此值傳遞給 align-items 屬性時，彈性專案將在容器底部垂直對齊。

Align End

以下示例演示了將 flex-end 值傳遞給 align-items 屬性的結果。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:flex-end;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

它將產生以下結果 -

center

將此值傳遞給 align-items 屬性時，彈性專案將在容器中心垂直對齊。

Align Center

以下示例演示了將 flex-center 值傳遞給 align-items 屬性的結果。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:center;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

它將產生以下結果 -

stretch

將此值傳遞給 align-items 屬性時，彈性專案將垂直對齊，以填充容器的整個垂直空間。

Align Stretch

以下示例演示了將 stretch 值傳遞給 align-items 屬性的結果。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:stretch;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

它將產生以下結果 -

baseline

將此值傳遞給 align-items 屬性時，彈性專案將對齊，使它們的文字基線沿水平線對齊。

以下示例演示了將 baseline 值傳遞給 align-items 屬性的結果。

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:baseline;
      }
   </style>
   
   <body>
      <div class = "container">
      <div class = "box box1">One</div>
      <div class = "box box2">two</div>
      <div class = "box box3">three</div>
      <div class = "box box4">four</div>
      <div class = "box box5">five</div>
      <div class = "box box6">six</div>
      </div>
   </body>
</html>

它將產生以下結果 -

列印頁面

廣告

© . All rights reserved.