flex上中下布局

最新推荐文章于 2024-04-18 16:38:13 发布
置顶 最新推荐文章于 2024-04-18 16:38:13 发布
阅读量3.5k 收藏
点赞数
分类专栏： 前端 文章标签： flex html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014207062/article/details/115210629
版权

这里写自定义目录标题

flex上中下布局

flex布局简单样例。

经典的上中下三段布局

flex

上代码

<!DOCTYPE html>
<!-- 

  上中下三段式布局
 -->

<html>
  <body class="box" style="margin: 0; height: 100vh">
    <div class="row" style="border: 1px solid rgb(140, 181, 214)">
      春眠不觉晓<br />
      春眠不觉晓<br />
      春眠不觉晓<br />
      春眠不觉晓<br />
      春眠不觉晓<br />
      春眠不觉晓<br />
      春眠不觉晓
最低0.47元/天 解锁文章
香草天空v
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
弹性布局：flex布局详述
m0_59812088的博客
12-13 537
Ø 基于Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。使用flex属性修改弹性盒子伸缩比：flex 给弹性盒子添加。： 控制某个弹性盒子在侧轴的对齐方式（父元素添加display: flex。Ø Flex布局非常适合结构化布局。，子元素可以自动的挤压或拉伸。Ø 是一种浏览器提倡的布局模型。注意: 只占用父盒子剩余尺寸。Ø 布局网页更简单、灵活。
flex布局详细介绍以及盒子上下左右居中对齐实例
m0_52743009的博客
09-29 7606
flex布局详细介绍以及盒子上下左右居中对齐实例
Flex布局详解
最新发布
~~~的博客
04-18 632
可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等于strech。它的默认值为auto，即项目的本来大小。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为 0 1 auto后两个属性可选。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex实现上中下布局
热门推荐
qq_39851888的博客
04-20 1万+
上中下、上下布局是我们网页开发中常用的布局，下面我将用flex实现这两种布局。 上中下布局 特点： 头尾固定，内容自适应 思路： 整个盒子为layout，使用flex纵向排列，宽高为100%；header和footer均为flex-shrink: 0;，强制不缩放。main的flex-grow: 2;，默认放大，且自动滚动。经过以上操作，就实现了经典是上中下布局。 布局 <div id="layout"> <header id="header">这里是头部</heade
经典布局（flex和传统两种实现）—上中下一栏式
jiaojsun的博客
06-19 3029
1.传统方式 简言之：就是按照每个块元素占一行的方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ ...
Flex布局
zsq520520_的博客
09-24 371
在上述代码中，我们创建了一个Flex容器 ，内部包含三个Flex项目 。容器的样式设置为Flex布局，主轴方向为水平方向（），并居中对齐（和）。每个项目的样式设置为均分剩余空间（），并设置了一些简单的样式用于展示效果。通过浏览器执行上述代码如下图：我们使用标签来代替HTML中的标签，因为在微信小程序中，视图容器使用标签。接下来，对应的WXSS样式如下：在微信小程序中，我们使用WXSS来定义样式。和前面提到的HTML代码类似，我们使用了来表示容器，来表示项目。样式属性基本保持一致，只是对单位进行了适当的改变
flex布局实现上下固定中间滑动的布局方式
11-20
本文主要介绍了flex布局实现上下固定中间滑动的布局方式，分享给大家，具体如下: 例如这样的一个页面，希望有个头图，有个底部的底栏，中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部，中间部分可滑动...
详解CSS中的flex布局
01-19
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局 声明弹性盒子的几种方式 就像前面说的，所有容器都可以指定为flex布局 .box{ display:flex;} 行内元素也可以使用： display:inline-flex; 改变弹性...
详解flex实现左右布局中按钮溢出隐藏效果
09-22
主要介绍了详解flex实现左右布局中按钮溢出隐藏效果的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
深入理解Flex布局以及计算
02-25
在任何流动的方向上(包括上下左右)都能进行良好的布局可以以逆序或者以任意顺序排列布局可以线性的沿着主轴一字排开或者沿着侧轴换行排列可以弹性的在任意的容器中伸缩大小（今天重点研究的主题）可以使子元素们在...
flex布局PPT
03-14
新一代css布局——flex布局，不用再为定位，浮动而烦恼，flex一招即可搞定。
css3-flex块级元素弹性布局
muzidigbig的博客
06-06 5545
Flexbox 是 flexible box 的简称（意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大...
flex布局
qq_48094361的博客
06-24 668
无
前端页面布局之【Flex布局】详解
商务合作/软件定制/学习交流
10-09 737
前端页面布局之【Flex布局】详解
Flex布局应用典型案例
wind的博客
12-30 1115
1.左右两侧宽度100px固定，中间宽度根据屏幕宽度自适应 实现： <div class="main"> <div class="box1"> 左侧 </div> <div class="box2"> 中间 </div> <div class="box3"> 右侧 &l
flex 上下固定中间滚动布局
mrzhangdulin的博客
04-21 534
flex上下固定中间滚动布局 传统 pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容，而移动web开发中，由于浏览器厂商的系统不同、版本不同，导致有部分机型不支持对弹性滚动，从而在开发中制造了所谓的 BUG。 上图如果在PC端中，我们可以利用 position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果，而...
flex布局，换行的元素上下设置间距
qq_37635012的博客
12-12 3808
2） 设置需要更改间距的元素（li）的margin-bottom：14px;然后使用结构伪类选择器设置最后的几个元素margin-bottom: 0;1）设置需要更改间距的元素（li）的margin-bottom:14px,然后用父容器（ul）的margin-bottom: -14px;当我们使用弹性盒子布局后，默认元素是没有外边距的，紧挨着样式就有点丑，如果想使换行后，元素的外边距有个距离，可以用如下方法解决。
flex弹性布局上中下
09-14
在Flex弹性布局中，可以通过以下方式实现上中下的排列： 1. 使用flex容器：将要显示的内容包裹在一个具有flex属性的父容器中。设置父容器的display为flex，这样子元素就可以按照弹性布局进行排列。 2. 上中下排列方式：使用flex-direction属性来定义子元素的排列方向。要实现上中下的排列，可以将flex-direction设置为column。 3. 上部元素：为上部元素设置相应的flex属性，可以通过设置flex-grow、flex-shrink和flex-basis来控制元素的伸缩性。比如设置flex: 1，表示该元素会根据可用空间进行扩展或收缩。 4. 中部元素：为中部元素设置相应的flex属性，也可以使用align-self属性来控制元素在交叉轴上的对齐方式。比如设置align-self: center，表示元素在交叉轴上居中对齐。 5. 下部元素：同样地，为下部元素设置相应的flex属性，并根据需求调整伸缩性和对齐方式。 以下是一个示例代码： ```html <div class="flex-container"> <div class="item">上部</div> <div class="item">中部</div> <div class="item">下部</div> </div> ``` ```css .flex-container { display: flex; flex-direction: column; height: 100vh; /* 设置父容器的高度，以便撑开页面 */ } .item { flex: 1; /* 上部和下部元素会平分剩余的空间 */ display: flex; align-items: center; justify-content: center; } ``` 通过以上方式，你可以实现一个基本的上中下排列的Flex弹性布局。根据实际需求可以进一步调整样式和布局。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值