flex伸缩布局

已于 2022-04-12 16:48:42 修改
阅读量381 收藏
点赞数 5
分类专栏： flex 文章标签： css3 css html
于 2021-12-18 21:11:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56712012/article/details/121982197
版权

文章目录

传统布局与flex布局的区别

传统布局flex布局
兼容性好操作方便，布局极其简单，移动端使用比较广泛
布局繁琐pc端浏览器支持情况比较差
局限性，不能再移动端很好的布局IE11或更低版本不支持flex或仅支持部分

一、flex布局原理

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

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

二、flex布局父项常见属性

flex-direction：设置主轴的方向

在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴
默认主轴方向就是 x 轴方向，水平向右
默认侧轴方向就是 y 轴方向，水平向下

在这里插入图片描述

注意：主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
在这里插入图片描述
代码如下：

  <style>
        div {
            margin: 100px auto;
            /* 给父级添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴 行 row  那么y轴就是侧轴喽 */
            /* 我们的元素是跟着主轴来排列的 */
            /* flex-direction: row; */
            /* 简单了解 翻转 */
            /* flex-direction: row-reverse; */
            /* 我们可以把我们的主轴设置为 y轴 那么 x 轴就成了侧轴 */
            flex-direction: column;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

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

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

在这里插入图片描述
代码如下：

    <style>
        div {
            margin: 100px auto;
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            flex-direction: row;
            /* justify-content: 是设置主轴上子元素的排列方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* 让我们子元素居中对齐 */
            /* justify-content: center; */
            /* 平分剩余空间 */
            /* justify-content: space-around; */
            /* 先两边贴边， 在分配剩余的空间 */
            justify-content: space-between;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

</html>

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

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

  • nowrap 不换行
  • wrap 换行

代码如下：

   <style>
        div {
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* flex布局中，默认的子元素是不换行的， 如果装不开，会缩小子元素的宽度，放到父元素里面  */
            /* flex-wrap: nowrap; */
            flex-wrap: wrap;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>

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

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

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

    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 换行 */
            flex-wrap: wrap;
            /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
            /* align-content: flex-start; */
            /* align-content: center; */
            /* align-content: space-between; */
            align-content: space-around;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>

</html>

在这里插入图片描述

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

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

flex-start从头部开始
flex-end从尾部开始
center居中显示
stretch拉伸
代码如下：
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            flex-direction: column;
            justify-content: center;
            /* 我们需要一个侧轴居中 */
            /* 拉伸，但是子盒子不要给高度 */
            /* align-items: stretch; */
            align-items: center;
            /* align-content: center; */
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

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

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

flex-flow:row wrap;

align-content 和align-items区别

  • align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸
  • align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
  • 总结就是单行找align-items 多行找 align-content

三、flex布局子项常见属性

flex子项目占的份数

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

flex: <number>; /* 默认值 0 */
可跟百分比
flex:10%;

    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        
        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }
        
        section div:nth-child(2) {
            flex: 1;
            background-color: green;
        }
        
        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }
        
        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }
        
        p span {
            flex: 1;
        }
        
        p span:nth-child(2) {
            flex: 2;
            background-color: purple;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>

</html>

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

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

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

    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 让三个子盒子沿着侧轴底侧对齐 */
            /* align-items: flex-end; */
            /* 我们想只让3号盒子下来底侧 */
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
        
        div span:nth-child(2) {
            /* 默认是0   -1比0小所以在前面 */
            order: -1;
        }
        
        div span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

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

吐个泡泡~~
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
详解CSS3伸缩布局盒模型Flex布局
12-09
一、Flex 布局是什么？ CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局（Flexible Box）模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，...
前端知识——css之flex布局
Caleb的博客
05-20 2万+
1.基本概念 flex布局是一种布局模型，经常被称之为flexbox，使用flex布局之后，他会给子元素提供强大空间分配和对齐能力。 在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定位布局等等。缺陷是子元素需要自己控制自己在父元素中的位置，还要注意父元素高度坍塌。 flex的优点就是避免不灵活的布局形式，创建更多种布局模式供你选择，解决了子元素的对齐和分布与 响应式等问题。缺点是只能依靠自身的布局模式，稍有变化则无法改变。 2.flex...
CSS中的flex布局
weixin_67644104的博客
01-15 6536
CSS中的flex布局
2024年CSS学习笔记（flex 伸缩布局 ），前端开发开发视频
2401_84419009的博客
05-04 917
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】2、定义主轴方向。
CSS初入门：flex布局
lalala_dxf的博客
03-21 6606
flex布局 简介 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。布局的传统解决方案，基于盒模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。而Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。任何一个容器都可以指定为 Flex 布局。 关于flex弹性盒模型 采用 Flex 布局的元素，称为 Flex 容器（flex con
CSS之flex布局
weixin_45604020的博客
06-30 4957
和浮动一样都用于网页布局，但flex比浮动要更强大。flex不会产生脱标现象，布局网页更灵活、更简单（推荐使用）。弹性容器+弹性盒子+主轴+侧轴。
前端移动Web第二天知识点：Flex伸缩布局.zip
04-16
本知识点聚焦于"Flex伸缩布局"，这是现代Web开发中实现响应式布局的一种强大工具。让我们深入探讨Flex布局的基本概念、应用场景以及如何在实际项目中使用它。 Flex布局，全称为Flexible Box布局，是一种用于定义...
前端移动Web第二天：Flex伸缩布局-携程首页案例.zip
04-16
本篇将深入探讨"Flex伸缩布局"这一主题，以携程首页为例，揭示如何通过这种布局方式构建响应式、动态的网页。 Flex布局，全称为Flexible Box，是一种用于定义容器内子元素排列、对齐和分配空间的CSS布局模型。它...
flex布局实例DOM
01-15
7. `flex-grow`、`flex-shrink` 和 `flex-basis`：这三个属性共同决定了flex项目的伸缩性。`flex-grow`定义了项目的放大比例，`flex-shrink`定义了缩小比例，而`flex-basis`则设定了在分配多余空间之前，项目的基准...
CSS Flex 弹性布局
blog
07-13 1530
文章目录前言Flex一、专业名词二、属性值定义 flex 布局CSS 属性flex-directionflex-wrapflex-flowflex-growflex-shrinkflex-basisflexorder对齐属性align-contentalign-itemsalign-selfjustify-contentplace-contentrow-gapcolumn-gapgap总结 前言 在页面开发的过程中，CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器
详解CSS中的flex布局
DZQ1223的博客
06-13 4306
弹性盒子（display: flex）是把设置此属性的这块区域（设置此属性的元素）变为弹性盒子，使得此元素的直接子元素按照从左到右的顺序一行排列如果盒子变小（比子元素的宽度或高度小），里面的直接子元素会随着盒子的变化而变化，同时一直保持从左往右一行排列的布局。当主轴为水平方向的时候，若设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。默认值：auto，即项目本来的大小（采用元素内容的尺寸）。
css—flex布局
m0_64085523的博客
01-18 2313
flex布局 学习笔记一.简介：1.定义2.布局原理二.容器container（父元素）的属性1.flex-direction 设置主轴方向2.justify-content 设置主轴上子元素的排列方式3.flex-wrap 设置子元素是否换行4.flex-flow 复合元素，相当于同时设置了 flex-direction 和 flex-wrap5.align-items 设置侧轴上的子元素排列方式方式（单行）6.align-content : 设置侧轴上的子元素排列方式（多行）三,项目（item）子元
CSS中的Flex布局
最新发布
zheshiyangyang的博客
05-21 2170
Flexflex-direction：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上flex-wrap：子元素的换行方式：不换行、换行(第一行在上面、第二行在上面)flex-flow：子元素的排列方式和换行方式的简写justify-content：子元素的水平对齐方式align-items：子元素的垂直对齐方式align-content：设置多个元素组成的整块的对齐方式order：按照数字大小设置各个元素之间的排列方式flex-grow：按照权重分配剩余空间进行等比例放大。
Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
热门推荐
高大志leo的博客
12-11 4万+
前言 我们知道，网页展示就好比一个个盒子堆叠在一起，通过调整盒子的大小、位置、样式等，形成了各式各样的页面。当我们在开发一个页面的时候，我们常规的做法可能是：搭建框架、划分区域、定制排版、调整位置、嵌入内容、微调与增添样式。 今天所介绍的是基础且关键的一环--布局排版。其中，展开布局中常用的技术：Flex布局。 Flex布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box {
前端知识——css 之 flex 布局
weixin_42771853的博客
04-04 3546
flex 是 flex-grow || flex-shrink || flex-basis 的简写，flex 属性可以指定1个、2个或3个值。item 多出1个的时候，布局仍是正常的；只有item大于等于2个时，才会出现分散的分布，需要i进行补齐。flex-flow 属性是 flex-direction 和 flex-wrap 的简写，顺序任何。/* 只能设置宽度，不能设置高度，这样i的数量超出时也不会影响布局 */flex-wrap 取默认值时，若一行放不下所有的item元素，则会。
css基础之Flex布局
00后的程序员
03-03 1547
Flex的属性值练习。
css flex布局详解
liveXR的博客
07-06 8659
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex 就是一种布局方式，类似于 block，inline-block等。
CSS之Flex布局的详细解析
qq_69748833的博客
10-19 2478
添加一个。
flex（伸缩盒）布局技术
05-08
Flex布局是CSS3中的新功能，它是一种用于页面布局的模式，可以实现页面内元素的自适应排列和对齐方式的控制。通过对容器及其子元素的属性设置，实现灵活的盒模型布局。Flex布局技术主要包括以下几个方面： 1. 容器...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值