css3 flex布局

来源:10-9 CSS3 伸缩布局(二)

BluyeaSun

2016-04-04 17:16

flex布局中

align-items与align-content有什么区别那

写回答 关注

2回答

  • 慕仰1053334
    2017-05-08 21:03:56

    align-items属性定义项目在交叉轴上如何对齐。

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

    flex-start:交叉轴的起点对齐。

    flex-end:交叉轴的终点对齐。

    center:交叉轴的中点对齐。

    baseline: 项目的第一行文字的基线对齐。

    stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度

    align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;

    flex-start:与交叉轴的起点对齐。

    flex-end:与交叉轴的终点对齐。

    center:与交叉轴的中点对齐。

    space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

    space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

    stretch(默认值):轴线占满整个交叉轴。


  • frontend
    2016-04-04 18:33:29

    align-content 属性在当灵活容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。

    center 项目位于容器的中心。    

    align-items 属性规定灵活容器内的各项的默认对齐方式。

    提示:使用每个项目的 align-self 属性可重写 align-items 实现。

    center 项目位于容器的中心。    

十天精通CSS3

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

242553 学习 · 2623 问题

查看课程

相似问题