• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • align-items

    版本:CSS3

    CSS align-items属性将所有直接子节点上的align-self值设置为一个组。align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。

    目前,Flexbox和CSS网格布局支持此属性。在Flexbox中,它控制十字轴上项目的对齐方式,在网格布局中,它控制块轴上项目的对齐方式。

    示例

    /* basic keywords */
    align-items: normal;
    align-items: stretch;
    
    /* positional alignment */
    align-items: center; /* pack items around the center */
    align-items: start; /* pack items from the start */
    align-items: end; /* pack items from the end */
    align-items: flex-start; /* pack flex items from the start */
    align-items: flex-end; /* pack flex items from the end */
    align-items: self-start;
    align-items: self-end;
    
    /* baseline alignment */ 
    align-items: baseline;
    align-items: first baseline;
    align-items: last baseline; /* overflow alignment (for positional alignment only) */
    align-items: safe center;
    align-items: unsafe center;
    
    /* global values */
    align-items: inherit;
    align-items: initial;
    align-items: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE11以上版本的浏览器都支持align-items

    语法

    align-items:>normal | stretch |<baseline-position>|[<overflow-position>?<self-position>]

    <baseline-position>=[ first | last ]? baseline
    <overflow-position>= unsafe | safe
    <self-position>= center | start | end | self-start | self-end | flex-start | flex-end

    取值

    • normal这个关键字的效果取决于我们处在什么布局模式中:
      • 在绝对定位的布局中,对于被替代的绝对定位盒子,这个效果和start?的效果的一样;对于其他所有绝对定位的盒子,这个效果和stretch的效果一样。
      • 在绝对定位布局的静态位置上,效果和stretch一样。
      • 对于那些弹性项目而言,效果和stretch一样。
      • 对于那些网格项目而言,效果和stretch一样,除了有部分比例或者一个固定大小的盒子的效果像start
      • 这个属性不适用于会计盒子和表格。
    • flex-start元素向侧轴起点对齐。
    • flex-end元素向侧轴终点对齐。
    • startThe item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.
    • endThe item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.
    • center元素在侧轴居中。如果元素在侧轴上的高度高于其容器,那么在两个方向上溢出距离相同。
    • leftThe items are packed flush to each other toward the left edge of the alignment container. If the property’s axis is not parallel with the inline axis, this value behaves likestart.
    • rightThe items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property’s axis is not parallel with the inline axis, this value behaves likestart.
    • self-startThe items is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
    • self-endThe item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
    • baselinefirst baselinelast baseline:所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。
    • stretch弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
    • safeUsed alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode werestart.
    • unsafeUsed alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.
    默认值stretch
    适用于多行的弹性盒模型容器
    继承性
    动画性visual
    计算值指定值

    例子

    //CSS
    
    #container {
      height:200px;
      width: 240px;
      align-items: center; /* can be changed in the live sample */
      background-color: #8c8c8c;
    }
    
    .flex {
      display: flex;
      flex-wrap: wrap;
    }
    
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, 50px);
    }
    
    div> div {
      box-sizing: border-box;
      border: 2px solid #8c8c8c;
      width: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    #item1 {
      background-color: #8cffa0;
      min-height: 30px;
    }
    
    #item2 {
      background-color: #a0c8ff;
      min-height: 50px;
    }
    
    #item3 {
      background-color: #ffa08c;
      min-height: 40px;
    }
    
    #item4 {
      background-color: #ffff8c;
      min-height: 60px;
    }
    
    #item5 {
      background-color: #ff8cff;
      min-height: 70px;
    }
    
    #item6 {
      background-color: #8cffff;
      min-height: 50px;
      font-size: 30px;
    }
    
    select {
      font-size: 16px;
    }
    
    .row {
      margin-top: 10px;
    }
    
    //HTML
    
    <div id="container" class="flex">
      <div id="item1">1</div>
      <div id="item2">2</div>
      <div id="item3">3</div>
      <div id="item4">4</div>
      <div id="item5">5</div>
      <div id="item6">6</div>
    </div>
    
    <div class="row">
      <label for="display">display: </label>
      <select id="display">
        <option value="flex">flex</option>
        <option value="grid">grid</option>
      </select>
    </div>
    
    <div class="row">
      <label for="values">align-items: </label>
      <select id="values">
        <option value="normal">normal</option>
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center" selected>center</option>
        <option value="baseline">baseline</option>
        <option value="stretch">stretch</option>
    
        <option value="start">start</option>
        <option value="end">end</option>
        <option value="self-start">self-start</option>
        <option value="self-end">self-end</option>
        <option value="left">left</option>
        <option value="right">right</option>
    
        <option value="first baseline">first baseline</option>
        <option value="last baseline">last baseline</option>
    
        <option value="safe center">safe center</option>
        <option value="unsafe center">unsafe center</option>
        <option value="safe right">safe right</option>
        <option value="unsafe right">unsafe right</option>
        <option value="safe end">safe end</option>
        <option value="unsafe end">unsafe end</option>
        <option value="safe self-end">safe self-end</option>
        <option value="unsafe self-end">unsafe self-end</option>
        <option value="safe flex-end">safe flex-end</option>
        <option value="unsafe flex-end">unsafe flex-end</option>
      </select>
    </div>
    

    JavaScript

    var values = document.getelementbyid('values');
    var display = document.getelementbyid('display');
    var container = document.getelementbyid('container');
    
    values.addeventlistener('change', function (evt) {
      container.style.alignitems = evt.target.value;
    }
    );
    
    display.addeventlistener('change', function (evt) {
      container.classname = evt.target.value;
    }
    );
    
    .main
    {
    display:flex;		
    align-items:stretch;
    }
    

    效果图:

    center:元素位于容器的中心

    弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。

    实例

    .main
    {
    display:flex;		
    align-items:center;
    }
    

    效果图:

    flex-start :元素位于容器的开头

    弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。

    实例

    .main{
     display:flex;		
     align-items:flex-start;
    }
    

    效果图:

    flex-end:元素位于容器的结尾

    弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。

    实例

    .main
    {
    display:flex;		
    align-items:flex-end;
    }
    

    效果图:

    baseline:元素位于容器的基线上

    如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。

    实例

    .main
    {
    display:flex;		
    align-items:baseline;
    }
    

    效果图:

    initial:设置该属性为它的默认值。请参考initial

    inherit:从父元素继承该属性。请参阅考inherit

    上篇:align-content

    下篇:place-items