css之flex布局

最新推荐文章于 2023-12-06 10:27:58 发布
最新推荐文章于 2023-12-06 10:27:58 发布
阅读量360 收藏
点赞数
分类专栏： 前端 文章标签： flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46357847/article/details/118461214
版权

flext弹性局部

1、传统布局与flex布局

1.1、传统布局

  • 兼容性好
  • 布局繁琐
  • 局限性，不能再移动端很好的布局

1.2、flex弹性布局

  • 操作方便，布局极为简单，移动端应用很广泛
  • PC端浏览器支持情况较差
  • IE 11或更低版本，不支持或仅部分支持

建议：

  1. 如果是PC端页面布局，我们还是传统布局。
  2. 如果是移动端布局或者是不考虑兼容性问题的 PC端页面布局，我们还是使用flex弹性布局。

1.3、flex布局初体验

1、子元素水平显示
在这里插入图片描述
代码实现 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: aqua;
        }
        .box span {
            width: 150px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

2、子元素水平方向平分父元素空间显示
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: aqua;
            /* 水平方向平分空间 */
            justify-content: space-around;
        }
        .box span {
            width: 150px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

3、三等分
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: aqua;
            /* 水平方向平分空间 */
            justify-content: space-around;
        }
        .box span {
            flex: 1;
            height: 100px;
            margin-right: 1px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

2、flex布局原理

flex是flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

  • 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素，称为flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称"项目"。

  • 初体验中div就是flex父容器
  • 体验中span就是子容器flex项目
  • 子容器可以横向排列也可以纵向排列

图示：
在这里插入图片描述
总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

3、flex布局父项常见属性

3.1、常见的父项属性

一下由6个属性是对父元素设置的：

  1. flex-direction：设置主轴的方向
  2. justify-content：设置主轴上的子元素排列方式
  3. flex-wrap：设置子元素是否换行
  4. align-content：设置侧轴上的子元素的排列方式（多行）
  5. align-items：设置侧轴上的子元素排列方式（单行）
  6. flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

3.2、flex-direction设置主轴的方向

1、主轴与侧轴

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列，x轴和y轴。

  • 默认主轴方向就是x轴方向，水平向右
  • 默认侧轴方向就是y轴方向，水平向下

注意flex-direction属性值的默认值就是主轴就是x轴即flex-direction: row;

在这里插入图片描述
** 2、属性值**
flex-direction属性决定了主轴的方向（即项目的排列方式）

注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴剩下的就是侧轴，而我们的子元素是跟着主轴来排列的。

属性值说明
row默认值从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 给父元素添加flex属性 */
            display: flex;
            flex-direction: row; /* 默认值主轴是x轴，那么y轴就是侧轴 */
            width: 80%;
            height: 300px;
            background-color: aqua;
            /* 注意：我们的元素是跟着主轴来排列的 */
        }
        .box span {
            width: 20%;
            height: 100px;
            margin-right: 1px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

效果图：
在这里插入图片描述
我们可以把我们的主轴设置为y轴，那么x轴就成了侧轴了。如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 给父元素添加flex属性 */
            display: flex;
            flex-direction: column; /* 设置y轴为主轴，此时x轴为侧轴 */
            width: 80%;
            height: 300px;
            background-color: aqua;
            /* 注意：我们的元素是跟着主轴来排列的 */
        }
        .box span {
            width: 20%;
            height: 100px;
            margin-top: 1px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

3.3、justify-content设置主轴上的子元素排列方式

justify-content属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定好主轴是哪个

属性值说明
flex-start默认值从头部开始，如果主轴是x轴，则从左到右
flex-end从尾部开始排列
center在主轴居中对齐（如果主轴是x轴则水平居中）
space-around平方剩余空间
space-between先两边贴边，再平方剩余空间（重要）

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 80%;
            height: 400px;
            background-color: pink;
            flex-direction: row;
            /* justify-content是设置主轴上子元素的排列方式 */
            /* 默认值是flex-start */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* 让我们的子元素居中对齐 */
            justify-content: center;
            /* 平分剩余空间 */
            /* justify-content: space-around; */
            /* 先两边贴边，在平分剩余空间 */
            /* justify-content: space-between; */

        }
        .box span {
            width: 20%;
            height: 30%;
            background-color: royalblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

3.4、flex-wrap设置子元素是否换行

默认情况下，项目都排在一条线(又称"轴线")上，flex-wrap属性定义，flex布局中默认是不换行的 。

属性值说明
nowrap默认值，不换行
wrap换行

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 30%;
            height: 400px;
            background-color: pink;
            flex-direction: row;
            /* flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面 */
            /* flex-wrap: nowrap; 默认值 */
            flex-wrap: wrap; /* 换行 */
        }
        .box span {
            width: 25%;
            height: 30%;
            margin: 10px;
            background-color: royalblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

3.5、align-items设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用。

属性值说明
flex-start从上到下
flex-end从下到上
center挤在一起居中（垂直居中）
stretch拉伸（默认值）

例如：元素在居中案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 30%;
            height: 300px;
            background-color: pink;
            flex-direction: row;
            /* 主轴水平居中 */
            justify-content: center;
            /* 侧轴垂直居中 */
            align-items: center;
        }
        .box span {
            width: 25%;
            height: 30%;
            margin: 10px;
            background-color: royalblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

3.6、align-content设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

属性值说明
flex-start默认值在侧轴的头部开始排列
flex-end在侧轴的尾部开始排列
center在侧轴中间显示
space-around子项在侧轴水平平方剩余空间
space-between子项在侧轴先分布在两头，在平分剩余空间
stretch设置子项元素高度平分父元素高度

如：换行元素居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 30%;
            height: 300px;
            background-color: pink;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
            align-content: center;

        }
        .box span {
            width: 25%;
            height: 30%;
            margin: 10px;
            background-color: royalblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

3.7、align-content和align-items的区别

1、align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸

2、align-content适用于换行(多行)的 情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。

3、总结就是单行找align-items多行找align-content。

在这里插入图片描述

3.8、flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合属性。

/*flex-direction: column;
flex-wrap: wrap;*/

/* 把设置主轴方向和是否换行（换列）简写 */
flex-flow: column wrap;

4、flex布局子项常见属性

1、flex子项目占的份数

2、align-self控制子项目自己在侧轴的排列方式

3、order属性定义子项的排列顺序(前后顺序)

4.1、flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        .box div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }
        
        .box div:nth-child(2) {
            flex: 1;
            background-color: seagreen;
        }
        .box div:nth-child(3) {
            flex: 2;
            background-color: springgreen;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

4.2、align-self控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 60%;
            height: 400px;
            background-color: pink;
            /* 让三个盒子沿着侧轴底侧对齐 */
            /* align-items: flex-end; */
        }
        .box span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-left: 5px;
        }
        .box span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

4.3、order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。注意：和z-index不一样。

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 60%;
            height: 400px;
            background-color: pink;
            /* 让三个盒子沿着侧轴底侧对齐 */
            /* align-items: flex-end; */
        }
        .box span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-left: 5px;
        }
        .box span:nth-child(2) {
            /* 默认是0，-1比0小所以在前面 */
            order: -1;
        }
        .box span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

lambda.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Flex布局：打造灵动、响应式网页设计的利器
JINGWHALE
06-11 930
Flex布局，又称弹性盒布局，是现代CSS布局体系中的璀璨明珠。它以革命性的理念革新了传统的网页布局方式，为设计师和开发者提供了前所未有的灵活性与便捷性。本篇内容精讲将引领您全方位领略Flex布局的魅力，深入剖析其工作原理与核心属性，助您在实践中轻松驾驭复杂、响应式的网页设计。
CSS之flex布局
weixin_43311978的博客
07-25 292
text
flex弹性布局入门
weixin_44852386的博客
09-13 1480
学习完了flex布局，觉得很有用，然后就写了这么一篇博客来做个总结。（提前说明一下，我是跟随b站上某位很出名老师的指导完成的学习，可能有同学和我学习了同样的内容。） flex布局是非常实用的一种前端布局，在不少主流前端语言都有出现，今天我们主要以HTML为案例。 一、基础代码展示和效果体验 1.下面将是我们页面的基础代码，所有的改变将以本代码为基础，添加的绝大部分改变可添加入style标签中。 <!DOCTYPE html> <html lang="en"> <head>
flex 实现三栏等分且超出自动换行的多行布局（含最后一行子元素为两个时，左对齐和两端对齐两种方案）
qiqiliuwu的博客
09-25 3634
本文主要采用flex布局方式，实现容器内三栏布局的同时，还能够做到容器内子元素超过3个时，自动换行，且后边的每一行一样都是三栏等分排列。
【CSS】flex 实现三栏等分布局
leo的博客
04-12 4228
flex 实现三栏等分布局
CSS布局flex布局 对齐 等分 均分 详解
热门推荐
boy火巨的博客
04-23 3万+
一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到float属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在float: center的写法，那么text-align: center、verticle-align: center是否...
​使用Css3弹性布局给子div平均分配宽度
最新发布
_江屿_
12-06 385
​使用Css3弹性布局给子div平均分配宽度
css与flex布局
weixin_73261958的博客
08-24 219
CSS的flex布局
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。... 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
CSS3 flex布局之快速实现BorderLayout布局
12-13
【CSS3 Flex布局】是一种强大的网页布局解决方案，它允许开发者轻松地创建响应式和动态的用户界面。在Flex布局模式中，元素可以在容器内灵活调整大小和位置，以适应不同的屏幕尺寸和方向。相较于传统的布局方式，如...
css3 flex布局实现平均分配元素的示例代码
11-20
在CSS3中，Flex布局（Flexible Box）是一种强大的布局模型，用于处理复杂的网页布局问题，尤其是在响应式设计中。它允许开发者更容易地控制容器内的子元素的排列、对齐和大小调整。本篇文章将深入探讨如何使用Flex...
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
Flex经典等分布局
小李科技
06-03 1657
Flex 导航头 等分布局
flex布局
qac的博客
02-24 1458
文章目录01.flex布局02.常见父项属性03.flex-direction属性04.justify-content属性05.flex-wrap属性06.align-items属性(单行)07.align-content属性(多行)08.flex-flow属性09.常见子项属性10.flex属性11.align-self属性12.order属性 01.flex布局 flex是flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局 当父盒子设为f
flex布局实现子元素在父元素中均匀分布
遇见小美好
06-18 5163
首先认识一下flex子元素的三个属性,这三个属性控制一个flex子元素的以下几个方面: flex-grow: 这个flex子元素得到（伸张）多少positive free space? flex-shrink: 从这个flex子元素要消除（收缩）多少negative free space? flex-basis: 在flex子元素未伸张和收缩之前，它的大小是多少? 以上属性通常用一个简写属性flex 表达. 下面的代码设置 flex-grow 属性值为 2, flex-shrink 属性值为 1 ，fle
响应式布局--flex学习
蹦哒哒的王小哲
07-07 4409
flex 是css3 中一种新的布局模式，可以简单、完整、响应式地实现各种页面布局，非常适合移动端页面开发。
弹性布局flex
qq_57215961的博客
05-02 3452
弹性布局 使盒模型更加随心所欲的实现布局样式，使用弹性布局，让父级有能力改变子级的宽高，同时弹性布局与方向无关，适合于小规模布局 写在父级作用于子级的属性
父元素宽度一定，子元素完美均分父级宽度
智韬的博客
12-13 4391
我们都是爱美的生物，大多数要求对一个东西进行分割时，我们都会尽可能的均分它。在页面中，一个div盒子有的固定像素宽度，有的为百分比。如何能很好的均分一个div呢？ 以下将提供五个均分父元素的方法,其中 方法四flex布局为常用 先提供原始代码及其展示： 为了展示有所区别，便于观察，添加了padding，不同的子元素添加不同的border颜色 html: <div class = "far...
css取消flex布局
08-31
- *1* *2* *3* [CSS之flex布局详解](https://blog.csdn.net/weixin_46820017/article/details/116460512)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lambda.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值