search
HomeWeb Front-endCSS TutorialDetailed explanation of how CSS3 implements flexible layout

Detailed explanation of how CSS3 implements flexible layout

Jul 11, 2020 pm 04:33 PM
css3flexboxFlexible layout

Detailed explanation of how CSS3 implements flexible layout

1. CSS3 Flexible Box

Flexible box is a new layout mode of CSS3.

CSS3 Flexible Box (Flexible Box or flexbox) is a layout method that ensures that elements have appropriate behavior when the page needs to adapt to different screen sizes and device types.

The purpose of introducing the flexible box layout model is to provide a more efficient way to arrange, align and allocate empty space to sub-elements in a container.

2. Browser support

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

The -webkit- or -moz- immediately following the number is the prefix of the specified browser.

##Basic support (single-line flexbox)29.0 21.0 -webkit-11.022.0 18.0 -moz-6.1 -webkit-12.1 -webkit-Multi-line flexbox29.0 21.0 -webkit-11.028.06.1 -webkit-17.0 15.0 -webkit- 12.1
Attributes Detailed explanation of how CSS3 implements flexible layout Detailed explanation of how CSS3 implements flexible layout Detailed explanation of how CSS3 implements flexible layout Detailed explanation of how CSS3 implements flexible layout Detailed explanation of how CSS3 implements flexible layout

3. CSS3 Flexible Box Content

The flexible box is composed of a flexible container (Flex container) and a flexible sub-element (Flex item) .

A flexible container is defined as a flexible container by setting the value of the display property to flex or inline-flex.

The flexible container contains one or more flexible sub-elements.

Note: The outside of the flexible container and inside the flexible sub-element are rendered normally. The flex box only defines how the flex child elements are laid out within the flex container.

Flexible sub-elements are usually displayed in one line within the flexible box. By default there is only one row per container.

The following elements show the elastic child elements displayed in a row, from left to right:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FLEX</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 1200px;
            height: 640px;
            background-color: lightsteelblue;
        }
        .flex-container .flex-item {
            width: 320px;
            height: 240px;
            margin: 10px;
            background-color:lightsalmon;
        }
    </style>
</head>
<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

Detailed explanation of how CSS3 implements flexible layout

4. CSS3 Flexible Box Commonly used attributes

AttributeDescriptionflex -directionSpecify the arrangement of child elements in the flexible containerflex-wrapSet whether to wrap the child elements of the flexible box when they exceed the parent containerflex-flowAbbreviation for flex-direction and flex-wrapalign-items Set the alignment of the flex box elements in the side axis (vertical axis) directionalign-contentModify the behavior of the flex-wrap attribute, similar to align-items, But instead of setting the alignment of child elements, set the row alignmentjustify-contentSet the alignment of the flexible box element in the main axis (horizontal axis) direction

1. flex-direction 属性

决定项目的方向。

注意:如果元素不是弹性盒对象的元素,则 flex-direction 属性不起作用。

.flex-container { flex-direction: row | row-reverse | column | column-reverse; }

Detailed explanation of how CSS3 implements flexible layout

属性值

描述
row 默认值。元素将水平显示,正如一个行一样。
row-reverse 与 row 相同,但是以相反的顺序。
column 元素将垂直显示,正如一个列一样。
column-reverse 与 column 相同,但是以相反的顺序。

2. flex-wrap 属性

flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

描述
nowrap 默认值。规定元素不拆行或不拆列。
wrap 规定元素在必要的时候拆行或拆列。
wrap-reverse 规定元素在必要的时候拆行或拆列,但是以相反的顺序。
.flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }

可以取三个值:

(1) nowrap (默认):不换行。

Detailed explanation of how CSS3 implements flexible layout

(2)wrap:换行,第一行在上方。

Detailed explanation of how CSS3 implements flexible layout

(3)wrap-reverse:换行,第一行在下方。

Detailed explanation of how CSS3 implements flexible layout

3. flex-flow 属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

.flex-container { flex-flow: <flex-direction> <flex-wrap> }

4. align-items属性

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

描述
stretch 默认值。项目被拉伸以适应容器。
center 项目位于容器的中心。
flex-start 项目位于容器的开头。
flex-end 项目位于容器的结尾。
baseline 项目位于容器的基线上。

1Detailed explanation of how CSS3 implements flexible layout

5. justify-content属性

justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

描述
flex-start 默认值。项目位于容器的开头。
flex-end 项目位于容器的结尾。
center 项目位于容器的中心。
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。

1Detailed explanation of how CSS3 implements flexible layout

五、弹性子元素属性

属性 描述
order 设置弹性盒子的子元素排列顺序。
flex-grow 设置或检索弹性盒子元素的扩展比率。
flex-shrink 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。
flex-basis 用于设置或检索弹性盒伸缩基准值。
flex 设置弹性盒子的子元素如何分配空间。
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。

1. order属性

.flex-container .flex-item { order: <integer>; }

:用整数值来定义排列顺序,数值小的排在前面。可以为负值,默认为0。

1Detailed explanation of how CSS3 implements flexible layout

2. flex-grow属性

.flex-container .flex-item { flex-grow: <integer>; }

:一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

1Detailed explanation of how CSS3 implements flexible layout

3. flex-shrink属性

.flex-container .flex-item { flex-shrink: <integer>; }

:一个数字,规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

1Detailed explanation of how CSS3 implements flexible layout

4. flex-basis属性

.flex-container .flex-item { flex-basis: <integer> | auto; }

:一个长度单位或者一个百分比,规定元素的初始长度。

auto:默认值。长度等于元素的长度。如果该项目未指定长度,则长度将根据内容决定。

5. flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

.flex-container .flex-item {
flex:flex-grow flex-shrink flex-basis|auto|initial|inherit;
}
描述
flex-grow 一个数字,规定项目将相对于其他元素进行扩展的量。
flex-shrink 一个数字,规定项目将相对于其他元素进行收缩的量。
flex-basis 项目的长度。合法值:"auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto 与 1 1 auto 相同。
none 与 0 0 auto 相同。
initial 设置该属性为它的默认值,即为 0 1 auto。
inherit 从父元素继承该属性。

6. align-self属性

.flex-container .flex-item {
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
}
描述
auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
stretch 元素被拉伸以适应容器。
center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
baseline 元素位于容器的基线上。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

1Detailed explanation of how CSS3 implements flexible layout

取值同 align-items。

参考

本文转载自:https://www.jianshu.com/p/5856c4ae91f2

相关推荐:CSS视频教程

The above is the detailed content of Detailed explanation of how CSS3 implements flexible layout. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:简书. If there is any infringement, please contact admin@php.cn delete
A Little Reminder That Pseudo Elements are Children, Kinda.A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTImproving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteWeekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherMaking width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersPosition Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryWeekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties

IndieWeb and WebmentionsIndieWeb and WebmentionsApr 19, 2025 am 11:16 AM

The IndieWeb is a thing! They've got a conference coming up and everything. The New Yorker is even writing about it:

See all articles

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

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment