flex布局

已于 2022-05-07 21:44:58 修改
阅读量142 收藏
点赞数
分类专栏： html css 文章标签： css css3 html
于 2022-05-06 22:35:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44808710/article/details/123595230
版权

文章目录

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>flex布局体验</title>
    <style>
        div {
            display: flex;
            width: 300px;
            height: 300px;
            background-color: pink;
            justify-content: space-around;
        }
        div span {
            width: 50px;
            /* 平分 */
            /* flex:1; */
            height: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

flex布局原理（给父盒子添加属性 控制子盒子）

  • 弹性布局，任何一个容器都可以指定为flex布局
  • 当设置flex时，子元素的的float clear vertical-align属性失效
  • 伸缩布局=弹性布局=伸缩盒布局=弹性布局=flex布局
  • 可以横向排列也可以竖向排列

flex布局父项常见属性

在这里插入图片描述

  • flex-direction
/*
	flex布局的主轴方向 
	column y轴
	column-reverse 从下到上
	row x轴
	row-reverse 从右到左
*/
flex-direction: column;
flex-direction: row;
  • justify-content 不影响顺序
/*
    flex-start 默认是从头部开始
    flex-end 从尾部开始排列
    center 在主轴居中对齐
    space-arround 平分剩余空间
    space-between 先两边贴 在平分剩余空间
*/
justify-content: space-between;
  • flex-wrap
/*
	默认子元素不换行 如果装不下会自动缩小盒子
	nowrap 不换行
	wrap 换行
*/
/* flex-wrap: nowrap; */
flex-wrap: wrap;
  • align-items 侧轴对齐方式
  • 只适合单行
/*
	flex-start 默认是从头部开始
	flex-end 从尾部开始排列
	center 挤在一起居中对齐
	strech 拉伸
*/
align-items: flex-start;
  • align-content 侧轴对齐方式
  • 只适合多行
/*
	flex-start 默认是从头部开始
	flex-end 从尾部开始排列
	center 挤在一起居中对齐
	space-arround 平分剩余空间
	space-between 先两边贴 在平分剩余空间
	strech 拉伸
*/
align-content: center ;
  • flex-flow 复合属性
flex-flow: row wrap;

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>flex布局子项的属性</title>
    <style>
        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color:pink;
        }
        p span {
            flex: 1;
        }
        p span:nth-child(2) {
            flex: 2;
            background-color: purple;
        }
    </style>
</head>
<body>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>   
</body>
</html>

在这里插入图片描述

  • align-self 控制子项自己在侧轴的排列方式
<!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>flex布局子项的属性</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color:pink;
            /* align-items: flex-end; */
        }
        section div {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            background-color: purple;
        }
        section div:last-child {
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section> 
</body>
</html>

在这里插入图片描述

  • 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>flex布局子项的属性</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color:pink;
            /* align-items: flex-end; */
        }
        section div {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            background-color: purple;
        }
        section div:last-child {
        	order: -1;
            align-self: flex-end;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section> 
</body>
</html>

在这里插入图片描述

SunACong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex布局
03-29
Flex布局，全称为Flexible Box，是W3C在2009年提出的一种新的网页布局方案，旨在解决传统CSS布局模式在处理复杂和动态内容时的局限性。它特别适用于移动设备上的H5页面和微信小程序等场景，能轻松实现各种复杂的页面...
Flex 布局教程
01-02
Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程 Flex 布局教程
flex布局实例DOM
01-15
Flex布局，全称为“Flexible Box”，也称作弹性盒布局，是CSS3中的一种布局模式，旨在提供一种更加高效、灵活的方式来对网页或应用程序中的容器内的子元素进行排列、对齐和分配空间。这种布局模式在响应式设计、...
flex布局实现上下固定中间滑动的布局方式
11-20
【标题】：“flex布局实现上下固定中间滑动的布局方式” 【内容详解】 在现代网页设计中，使用Flex布局能够方便地实现各种复杂的界面布局，其中包括一种常见的需求：上下固定，中间可滑动的布局。这种布局适用于...
flex布局分享.pptx
11-06
Flex布局是一种现代网页和应用程序设计中的布局模式，它允许开发者更灵活地控制元素在容器内的排列方式，解决了传统布局方式（如盒模型）在处理复杂布局时的诸多不便。Flex布局于2009年由W3C提出，现在已经得到了...
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1261
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
CSS学习笔记
ngczx的博客
07-23 634
CSS学习笔记
[css3] 如何设置边框颜色渐变
qq_14993591的博客
07-22 800
【代码】[css3] 如何设置边框颜色渐变。
CSS3 scale 适配
m0_54007573的博客
07-24 460
CSS3 scale 适配
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1004
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
Python爬虫技术 第13节 HTML和CSS选择器
hummhumm的专栏
07-25 899
在爬虫技术中，解析和提取网页数据是核心部分。HTML 和 CSS 选择器被广泛用于定位网页中的特定元素。下面将详细介绍这些选择器如何在 Python 中使用，特别是在使用像 Beautiful Soup 或 Scrapy 这样的库时。
前端开发知识(一)-html
modi000的博客
07-24 577
2.前端开发的三剑客：html、css、javascript。Element（饿了么开发的） ：前端组件库。Vue可以简化JavaScpript流程。Ngix：前端服务器。
qt练习控件label控件-lineEdit控件样例代码
07-30
qt练习控件label控件-lineEdit控件样例代码
【JCR一区级】麻雀搜索算法SSA-CNN-LSTM-Attention故障诊断分类预测【含源码 5689期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
详解MATLAB Simulink通信系统建模与仿真
07-30
第1 章 MATLAB 基础与通信系统仿真 1.1 MATLAB 简介 1.2 MATLAB 程序设计 1.3 通信系统仿真 第2 章 Simulink 仿真基础 2.1 Simulink 简介 2.2 Simulink 工作环境 2.3 Simulink 仿真的基本方法 2.4 创建自己的模块库 2.5 S-函数的编写 第3 章 通信信号与系统分析 3.1 离散信号和系统 3.2 Fourier 分析 3.3 带通信号的低通等效 3.4 随机信号分析 第4 章 信道 4.1 加性高斯白噪声信道 4.2 多径衰落信道 第5 章 模拟调制 5.1 幅度调制 5.2 角度调制 第6 章 数字基带传输 6.1 概述 6.2 二进制基带信号传输 6.3 基带PAM 信号传输 6.4 带限信道的信号传输 第7 章 数字信号载波传输 7.1 概述 7.2 载波幅度调制（PAM） 7.3 载波相位调制（PSK） 7.4 正交幅度调制（QAM） 7.5 载波频率调制（FSK） 第8 章 信道编码和交织 8.1 概述 8.2 线性分组码
SCI一区】淘金算法GRO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5642.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
2020年首届“洪泽湖杯”中国人工智能掼蛋算法大赛第8名我就是掼蛋.zip
07-30
毕业设计是高等教育阶段学生完成学业的一个重要环节，通常在学士或硕士学业即将结束时进行。这是学生将在整个学业中所学知识和技能应用到实际问题上的机会，旨在检验学生是否能够独立思考、解决问题，并展示其专业能力的一项综合性任务。 毕业设计的主要特点包括： 独立性： 毕业设计要求学生具备独立思考和解决问题的能力。学生需要选择一个合适的课题，研究相关文献，进行实地调查或实验，并提出独立见解。 实践性： 毕业设计是将理论知识应用到实际问题中的一次实践。通过完成毕业设计，学生能够将所学的专业知识转化为实际的解决方案，加深对专业领域的理解。 综合性： 毕业设计往往要求学生运用多个学科的知识，综合各种技能。这有助于培养学生的综合素养，提高他们的综合能力。 导师指导： 学生在毕业设计过程中通常由一名指导老师或导师团队提供指导和支持。导师负责引导学生确定研究方向、制定计划、提供建议，并在整个过程中监督进展。 学术规范： 毕业设计要求学生按照学术规范完成研究，包括文献综述、研究设计、数据采集与分析、结论和讨论等环节。学生需要撰写一篇完整的毕业论文，并进行答辩。
网络音乐搜索引擎，音乐搜索器 - 多站合一音乐搜索,音乐在线试听
最新发布
07-30
网络音乐搜索引擎，音乐搜索器 - 多站合一音乐搜索,音乐在线试听 效果截图https://www.diyiyuanma.cn/3444.html 多站合一音乐搜索解决方案，数据调用的是各网站的API接口， 有的接口并不是开放的，随时可能失效，本项目相关代码仅供参考。 网络音乐搜索引擎，音乐搜索器 - 多站合一音乐搜索,音乐在线试听
Flex布局完全指南：从入门到精通
"Flex布局教程" Flex布局是一种现代的、响应式的网页布局方式，由W3C在2009年提出，旨在简化复杂的传统布局模式，如基于盒模型的display属性、position属性和float属性的组合。随着浏览器对Flex布局的广泛支持，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值