伸缩布局

最新推荐文章于 2022-03-07 09:02:30 发布
最新推荐文章于 2022-03-07 09:02:30 发布
阅读量171 收藏 1
点赞数
分类专栏： 前端学习笔记 CSS 文章标签： html css flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44960253/article/details/105594323
版权

伸缩布局

伸缩布局技术主要用在移动端。在PC端的高版本浏览器支持，低版本不支持。在PC端一般不用伸缩布局的方式。

注意嗷：伸缩布局应该在父盒子的样式中设置，设置完后是对子盒子产生影响。

Flex布局

在这里插入图片描述

常用属性在这里插入图片描述

flex-direction

作用：控制主轴方向，水平？垂直？从左往右？从右往左？从上到下？从下到上？？

主轴的概念：

一个盒子里如果所有子盒子都是从上往下排列。则认为从上往下的线条称为 主轴。

在这里插入图片描述
同理，一个盒子里的子盒子若都是从左往右排列，则称一条从左到右的线条为 主轴

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-udDWt49v-1587176639699)(伸缩布局.assets/image-20200415221751222.png)]

flex-direction : row | row-reverse | column | column-reverse （设置主轴方向）

flex-direction: row 主轴方向水平向右; row-reverse 方向相反

flex-direction: column 主轴方向竖直向下；column-reverse 方向相反

  • flex-direction: column

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d74iw383-1587176639700)(伸缩布局.assets/image-20200415235413203.png)]

  • flex-direction: column-reverse

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZALJO1Jk-1587176639701)(伸缩布局.assets/image-20200415235312404.png)]

要注意1、2、3块的顺序发生了改变。也就是说，flex-direction会决定盒子分布的起点位置，以及接下来的布局方向。

  • flex-direction: row-reverse

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K2VxESMx-1587176639702)(伸缩布局.assets/image-20200415235915787.png)]

justify-content

取值：flex-start | flex-end | center | space-between | space-around

justify-content用于指定主轴（水平方向）上flex子项的对齐方式

用主轴确定了盒子布局的起点后，就可以用justify-content来确定盒子之间的相对位置。

父级盒子已经display: row; flex-direction: row;

  • justify-content: flex-start默认值，表示与主轴的起始位置对齐

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rcz4miTn-1587176639703)(伸缩布局.assets/image-20200416002232703.png)]

  • justify-content: flex-end表示与主轴的结束位置对齐

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xdGdP0Mg-1587176639703)(伸缩布局.assets/image-20200416002306239.png)]

  • justify-content: center表示与主轴中间位置对齐

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-phckUeUa-1587176639704)(伸缩布局.assets/image-20200416002148412.png)]

  • justify-content: space-between表示与主轴两端对齐，中间距离间距相等。要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于flex-start

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5NSjYzc3-1587176639706)(伸缩布局.assets/image-20200416001932416.png)]

  • justify-content: space-around表示间距相等，中间间距是两端间距的2倍，要注意特殊情况，当剩余空间为负数或者只有一个项时，效果等同于center

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MQMnRbdv-1587176639707)(伸缩布局.assets/image-20200416001604176.png)]

align-items

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iV3qyDY2-1587176639707)(伸缩布局.assets/image-20200416002944424.png)]

取值：stretch(拉伸) | flex-start | flex-end | center | baseline

  • flex-start与侧轴开始位置对齐

  • flex-end与侧轴结束位置对齐

  • center：表示与侧轴中间对齐（justify-content: flex-start;）

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J69SuhmN-1587176639708)(伸缩布局.assets/image-20200416091654998.png)]

  • baseline：让所有盒子沿着一条基准线对齐。必须不同盒子的高度不同才能显示出效果。否则看不出来区别。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3H8CAzFG-1587176639708)(伸缩布局.assets/image-20200416091723241.png)]

    flex-wrap

    作用：设置父元素为Flex布局后，可能会出现因为子盒子数量太多而导致子盒子溢出父盒子。这个时候，就可以使用flex-wrap来决定时候解决这个问题。flex-wrap用于指定 Flex 子项是否换行（换列）(注意：在计算机科学中wrap为“换行”的意思，不是“包裹”（参考自有道翻译）)

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dIO9GopD-1587176639709)(伸缩布局.assets/image-20200416092202159.png)]

    取值：nowrap | wrap | wrap-reverse

    • nowrap：不换行。默认设置。（为防止子盒子溢出，会强制改变子盒子的宽度（高度）以适应父盒子的宽度（高度））

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vn9SO9Zy-1587176639710)(伸缩布局.assets/image-20200416093529326.png)]

    • wrap：换行。保持子盒子的形状。

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iAM5tjRR-1587176639710)(伸缩布局.assets/image-20200416093745303.png)]

      盒子太多的时候会改变盒子之间的外边距

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Daa1gd9Q-1587[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-31QumZf5-1587177134899)(!%5Bimage-20200416093745303%5D%28%E4%BC%B8%E7%BC%A9%E5%B8%83%E5%B1%80.assets/image-20200416093745303.png%29#pic_center)]176639711)(伸缩布局.assets/image-20200416093855436.png)]

    • wrap-reverse：反转子盒子的起始位置[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jIyMtArk-1587176639711)(伸缩布局.assets/image-20200416094126569.png)]

      align-content

      该属性只作用于多行的情况下，用于多行的对齐方式。

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gRiMT7NI-1587176639712)(伸缩布局.assets/image-20200416095032499.png)]

      • stretch:默认值，当 Flex 子项未设置高度 或者高度值为auto时，stretch起作用， 将Flex子项高度设置为行高度;

      • flex-start: 表示各行与侧轴开始位置对齐，第一行紧靠侧轴开始边界，之后的每一行都紧靠前面一 行

      • flex-end: 表示各行与侧轴的结束位置对齐，最后行紧靠侧轴结束边界， 之后的每行都紧靠前面一 行

      • center: 表示各行与侧轴中间对齐;

        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nKMvOH7D-1587176639713)(伸缩布局.assets/image-20200416101846226.png)]

      • space-between: 表示两端对齐。中间间距相等。要注意特殊情况，当剩余空间为负数时，效果等同于flex start

      • space-around: 表示各行之间间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数时，效果等同于 center

      align-self

      该属性用来单独指定某 Flex 子项的对齐方式

      取值：auto | flex-start | flex-end | center | baseline | stretch

复合属性 flex

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-phaN8ARf-1587176639714)(伸缩布局.assets/image-20200416102749061.png)]

可以用来做响应式布局，来适应不同页面大小。根据父盒子的大小，子盒子等比缩放。

<body>
    <div id="main_div">
        <div class="item" style="flex: 1; height: 2rem;">div1</div>
        <div class="item" style="flex: 2; height: 4rem;">div2</div>
        <div class="item" style="flex: 3; height: 6rem;">div3</div>
        <div class="item" style="flex: 1; height: 7rem;">div3</div>
        <div class="item" style="flex: 2;height: 8rem;">div3</div>
        <div class="item" style="flex: 4;height: 9rem;">div3</div>
    </div>
</body>

根据 div 标签中的style属性的 flex 设置，main_div 中第一个div 的宽度为一行的 1/ (1+2+3+1+2+4)，第二个div宽度为一行的 2/(1+2+3+1+2+4)，其他标签宽度以此类推。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VDU9oktj-1587176639714)(伸缩布局.assets/image-20200416103645283.png)]

好处是：当页面大小改变时子盒子的相对宽度不变。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nAyjLJif-1587176639716)(伸缩布局.assets/image-20200416103821377.png)]

（宽度至少要撑起内容啊）

在这里插入图片描述

theSunAndSnow
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 伸缩布局(CSS3) （三）
林彬的专栏
06-07 200
3、justify-content调整主轴对齐（水平对齐） 子盒子如何在父盒子里面水平对齐 值 描述 白话文 flex-start 默认值。项目位于容器的开头。 让子元素从父容器的开头开始排序但是盒子顺序不变 flex-end 项目位于容器的结尾。 让子元素从父容器的后面开始排序但是盒子顺序不变 center 项目位于容器的中心。 让子元素在父容器中间显示 space-...
学伸缩布局(flex)这一篇文章就够了——伸缩布局的布局思路
梅花寺
02-25 223
伸缩布局又被称为弹性布局，它可以快速实现一些常见的布局，和浮动和定位比起来，他就友好太多了，给子盒子加上宽高，父盒子开启伸缩布局加上一些代码子盒子就可以自己去排列。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
CSS：布局——伸缩布局flex
KaiSarH
12-17 553
CSS中的Flex伸缩布局
伸缩盒（flex）
归尘
08-11 103
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex</title> <style> body { margin: 0; } .outer { background-color: #eded...
CSS之伸缩盒
qq_45753147的博客
03-07 949
Flexible Box是什么？Flexible意为可伸缩的，Box意为盒子，可以理解为一种新式的盒模型——伸缩盒模型。由CSS3规范提出，这是在原有的大家非常熟悉的block, inline-block, inline的基础上延伸出的新一代布局模式。 浏览器兼容性 作为非常现实的开发者，是否对一个新技术进行关注，首先要考虑它的浏览器兼容性如何。我们的伸缩盒模型的浏览器兼容性看起来还是相当不错的。 可以看到，现代浏览器基本上都支持了，IE10开始也支持了（IE和Safari分别加-ms-和-w
Android 伸缩布局
06-24
在Android开发中，为了提供更丰富的用户交互体验，开发者经常需要实现一些动态的视图变换效果，例如伸缩布局（Shrink Layout）。这种布局允许视图根据用户的操作进行展开或收缩，以展示或隐藏其中的内容。本文将深入...
伸缩布局之携程旅游
02-06
【标题】：“伸缩布局之携程旅游” 在现代网页设计和开发中，为了实现跨设备、跨屏幕尺寸的优秀用户体验，伸缩布局（通常被称为Flexbox布局）扮演着至关重要的角色。以“携程旅游”为例，它作为一个全球知名的在线...
可伸缩布局方案
05-15
在IT行业中，尤其是在Web开发领域，可伸缩布局（Responsive Layout）是一种重要的设计策略，它允许网页内容在不同尺寸和分辨率的设备上自适应显示。本文将深入探讨HTML5中的可伸缩布局方案，以及如何处理设备的倍屏...
Android 实现伸缩布局效果示例代码
08-31
在Android开发中，实现伸缩布局效果通常是为了创建动态、可调整的用户界面，以便适应不同的屏幕尺寸和用户交互需求。本示例中，开发者利用FlowLayout来实现这种效果，而不是传统的ListView或GridView，因为...
详解CSS3伸缩布局盒模型Flex布局
12-09
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局（Flexible Box）模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。 CSS3引入...
网页排版布局方法加伸缩布局
qq_43712187的博客
04-18 1025
一、表格布局 设置表格给各个单元填充即可 二、frameset框架 特点: 替代了body标签 作用: 主要是用来搭建整个网站的布局框架 快速 横向框架 rows和纵向框架cols 内嵌框架 iframe 不会替代body 可以写在body中 注：在HTML5已经淘汰了 三、浮动定位加css+div来布局 四、伸缩布局 如何让水平排版 ----前提没有给父元素设置高度 ...
PC端自适应布局
热门推荐
sunshine940326的博客
02-15 5万+
截止目前，国内绝大多数内容为主的网站（知乎，果壳，V2EX，网易新闻等）均使用内容区定宽布局，大多数电商网站（网易考拉，京东，聚美优品）也使用了内容区定宽的布局，也有些网站使用了自适应布局： 天猫 内容区采用媒体查询+定宽，在达到某个断点之后更改内容区的宽度，并把某个内容显示/隐藏。 注意热门市场这里，虽然每一个方块的宽度是随着断点变化的，但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定
京东移动端页面布局
Waterme_lon的博客
05-20 3345
html代码 京东m 登录 </header> <div class="jd_banner"...
PC端自适应的可交互的经典布局详解
万少博-FE
05-08 6360
时间：2017年5月8日08:55:22     作为一名Web前端开发工程师，基本功就是扎实的CSS布局功底，做过整站开发的工程师都知道，第一步不是盲目搭建页面框架，而是对设计稿进行分析和规划。本文以一个通用性较高的实际项目，进行深入分析和探讨。 1、设计稿，如下图所示 2、需求分析     页面整体分为五部分：     第一部分，在任何情况
html一个盒子里文字会溢出,Web前端培训：CSS如何实现文本超出部分显示省略号...
weixin_34856548的博客
06-04 1131
当文本的内容超出容器的宽度的时候，我们希望在其默认添加省略号以达到提示用户内容省略显示的效果。我们观察如下效果,当文本超出一定宽度的以后,就显示省略号代替。实现文本超出部分显示省略号,我们可以分3步：1. 书写HTML结构2. CSS实现单行文字显示省略号3. CSS实现多行文字显示省略号一. 第一步 —— 书写HTML结构目标 :书写HTML结构,我用p标签包裹一定长度的文本内容小结 :在bod...
采用弹性盒子布局时候 内部有内容溢出时候应该注意的情况
ggbee_的博客
06-17 2973
问题描述：一共有两栏布局，一侧固定宽度，另外一侧自适应宽度；在采用弹性盒子布局时候，假如内部有一块区域有内容溢出的情况时候，如何仅仅使内部内容区域出现滚动条，而不是整个侧边整体出现滚动条？ 代码还原问题： 结构样式 <style> * { margin: 0; padding: 0; box-sizing: border-box; } .main {
pc端的弹性布局适配方案
weixin_30425949的博客
03-01 936
方案及原理：使用rem单位，通过window.onresize来监听浏览器窗口，获取窗口宽度，并改变跟字体大小来达到弹性适配效果。 function adaptor(){ //为了便于计算，这里以1920px为基准 let width = document.body.clientWidth ...
伸缩布局(flex布局)
sjs1766349405的博客
11-09 1086
一、flex布局简介 1.flex布局简介 我们首先选择的是一个大div里面嵌套四个小div，然后每个小div浮动，但是这种传统的布局方式首先在低版本浏览器上兼容性效果不是很好，另外在移动端的时候布局也会相对比较麻烦。 现在我们可以选用一种css3新出的布局方式：伸缩布局来实现上面的页面效果，简单快捷，缺点是pc端兼容性效果较差，所以建议在移动端放心使用，PC端IE11或更低版本不支持flex或仅支持部分 2.选择方式 1.如果是PC端页面,还是采用传统方式 2.如果是移动端或者是不考虑兼容
弹性伸缩盒布局也被称为
最新发布
05-29
弹性盒布局（Flexbox）是CSS3中一种全新的布局方式，也称为伸缩盒布局。它可以更加灵活地对容器中的元素进行排列，适应不同尺寸的屏幕和设备，并且可以方便地实现响应式布局。 弹性盒布局的主要特点是容器内的子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值