美文网首页
flex布局中align-items 和align-conten

flex布局中align-items 和align-conten

作者: Eric23 | 来源:发表于2016-10-01 21:18 被阅读531次

align-items

align-items属性适用于所有的flex容器,它是用来设置每个flex元素在侧轴上的默认对齐方式。

align-items和align-content有相同的功能,不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。

align-items

align-content

align-content属性只适用于多行的flex容器,并且当侧轴上有多余空间使flex容器内的flex线对齐。

下面举例:

html css

最终结果如下图

所以对于只有一行的flex元素,align-content是没有效果的,如果.child-1改用align-items:center;则会达到预期的效果,如下图

但如果变成多行容器使用align-items时效果如下

使用align-content效果如下

相关文章

  • flex布局中align-items 和align-conten

    align-items align-items属性适用于所有的flex容器,它是用来设置每个flex元素在侧轴上的...

  • 讨论题

    /*flex布局*/display: flex;align-items: flex-end;优点:只在父元素上设置...

  • 垂直水平居中

    1.center{ display:flex flex布局 align-items:center 独自居中排列 ...

  • Flexbox

    flex-direction:决定主轴的方向; align-items 交叉轴的布局flex-direction...

  • 伸缩布局 display: flex;

    伸缩布局display: flex; align-items:center; justify-content: c...

  • flex笔记

    Flex 布局教程:语法篇 flex: 1 根据空间填充 上下居中align-items: center; 微信小...

  • 【面试题】垂直居中

    常见的两种方式 1 flex布局 给父元素加上 display:flex; align-items: ce...

  • CSS3 第三部分2018-05-05

    一、伸缩布局 1. align-items 调整侧轴方向对齐方式,包括flex-start、flex-end、ce...

  • CSS网格布局学习(6)

    CSS网格布局也具有与 flex 布局一样的"盒模型对齐"。例如属性 align-items、align-self...

  • flex布局中align-content和align-items

    转自链接 在chrome下面是这样子的 对比一: 如果在#div1样式里面添加align-items:center...

网友评论

      本文标题:flex布局中align-items 和align-conten

      本文链接:https://www.haomeiwen.com/subject/riaryttx.html