社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 web前端 css教程 详解CSS3实现弹性布局的方式

详解CSS3实现弹性布局的方式

青灯夜游
青灯夜游
Jul 11, 2020 pm 04:33 PM
css3 flexbox 弹性布局

详解CSS3实现弹性布局的方式

一、CSS3弹性盒子

弹性盒子是CSS3的一种新布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

二、浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

属性 1.png 2.png 3.png 4.png 5.png
Basic support (single-line flexbox) 29.0 21.0 -webkit- 11.0 22.0 18.0 -moz- 6.1 -webkit- 12.1 -webkit-
Multi-line flexbox 29.0 21.0 -webkit- 11.0 28.0 6.1 -webkit- 17.0 15.0 -webkit- 12.1

三、CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右:

<!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>
登录后复制

6.png

四、CSS3 弹性盒子常用属性

属性描述
flex-direction指定弹性容器中子元素排列方式
flex-wrap设置弹性盒子的子元素超出父容器时是否换行
flex-flowflex-direction 和 flex-wrap 的简写
align-items设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
align-content修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
justify-content设置弹性盒子元素在主轴（横轴）方向上的对齐方式

1. flex-direction 属性

决定项目的方向。

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

.flex-container { flex-direction: row | row-reverse | column | column-reverse; }
登录后复制

7.png

属性值

值描述
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 (默认)：不换行。

8.png

（2）wrap：换行，第一行在上方。

9.png

（3）wrap-reverse：换行，第一行在下方。

10.png

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项目位于容器的基线上。

11.png

5. justify-content属性

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

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

12.png

五、弹性子元素属性

属性描述
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。

13.png

2. flex-grow属性

.flex-container .flex-item { flex-grow: <integer>; }
登录后复制

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

14.png

3. flex-shrink属性

.flex-container .flex-item { flex-shrink: <integer>; }
登录后复制

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

15.png

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 从父元素继承该属性。

16.png

取值同 align-items。

参考

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

相关推荐：CSS视频教程

以上是详解CSS3实现弹性布局的方式的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

如何修复KB5055523无法在Windows 11中安装？
3 周前 By DDD
如何修复KB5055518无法在Windows 10中安装？
3 周前 By DDD
<🎜>：种植花园 - 完整的突变指南
2 周前 By DDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
如何修复KB5055612无法在Windows 10中安装？
3 周前 By DDD
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程
1662
14
CakePHP 教程
1419
52
Laravel 教程
1313
25
PHP教程
1262
29
C# 教程
1235
24
显示更多
Related knowledge
html怎么让一个div居中 html怎么让一个div居中 Apr 05, 2024 am 09:00 AM

有两种方法可以在 HTML 中让一个 div 居中：使用文本对齐属性（text-align: center）：适用于较简单的布局。使用弹性布局（Flexbox）：提供更灵活的布局控制，步骤包括：在父元素中启用 Flexbox（display: flex）。将 div 设置为 Flex 项目（flex: 1）。使用 align-items 和 justify-content 属性进行垂直和水平居中。

如何使用Css Flex 弹性布局实现等高的列布局 如何使用Css Flex 弹性布局实现等高的列布局 Sep 27, 2023 pm 03:17 PM

如何使用CSSFlex弹性布局实现等高的列布局CSS弹性盒子布局（CSSFlexibleBoxLayout）简称Flex布局，是一种用于页面布局的模块。Flex布局可以让我们更轻松地实现等高的列布局，无论内容的高度如何，它们都能够等高显示。在这篇文章中，我们将介绍如何使用CSSFlex布局来实现等高的列布局。以下是具体的代码示例。HTML结构：&

CSS 布局属性优化技巧：position sticky 和 flexbox CSS 布局属性优化技巧：position sticky 和 flexbox Oct 20, 2023 pm 03:15 PM

CSS布局属性优化技巧：positionsticky和flexbox在网页开发中，布局是一个非常重要的方面。良好的布局结构可以提高用户体验，使页面更加美观和易于导航。而CSS布局属性则是实现这一目标的关键。在本文中，我将介绍两种常用的CSS布局属性优化技巧：positionsticky和flexbox，并提供具体的代码示例。一、positions

CSS 弹性布局属性指南：position sticky 和 flexbox CSS 弹性布局属性指南：position sticky 和 flexbox Oct 27, 2023 am 10:06 AM

CSS弹性布局属性指南：positionsticky和flexbox在现代网页设计中，弹性布局已经成为一种非常流行和有用的技术。它可以帮助我们创建自适应的网页布局，使得网页在不同设备和屏幕尺寸上都能够良好地显示和响应。本文将重点介绍两个弹性布局属性：position:sticky和flexbox。我们将详细讨论它们的用法，并通过具体的代码示例来

H5中position属性的灵活运用技巧 H5中position属性的灵活运用技巧 Dec 27, 2023 pm 01:05 PM

H5中如何灵活运用position属性在H5开发中，经常会涉及到元素的定位和布局问题。这时候，CSS的position属性就会发挥作用。position属性可以控制元素在页面中的定位方式，包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘附定位（sticky）。本文将详细介绍在H5开发中如何灵活运用position属性

如何使用Css Flex 弹性布局实现瀑布流布局 如何使用Css Flex 弹性布局实现瀑布流布局 Sep 27, 2023 pm 04:22 PM

如何使用CSSFlex弹性布局实现瀑布流布局随着网页设计的不断发展，瀑布流布局成为了一种非常流行的页面布局方式。与传统的网格布局不同，瀑布流布局能够自适应屏幕大小，并且呈现出独特的流动感。在本文中，我们将介绍如何使用CSSFlex弹性布局来实现瀑布流布局，并提供具体的代码示例。CSSFlex弹性布局是一种强大的布局模型，它通过在容器元素上应用di

display在css中是什么意思 display在css中是什么意思 Apr 28, 2024 pm 04:00 PM

CSS中的display属性控制元素在网页中的布局。其含义：inline：元素内联排列，与文本流动。block：元素块级排列，独占一行，占据宽度。inline-block：结合inline和block特性，内联排列但可设置尺寸。none：隐藏元素。flex：使用弹性布局，自动调整元素大小和位置。grid：使用网格布局，精确控制元素位置和大小。

如何通过Css Flex 弹性布局实现不规则的网格布局 如何通过Css Flex 弹性布局实现不规则的网格布局 Sep 28, 2023 pm 09:49 PM

如何通过CSSFlex弹性布局实现不规则的网格布局在网页设计中，常常需要使用网格布局来实现页面的分割和排版，通常的网格布局都是规则的，每个网格大小相同，而有时候我们可能需要实现一些不规则的网格布局。CSSFlex弹性布局是一种强大的布局方式，它可以很容易地实现各种网格布局，包括不规则的网格布局。下面我们将介绍如何利用CSSFlex弹性布局来实现不

See all articles