css flex 教程

css flex align-items属性 交叉轴上对齐方式垂直对齐方式

css flex align-items属性子元素在交叉轴上对齐方式,如果不好理解,可以把flex-direction设置为row,理解成垂直对齐方式即可,注意我们演示的例子每个子元素的高度不一样,和align-content的区别请点击左边align-content属性菜单查看。

align-items属性

可选值
说明
flex-start交叉轴的起点对齐,理解成顶部对齐(假设每个子元素的高度不一样)
flex-end交叉轴的终点对齐,理解成底部对齐(假设每个子元素的高度不一样)
center交叉轴的中点对齐,理解成功水平方向居中对齐
baseline项目的第一行文字的基线对齐
stretch默认值,如子元素未设置高度或设为auto,将占满整个父元素的高度。

flex-start例子

<style> 
    .boxs
      {  
        width:80%;
        height:100px;
        border:1px solid #333;
        display:flex; 
        align-items:flex-start;
      }
     .boxs div
      {  
        width:20%;  
      }
 </style>
<div class="boxs">
<div class="boxs">
  <div style="background-color:#ffc5c5;height:38px" >子元素A</div>
  <div style="background-color:#7171f7;height:60px" >子元素B</div>  
  <div style="background-color:#c6d8c6;height:20px" >子元素C</div>
  <div style="background-color:#c9b0fb;height:80px" >子元素D</div>
</div>
</div>

例子

flex-end例子

例子

center例子

例子

baseline例子

例子

stretch例子

例子

Catalog
css flex 教程 父元素属性 flex-direction 属性 flex-wrap 属性 flex-flow 属性 justify-content 属性 align-items 属性 align-content 属性 子元素属性 order 属性 flex-grow 属性 flex-shrink 属性 flex-basis 属性 flex 属性 align-self 属性 常见用例 左边固定右边自适应 右边固定左边自适应 两边固定中间自适应 上下固定中间自适应 css flex 1 省略号