Home Web Front-end HTML Tutorial CSS3弹性布局align-items和align-self垂直轴方向行对齐属性详解及实例_html/css_WEB-ITnose

CSS3弹性布局align-items和align-self垂直轴方向行对齐属性详解及实例_html/css_WEB-ITnose

Jun 24, 2016 am 11:25 AM

弹性项目可以按弹性容器当前行的cross axis来对齐,和justify-content类似,但在垂直方向上。其中align-items属性用于弹性容器,而align-self用于弹性项目。 align-items 为弹性容器中所有项目设置缺省对齐属性,包括匿名弹性项目。align-self 可以为单独的弹性项目设置对齐来覆盖缺省值。 (对于匿名弹性项目,align-self总是匹配对应弹性容器的align-items的值。)

如果弹性项的cross-axis外边距是auto,align-self属性没有效果。

align-items和align-self的语法如下:


align-self属性取值auto时,将计算为其父元素的align-items值,或者为stretch如果没有父元素的话。对齐属性的取值定义如下:

flex-start
弹性项的cross-start margin的边紧挨着该行的cross-start的边(一般来说,就是挨着弹性容器顶部)。
flex-end
弹性项的cross-end margin的边紧挨着该行的cross-end的边(一般来说,就是挨着弹性容器底部)。
center
弹性项的margin box在该行的cross axis上居中(垂直居中对齐)。(如果该弹性行的cross size小于弹性项,将在两个方向上同时溢出。)
baseline
如果弹性项的行内轴(inline axis)和垂直轴(cross axis)一致,该值等同于flex-start。否则,它参与基线对齐(baseline alignment):所有参与的弹性项按基线对齐,而基线和cross-start margin的边距离最大的项目被放在该行cross-start的边上(一般来说,就是基线和容器顶部距离最大的项目被定位在最上边)。
stretch
如果弹性项的垂直尺寸(cross size)属性(一般来说,就是高度)是auto,并且没有垂直外边距(cross-axis margin)是auto的,该弹性项被拉伸以适应容器高度, 其所使用的值是使项目的外边框(margin box)的垂直尺寸尽可能接近和行相同的尺寸,并依然遵循min-height/min-width/max-height/max-width属性的限制。 
注意:如果弹性容器的高度被限制,该值可能会导致该项的内容溢出。
弹性项的顶部挨着容器的顶部。


上图包含5个例子,每个例子的弹性容器中包含4个不同颜色的弹性项目,最下面的弹性项目带有文本基线。

该图很直观的演示了这些取值的效果和差异。我们可以通过在线实例代码来测试这个属性:

http://wow.techbrood.com/fiddle/17130


by iefreer

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

HTML, CSS, and JavaScript: Essential Tools for Web Developers HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

How to implement adaptive layout of Y-axis position in web annotation? How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

See all articles