【前端 | CSS】align-items与align-content的区别

这篇具有很好参考价值的文章主要介绍了【前端 | CSS】align-items与align-content的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

align-items

描述  

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

align-items是针对每一个子项起作用,它的基本单位是每一个子项,在所有情况下都有效果;

目前,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;

取值

normal

这个关键字的效果取决于我们处在什么布局模式中:

  • 在绝对定位的布局中,对于被替代的绝对定位盒子,这个效果和start?的效果的一样;对于其他所有绝对定位的盒子,这个效果和stretch的效果一样。
  • 在绝对定位布局的静态位置上,效果和stretch一样。
  • 对于那些弹性项目而言,效果和stretch一样。
  • 对于那些网格项目而言,效果和stretch一样,除了有部分比例或者一个固定大小的盒子的效果像start
  • 这个属性不适用于块级盒子和表格。

flex-start

元素向侧轴起点对齐。

flex-end

元素向侧轴终点对齐。

start

The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.

end

The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.

center

元素在侧轴居中。如果元素在侧轴上的高度高于其容器,那么在两个方向上溢出距离相同。

stretch

弹性项包含外边距的交叉轴尺寸被拉升至行高

情景一

默认值

align-items:stretch;

.flex-01 {
    display: flex;
    /*  默认值 平铺 */
    align-items: stretch;
  }

【前端 | CSS】align-items与align-content的区别,css,html,前端,css

 code示例(flex-01)

情景二

 .flex-02 {
    /* 单行生效居中 */
    align-items: center;
  }

【前端 | CSS】align-items与align-content的区别,css,html,前端,css

 code示例(flex-02)

情景三

 .flex-03 {
    /* 多行生效居中,且每一行分别相对于原有的平铺位置居中 */
    flex-wrap: wrap;
    align-items: center;
  }

【前端 | CSS】align-items与align-content的区别,css,html,前端,css

  code示例(flex-03)

aligin-content

描述

CSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

align-content属性是将flex子项作为一个整体起作用,它的基本单位是子项构成的行

语法

/* 基本位置对齐 */
/*align-content 不采用左右值 */
align-content: center; /* 将项目放置在中点 */
align-content: start; /* 最先放置项目 */
align-content: end; /* 最后放置项目 */
align-content: flex-start; /* 从起始点开始放置 flex 元素 */
align-content: flex-end; /* 从终止点开始放置 flex 元素 */

/* 默认对齐 */
align-content: normal;

/*基线对齐*/
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* 分布式对齐 */
align-content: space-between; /* 均匀分布项目
                                 第一项与起始点齐平,
                                 最后一项与终止点齐平 */
align-content: space-around; /* 均匀分布项目
                                 项目在两端有一半大小的空间*/
align-content: space-evenly; /* 均匀分布项目
                                 项目周围有相等的空间 */
align-content: stretch; /* 均匀分布项目
                                 拉伸‘自动’ - 大小的项目以充满容器 */

/* 溢出对齐 */
align-content: safe center;
align-content: unsafe center;

/* 全局属性 */
align-content: inherit; /* 继承 */
align-content: initial; /* 初始值 */
align-content: unset; /* 未设置 */

 取值

start

所有行从容器的起始边缘开始填充。

end

所有行从容器的结束边缘开始填充。

flex-start

所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。

flex-end

所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。

center

所有行朝向容器的中心填充。每行互相紧挨,相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。

normal

这些项按默认位置填充,就像没有设置对齐内容值一样。

space-between

所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。

space-around

所有行在容器中平均分布,相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。

space-evenly

所有行沿垂直轴均匀分布在对齐容器内。每对相邻的项之间的间距,主开始边和第一项,以及主结束边和最后一项,都是完全相同的。

stretch

拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。

safe

与对齐关键字一起使用。如果所选的关键字意味着项溢出对齐容器(data loss),则将采用备用策略对项进行对齐,就像启动了 start 对齐模式一样。

unsafe

与对齐关键字一起使用。无论元素和对齐容器的相对大小如何、是否会导致一些元素溢出可见范围(data loss),都使用给定的对齐值。

情景一

  .flex-04 {
    /* 单行设置不生效*/
    align-content: center;
  }

 原因:

在flex布局子元素单行的情况下,也就是没有设置fle-wrap:wrap时,优先级align-items的优先级要高于align-content;

而此时 align-items为默认值stretch,

【前端 | CSS】align-items与align-content的区别,css,html,前端,css

元素在侧轴方向为平铺状态,占据侧轴整个空间,设置align-content为center就没有意义,也就不会生效;

code示例(flex-04)

情景二

 .flex-05 {
    /* 多行设置生效,整个内容区居中 */
    flex-wrap: wrap;
    align-content: center;
  }

【前端 | CSS】align-items与align-content的区别,css,html,前端,css

 code示例(flex-05)文章来源地址https://www.toymoban.com/news/detail-637235.html

到了这里,关于【前端 | CSS】align-items与align-content的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端面经】CSS-less/sass/scss的区别和基本使用

    随着Web开发的不断发展,CSS预处理器变得越来越流行。它们为Web开发者提供了一种更高效、更简便的CSS编写方式。Less、Sass以及SCSS作为最受欢迎的三种CSS预处理器,它们都为CSS编写提供了不同的特点和功能。 在本篇博客中,我们将会探讨这三种预处理器之间的区别以及它们的

    2024年02月06日
    浏览(58)
  • css三角和css 用户见面样式,vertical-align 属性应用,溢出的文字省略号显示,常见布局技巧

    目录 3.CSS三角  4.CSS 用户界面样式 4.1什么是界面样式  4.2轮廓线 outline  4.3 防止拖拽文本域 resize  5.vertical-align 属性 5.1图片,表单都属于行内块元素,默认的vertical-align 是基线对齐。 5.2解决图片底部默认空白缝隙问题 6.溢出的文字省略号显示 1.单行文本溢出显示省略号--必须

    2023年04月09日
    浏览(51)
  • 【CSS 10】浮动实例 处理布局流 display: inline-block 行内块元素 水平显示列表项 align 对齐

    浮动实例 网格/等宽的框 通过使用 float 属性,可以轻松地并排浮动内容框 display: inline-block 与 display: inline 相比,主要区别在于 display: inline-block 允许在元素上设置宽度和高度 同样,如果设置了 display: inline-block,将保留上下外边距/内边距,而 display: inline 则不会 与 display: b

    2024年02月11日
    浏览(54)
  • content-type几种常见类型区别

    Content-Type叫做MIME(mediaType)类型,使用Content-Type来表示请求和响应中的媒体类型信息。如果是请求头,它用来告诉服务端如何处理请求的数据,如果是响应头,它用来告诉客户端(一般是浏览器)如何解析响应的数据。下面我们来介绍下常用的几种类型! 1.application/x-www-form

    2024年02月03日
    浏览(49)
  • 前端篇-Content-Type 详解

    Content-Type(MediaType),即是Internet Media Type,互联网媒体类型,也叫做MIME类型。在互联网中有成百上千中不同的数据类型,HTTP在传输数据对象时会为他们打上称为MIME的数据格式标签,用于区分数据类型。最初MIME是用于电子邮件系统的,后来HTTP也采用了这一方案。 在HTTP协议

    2024年04月27日
    浏览(49)
  • 【Vue】v-for中:key中item.id与Index使用的区别

    先说结论,推荐使用【:key=\\\"item.id\\\"】而不是将数组下标当做唯一标识,前者能做到全部复用 场景:删除无序列表中的li标签

    2024年02月22日
    浏览(39)
  • 前端知识~Content-Type和Accept

    Content-Type和Accept是两个HTTP标头(HTTP headers),用于在HTTP请求和响应之间传递有关请求的数据类型和响应的首选内容类型的信息。这两个标头在HTTP通信中起着关键的作用。 Content-Type: Content-Type 是HTTP请求头或响应头的一部分,用于指示HTTP消息主体(请求或响应体)的媒体类

    2024年02月10日
    浏览(40)
  • 前端安全-内容安全策略CSP(Content Security Policy)

    目录 CSP xss 使用方法 http头部设置 meta标签设置 策略集组成 常见指令 default-src report-uri 示例  指令(属性)  指令值(属性值) CSP学习链接  内容安全策略,为了页面内容安全而制定的一系列防护策略。可以通过CSP指定策略来规定页面加载的内容来源(这里的内容可以指脚本

    2024年02月05日
    浏览(41)
  • Matlab的dq变换模块到底选哪一种变换方式?90 degree behind phase A axis和 Aligned with phase A axis有什么区别?

    我们在用matlab的dq变换模块的时候,发现dq变换模块有两种变换方式: 选择Aligned with phase A axis还是90 degree behind phase A axis? 通过查阅Matlab的官方的介绍: 派克变换模块的介绍:abc to dq0, dq0 to abc abc 到 dq0 模块使用 Park 变换将三相 (abc) 信号变换为 dq0 旋转参考系。旋转框架的角

    2024年02月07日
    浏览(36)
  • Angular中 ng-template 和 ng-content 有何区别?

    在Angular中,ng-template 和 ng-content 都是用于管理和展示内容的指令,但它们在使用和功能上有一些区别。让我为你解释一下它们的区别,并提供一些示例来说明。 ng-template: ng-template 是一个用来定义可重用模板的容器。它本身不会被渲染成任何实际的元素,而是用于包裹一段

    2024年02月11日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包