CSS基础--Flex弹性布局

最新推荐文章于 2024-04-27 09:43:02 发布
最新推荐文章于 2024-04-27 09:43:02 发布
阅读量994 收藏 3
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53062159/article/details/113815735
版权

Flex弹性布局

1. 弹性布局概念

弹性布局：Flexible Box 模型，通常被称为 flexbox（弹性盒子），主要用来为盒模型提供最大的灵活性，以便我们更好的实现多种响应式的页面布局，任何一个容器都可以指定为 flexbox（弹性盒子）

  • 主轴：在弹性布局中，我们会通过属性规定水平/垂直方向为主轴，默认水平方向为主轴。
  • 交叉轴：与主轴垂直的另一方向，称为交叉轴。

2. 弹性布局的使用

2.1 开启弹性布局

在使用弹性布局之前，需要弹性布局的元素的父容器添加display：flex; 属性，即可使容器内容采用弹性布局显示，默认从左到右。

开启弹性布局前：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 一般弹性布局一般用在卡片的布局之类或者手机底部导航栏布局 */
        .box {
            height: 150px;
            border: 1px solid black;
        }

        .box>div {
            width: 150px;
            border: 1px solid red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

在这里插入图片描述
开启弹性布局后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 一般弹性布局一般用在卡片的布局之类或者手机底部导航栏布局 */
        .box {
            height: 150px;
            border: 1px solid black;
            display: flex;
        }

        .box>div {
            width: 150px;
            border: 1px solid red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

在这里插入图片描述

注意事项：
1. 弹性布局需在需要左右排列的元素的父容器中开启
2. 弹性布局默认是沿着主轴方向排列（主轴方向默认为水平向右的方向）
3. 如果当前弹性布局内的元素没有设置宽高，则开启弹性布局后默认高度会等同于当前父容器的高度，如果已经预设好高度，那么元素宽高就不会受父容器影响

让元素左右排列的方法：

  1. 将元素转化成行内块元素 display: inline-block;（行内块元素之间由于会默认保留一位换行符，所以会导致有一个间隙）
  2. 使用float浮动属性（浮动会导致高度塌陷的问题）
  3. 使用弹性布局

2.2 弹性布局的排列方式

flex-direction：

  • row（默认主轴以水平方向排列）
  • row-reverse（主轴以水平方向排列，起点在右侧）
  • column（主轴以垂直方向排列）
  • column-reverse（主轴以垂直方向排列，起点在底部）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 1px solid black;
            /* 在父容器里设置弹性布局 */
            display: flex;
            /* 由于弹性布局元素始终会沿着主轴方向排列，则想要更改排列方式，就需要改变此时主轴的方向*/
            /* flex-direction 更改弹性布局中元素的排列方式 */
            flex-direction: row;
            flex-direction: row-reverse;
            flex-direction: column;
            flex-direction: column-reverse;
        }

        .box>div{
            width: 150px;
            height: 150px;
            /* 文本居中 */
            text-align: center;
            line-height: 150px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

在这里插入图片描述

2.3 弹性布局的换行方式

当容器的大小不足以容纳子元素的大小时，元素的大小就会变形。

flex-wrap：

  • nowrap（默认，不换行）
  • wrap（换行）
  • wrap-reverse（换行，第一行在下面）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 1px solid black;
            display: flex;
            flex-wrap: nowrap;
            flex-wrap: wrap;
            flex-wrap: wrap-reverse;
        }
        .box>div{
            width: 150px;
            height: 150px;
            border: 1px solid red;
            text-align: center;
            line-height: 150px;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- div{$}*12 -->
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>
</html>

在这里插入图片描述

左浮动和行内块元素布局时，当元素宽度之和超过容器的宽度时会自动换行。

2.4 弹性布局的对齐方式

主轴对齐方式：

justify-content：

  • flex-start（默认以主轴起点方向对齐）
  • flex-end（主轴终点方向对齐）
  • center（主轴中心点居中对齐）
  • space-between（主轴两端对齐，元素之间间距相等）
  • space-around（元素之间间距相等，元素之间的间距比元素与边界之间的间距大一倍）

交叉轴对齐方式：

align-items：

  • flex-start（交叉轴起点方向对齐）
  • flex-end（交叉轴终点方向对齐）
  • center（交叉轴中心点对齐）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 600px;
            border: 1px solid black;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .box>div {
            width: 150px;
            height: 150px;
            border: 1px solid red;
            /* 通过弹性布局将元素内的文本居中到正中心 */
            /* 开启弹性布局 */
            display: flex;
            /* 设置主轴居中 */
            justify-content: center;
            /* 设置交叉轴居中 */
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

在这里插入图片描述

2.5 弹性布局的空间分配

  • flex-grow：剩余空白部分的分配，如果有5个元素，元素都设置flex-grow:1，那么元素将等分空白部分（均分到空白部分的1/5）。如果只有一个元素设置flex-grow:2，其他元素都设置flex-grow:1，那么前者将分配到空白部分2/5的区域。
  • align-self：单独设置元素的垂直方向上的对齐方式（左对齐、右对齐、居中）。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 600px;
            border: 1px solid black;
            display: flex;
        }

        .box>div {
            width: 150px;
            height: 150px;
            border: 1px solid red;
            /* 通过弹性布局设置文本居中 */
            display: flex;
            /* 主轴居中 */
            justify-content: center;
            /* 交叉轴居中 */
            align-items: center;
        }

        .box>div:nth-of-type(1) {
            flex-grow: 2;
            /* align-self 单独设置弹性布局元素在交叉轴方向的对齐方式 */
            /* flex-start 以交叉轴方向的起点位置对齐 */
            align-self: flex-start;
        }

        .box>div:nth-of-type(2) {
            flex-grow: 1;
            /* center  以交叉轴方向居中的位置对齐*/
            align-self: center;
        }

        .box>div:nth-of-type(3) {
            flex-grow: 1;
            /* flex-end 以交叉轴方向的重点位置对齐 */
            align-self: flex-end;
        }
    </style>
</head>

<body>

    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    
</body>

</html>

在这里插入图片描述

2.6 网页标题图标的设置

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

网页标题图标支持png、jpg、icon、gif图等图片格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F18%2F07%2F23%2F8e2560169476aaa4c82dffde6c995de6.jpg&refer=http%3A%2F%2Fku.90sjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616916838&t=edac965efeacfafac7aea6e3cbb65cdf" type="image/x-icon">
</head>

<body>

</body>

</html>

在这里插入图片描述

哈密瓜Q
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS——Flex布局
weixin_48796690的博客
01-09 495
文章目录一、flex布局体验二、flex布局原理三、flex布局父元素常见属性1.flex-direction设置主轴的方向2.justify-content主轴上子元素排列方式3.flex-wrap设置子元素是否换行4.align-items侧轴上的子元素排列方式（单行）5.align-content侧轴子元素排列方式（多行）6.flex-flow复合属性四、flex布局子元素常见属性1.flex属性2.align-self属性3.order属性 一、flex布局体验 传统布局： （1）兼容性好 （2.
CSS-flex弹性布局
yen_zz的博客
04-12 476
1.认识flex Flex的发展史 2009年W3C 提出概念，但是官方没有flex这个词 2011年浏览器厂商决定使用flexbox，来形容它的布局特点 2015年W3C正式将其修改为flexbox布局 2016年5月官方正式公布最新的稳定的flex布局规范标准，各大浏览器的支持越来越稳定 定义 Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性 作用 它能够更加高效方便的控制元素的对齐、排列 可以自动计算布局内元素的尺寸，无论这个元素的尺寸
如何让组件内flex: 1失效？
April_99的博客
05-30 862
针对对应类名设置flex: none即可。
css弹性盒
m0_70877859的博客
07-18 1487
拉伸，在没有设置高度的情况下，会默认拉伸撑开到整个母盒子的高度。space-around距离环绕，第一个盒子与第二个盒子的距离正好是第一个盒子与大盒子的距离，左右外边距一致。3.弹性盒居中，只有一个元素的时候，加marginauto;适用主轴方向，横轴为主轴，则占满宽度，纵轴为主轴，则占满宽度。默认值为1，空间不够会产生挤压，更改值为0，就不允许被挤压，align-selfflex-end;则div1占1/5，daiv2占1/5，div3占3/5。align-selfflex-start;...
弹性布局(flex)从认识到使用让你一看就懂
最新发布
Lan_0316的博客
04-27 906
什么是弹性布局？弹性布局（Flex布局）是一种CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
解决flex:1失效的问题
jie_rookie的博客
12-01 3696
原因：文字过长，文字就会超出容器。
10-CSS布局之flex布局
qq_43975332的博客
08-19 780
1 flex布局 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 2 基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。 每根轴都有起点和终点，这对于元素的对齐非常重要。 弹性容器中的所有子元素称为<弹性元素&gt
flex布局
weixin_45645412的博客
01-19 374
flex布局 1.什么是flex布局 flex布局又称为弹性盒子布局，可以理解为他是一个承装容器的盒子 2.他的属性有哪些 1.flex-direction：属性决定主轴的方向 它有4个属性 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 2.flex-wrap：如果一行排不下，不想在一行显示，可以用这个换行属性 他有3个属性 nowrap：不
【前端学习笔记】09全方位了解flex布局
SevgiliD的博客
06-12 213
一个最直观的例子，当有以下HTML代码时 默认状态显示为： 当给⽗元素设置成 flex 容器后 效果变化如下：可以看到变成横向排列了，类似于 inline-block 的效果： 我们使⽤ flexbox 的所有属性都跟这两根轴线有关, 所以有必要在⼀开始⾸先理解它。主轴由 flex-direction 定义，⽽另⼀根轴（交叉轴）垂直于它。flex-direction 主要有两个值：row 、column。上文已介绍，此处省略 html代码 css代码 效果展示 css代码 效果展示 html代码 css代码 效果
弹性布局-flex布局.zip
05-18
Flex布局，全称为“Flexible Box”或“弹性盒布局”，是CSS3中一种用于处理容器内元素布局的模型。它旨在提供一个更加灵活、响应式的布局方式，尤其适用于多设备环境，如手机、平板电脑等移动设备。在传统布局模式下...
实例讲解CSS3中的box-flex弹性盒属性布局
09-24
CSS3中的`box-flex`是弹性盒模型的一部分，它允许开发者创建动态的、自适应的布局，能够根据可用空间自动调整元素的大小和位置。在Web开发中，flex布局已经成为了构建响应式和灵活界面的标准工具，因为它克服了传统...
FLEX 如何彻底清空
05-07
在FLEX 里,解决FLEX 占用内存一直不减，无法清除的问题
css flex 弹性布局详解
09-24
CSS Flex（弹性布局）是一种强大的布局模式，特别适用于创建响应式设计，因为它允许开发者更灵活地控制元素在容器中的对齐方式和排列顺序。在本文中，我们将深入探讨Flex布局的关键概念，包括基本用法、父容器属性...
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
flex:1失效问题
qq_35559000的博客
11-17 3938
解决flex布局内容超出盒子宽度问题
容器边框跳动
qq_41915899的博客
09-10 230
实现的样式是这样的 直接贴代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=..
css flex 踩坑总结
笔记本
08-12 1443
css flex 踩坑总结：(1) 使用 flex 的 center 时，如果本身尺寸 > 父容器尺寸，则内容会显示不全 (2) flex 布局中 overflow:hidden 失效
html篇：flex布局
Coder-coco的博客
04-18 1834
Flex布局（超重要app，小程序，pc端用到的超级多） 正在上传…重新上传取消 两个概念container和items 正在上传…重新上传取消 开启flex:display:flex:(inliner-flex) Flex布局模型 正在上传…重新上传取消 开启flex 正在上传…重新上传取消 变成 Flex的相关属性 正在上传…重新上传取消 Flex-container1-5属性 Flex-items6-10属性 Flex-container属...
css：flex：1 手工整理版
m0_71981318的博客
07-15 591
flex属性是`flex-grow`, `flex-shrink` 和 `flex-basis`的简写。 flex: 1表示 .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } flex-grow ：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 如果所有项目的`flex-grow`属性都为1，当父盒子有剩余空间，那么子盒子将等分剩余空间 如果一个项目的`flex-grow`属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值