Flexbox - Align Items

Flexbox Align Items - 从简单和简单的步骤学习Flexbox，从基本到高级概念，包括概述，Flex容器，Flex-Direction，Flex-Wrap，对齐内容，对齐项目，对齐内容，Flex-Order，灵活性，对齐自我。

align-items 属性与对齐内容相同.但是在这里，项目在交叉访问(垂直)上对齐.

用法 :

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

此属性接受以下值 :

flex-start : Flex项目在容器顶部垂直对齐.
flex-end : 柔性物品在容器底部垂直对齐.
flex-center : 柔性物品在容器的中心垂直对齐.
拉伸 : Flex项目垂直对齐，以便填充容器的整个垂直空间.
基线 : 对齐flex项目，使其文本的基线沿水平线对齐.

flex-start

在将此值传递给属性align-items时，flex项目在容器顶部垂直对齐.

Align Start

以下示例演示了将值 flex-start 传递给 align-items property.

         .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;      }                        One

two

three four five six

flex-end

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

Align End

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

         .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;      }                        One         two         three         four         five         six

center

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

Align Center

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

         .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;      }                        One         two         three         four         five         six

stretch

将此值传递给属性align-items时，flex-items将垂直对齐，以便它们填充容器的整个垂直空间。

Align Stretch

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

         .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;      }                        One         two         three         four         five         six

baseline

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

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

         .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;      }                     One      two      three      four      five      six