Flexbox-对齐项目



align-items属性与证明内容相同。但是在这里,项目是跨交叉访问(垂直)对齐的。

用法

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

此属性接受以下值-

  • flex-start -flex项目在容器顶部垂直对齐。

  • flex-end -flex项目在容器底部垂直对齐。

  • flex-center -flex项目在容器的中心垂直对齐。

  • 拉伸-柔性项目垂直对齐,以使它们充满容器的整个垂直空间。

  • 基线-弹性项目要对齐,以使其文本的基线沿水平线对齐。

弹性启动

将这个值传递给属性align-items时,flex项在容器的顶部垂直对齐。

对齐开始

下面的示例演示将值flex-start传递给align-items属性的结果。

<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>
   
   
      <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>
   

它将产生以下结果-

柔性端

将此值传递给align-items属性后,flex-items在容器底部垂直对齐。

对齐末端

下面的示例演示将值flex-end传递给align-items属性的结果。

<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>
   
   
      <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>
   

它将产生以下结果-

中央

在将此值传递给align-items属性时,flex-items在容器的中心垂直对齐。

居中对齐

下面的示例演示将值flex-center传递给align-items属性的结果。

<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>
   
   
      <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>
   

它将产生以下结果-

伸展

将这个值传递给align-items属性时,flex-items会垂直对齐,以使它们填满容器的整个垂直空间。

对齐拉伸

下面的示例演示将值Stretch传递给align-items属性的结果。

<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>
   
   
      <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>
   

它将产生以下结果-

基准线

在将此值传递给align-items属性时,将对flex-items进行对齐,以使其文本的基线沿水平线对齐。

下面的示例演示将值基线传递给align-items属性的结果。

<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>
   
   
      <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>
   

它将产生以下结果-

Made with ❤️ in Chengdu. Copyright reserved 2019-2022.

蜀ICP备20006366号-1