Flexible flexible box model CSS align-items property-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Flexible flexible box model CSS align-items property

高洛峰

Feb 23, 2017 am 09:58 AM

##Example

Centerly align the items of the flexbox

element:

##p
{
display
: flex;
align
-items:center;

}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手册网(www.shouce.ren)</title>
<style>
#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

#main div {
   -webkit-flex: 1; /* Safari 6.1+ */
   flex: 1;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。</p>
<p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。</p>

</body>
</html>

Browser support

The number in the table indicates the version of the first browser that supports this attribute Number.

The number immediately following -webkit-, -ms- or -moz- is the first version that supports this prefix attribute.

Attributesalign-items7.0 -webkit-

Definition and usage

The align-items property defines the alignment of flex items in the direction of the cross axis (vertical axis) of the current row of the flex container.

Tip: The align-items property can be overridden using the align-self property of each flex object element.


21.0	11.0	20.0	9.0	12.1

##Inheritance: NoCan be animated: No. Please refer to Version: CSS3JavaScript Syntax:

CSS 语法

Attribute value

Default:	stretch

	CSS3 animation properties, CSS3 animation examples.

	object. style.alignItems="center" Effect preview

##initialSet this property to its default value. See initial.##More Flexible Flexible Box Model CSS For articles related to the align-items attribute, please pay attention to the PHP Chinese website!

Value	Description	Test
##stretch	default value. Items are stretched to fit the container.	Effect Preview
center	The item is located in the center of the container.	Effect preview
##flex-start	The item is at the beginning of the container.	Effect preview
##flex-end	The item is at the end of the container.	Effect preview
baseline	The project is located on the baseline of the container.	Effect Preview
	Effect preview
##inherit	Inherits this attribute from the parent element. See inherit.

Statement

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

Demystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Create a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AM

This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.

Adding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Working With GraphQL CachingMar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)Mar 04, 2025 am 10:22 AM

This article explores the top PHP form builder scripts available on Envato Market, comparing their features, flexibility, and design. Before diving into specific options, let's understand what a PHP form builder is and why you'd use one. A PHP form

Show, Don't TellMar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about