align-items 与 align-content 的区别

2023-05-16

最明显的区别是align-content 适用于多行,align-item 则是适用于单行。

align-content(单行无效)可以设置上对齐、下对齐、居中、拉伸、平分剩余空间;align-item上对齐、下对齐、居中、拉伸。

1. align-items

定义和属性:

align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式


提示:使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。

属性值:

stretch :

默认值。如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。

center:

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

flex-start :

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

flex-end:

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

baseline:

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

initial:

该属性为它的默认值。

inherit:

从父元素继承该属性。

2. align-content 属性

定义和用法

align-content 属性修改 flex-wrap 属性的行为。它与 align-items
相似,但是它不对齐弹性项目,而是对齐弹性线。


*注意:必须有多行项目,此属性才能生效!
*提示:使用 justify-content 属性可将主轴上的项目(main-axis)水平对齐。

属性值:

stretch

默认值。行拉伸以占据剩余空间。

center

朝着弹性容器的中央对行打包。

flex-start

朝着弹性容器的开头对行打包。

flex-end

朝着弹性容器的结尾对行打包。

space-between

行均匀分布在弹性容器中。

space-around

行均匀分布在弹性容器中,两端各占一半。

initial

将此属性设置为其默认值。

inherit

从其父元素继承此属性。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

align-items 与 align-content 的区别 的相关文章

随机推荐

  • 老猿学5G扫盲贴:NEF、NRF、AF、UPF以及DN的功能

    专栏 xff1a Python基础教程目录 专栏 xff1a 使用PyQt开发图形界面Python应用 专栏 xff1a PyQt入门学习 老猿Python博文目录 NEF xff1a Network Exposure Function x
  • moviepy音视频剪辑:与大小相关的视频变换函数crop、even_size、margin、resize介绍

    前往老猿Python博文目录 一 引言 在 moviepy音视频剪辑 xff1a moviepy中的剪辑基类Clip详解 介绍了剪辑基类的fl fl time fx方法 xff0c 在 moviepy音视频剪辑 xff1a 视频剪辑基类Vi
  • moviepy音视频开发专栏文章目录

    前往老猿Python博文目录 moviepy音视频开发专栏 为收费专栏 对应免费专栏为 PyQt moviepy音视频剪辑实战 这2个专栏基于老猿阅读moviepy1 03版本的源代码以及大量测试验证的基础上 详细介绍moviepy主要音视
  • 使用PyQt开发图形界面Python应用专栏目录

    前往老猿Python博文目录 本专栏为收费专栏的文章目录 xff0c 对应的免费专栏为 PyQt入门知识目录 xff0c 两个专栏都为基于PyQt的Python图形界面开发基础教程 xff0c 只是收费专栏中的内容介绍更深入 案例代码更全
  • 《OpenCV-Python初学者疑难问题集》专栏目录

    本专栏为免费专栏 https blog csdn net LaoYuanPython article details 109160152 OpenCV Python图形图像处理专栏 的伴生付费专栏 xff0c 用于发布一些学习OpenCV
  • 使用Python+Moviepy 5行代码实现两视频顺序拼接

    老猿Python博文目录 xff1a https blog csdn net LaoYuanPython 一 引言 最近看到好几篇类似 n行Python代码 的博文 xff0c 看起来还挺不错 xff0c 简洁 实用 xff0c 传播了知识
  • 图像滤波基础知识:图像与波的关系以及图像噪声知识

    前往老猿Python博文目录 https blog csdn net LaoYuanPython 一 引言 老猿对图像处理基础知识非常缺乏 xff0c 所以OpenCV Python的学习进度很慢 xff0c 很多基础概念和原理的东西花了大
  • 用Python通过摄像头进行视频录制

    老猿Python博文目录 xff1a https blog csdn net LaoYuanPython 用Python通过摄像头进行视频录制 一 引言 要实现摄像头录播摄像信息 xff0c 通过Python有很多种实现方式 xff0c 老
  • 计算机四级网络工程师——操作系统部分题目笔记汇总【1~10题】

    计算机四级笔记 操作系统部分 xff1a xff08 1 10题 xff09 因篇幅过长 xff0c 为保证学习质量 xff0c 遂将其分成四部分 xff08 四篇博客 xff09 每10题为一篇 xff0c 其他题目在我的计算机四级考试网
  • 一文带你读懂PyQt:用Python做出与C++一样的GUI界面应用程序

    一 简介 Python标准库更多的适合处理后台任务 xff0c 唯一的图形库tkinter使用起来很不方便 xff0c 所以后来出现了针对Python图形界面开发的扩展库 xff0c 今天老猿要介绍的是主流Python图形界面扩展库之一的P
  • Python中可迭代对象是什么?

    Python中可迭代对象 Iterable 并不是指某种具体的数据类型 xff0c 它是指存储了元素的一个容器对象 xff0c 且容器中的元素可以通过 iter 方法或 getitem 方法访问 iter 方法的作用是让对象可以用for i
  • 老猿Python博客文章目录索引

    本目录提供老猿Python所有相关博文的一级目录汇总 xff0c 带星号的为付费专栏 xff1a 一 专栏列表 本部分为老猿所有专栏的列表 xff0c 每个专栏都有该专栏置顶的博文目录 xff1a Python基础教程目录PyQt入门学习
  • 用TAP方式让QEMU虚拟机与host联网

    转载自 cgjvcd 最终编辑 cgjvcd QEMU虚拟机网络的缺省模式是NAT方式 xff0c 即虚拟机可以通过host访问外网 xff0c 但host和外网无法访问虚拟机 如果要想让host访问虚拟机 xff0c 则可以使用TAP方式
  • TCP服务器端怎么判断客户端已经关闭了连接?

    http xidianzhangjun blog 163 com blog static 11548877120114411056939 哎 xff0c 首先 xff0c 又犯了一个大错 xff0c 前几天把这个问题通过实验搞懂了 xff0
  • PDP上下文和PDP地址

    http www mscbsc com 10037062 viewspace 61117 html S要接入外部PDN MS还应具有与该PDN相应的地址 称为PDP地址 PDP地址是用于外部分组数据网识别MS的PDP上下文时使用的地址 如用
  • Nmap从探测到漏洞利用备忘录

    http www freebuf com articles network 32302 html 在侦查期间 xff0c 扫描一直是信息收集的初始阶段 什么是侦查 侦查是尽可能多收集关于目标网络的信息 从黑客的角度来看 xff0c 信息收集
  • 内存分配器dlmalloc 2.8.3源码浅析

    目 录 1 本文档介绍 1 2 xff0e 边界标记法 2 3 分箱式内存管理 6 4 核心结构体malloc state 13 5 内存分配相关函数 16 5 1 函数dlmalloc 16 5 2 函数tmalloc small 25
  • C++环境下的expect远程命令执行

    首先 xff0c 必须安装几个开发包 xff0c 在centos fedora下 xff0c 可以使用yum安装 yum y install tcl devel expect devel 装完以后 xff0c 就可以使用expect来写代码
  • aufs 存储机制

    aufs存储机制已经发展到超出了改进squid磁盘I O响应时间的最初尝试 34 a 34 代表着异步I O 默认的ufs和aufs之间的唯一区别 xff0c 在于I O是否被squid主进程执行 数据格式都是一样的 xff0c 所以你能在
  • align-items 与 align-content 的区别

    最明显的区别是align content 适用于多行 xff0c align item 则是适用于单行 align content xff08 单行无效 xff09 可以设置上对齐 下对齐 居中 拉伸 平分剩余空间 xff1b align