htmlCSS-----弹性布局

 目录

前言

什么是弹性布局

 样式

 学习概要

容器和项目

弹性布局的排列方式

1.横向排列（默认样式）

 2.父元素容器的属性（*5）

（1）主轴 

代码示例：

 （2）交叉轴

3.子元素项目的属性（*4）

前言

        前面我们学习了浮动布局方式，那么今天我们学习新的布局方式---弹性布局，这类布局方式可以使得我们的页面实现自适应或者按比例缩放的效果，不需要去一个个调整，那下面我们就一起去看看吧。

什么是弹性布局

传统布局基本依靠display float position来完成，有些特殊的布局写起来不太方便。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

        相较于浮动，弹性布局是属于文档流的，而浮动是属于脱离文档流的 

 样式

为父级元素添加 display: flex; 或者 display: inline-flex; 。其子元素则可按照弹性盒模型的规则进行布局。

 学习概要

1.什么是容器

2.什么是项目

3.什么是主轴

4.什么是交叉轴

下面我会按照以上的四个问题的方向一一去讲解说明弹性布局的特点和性质，搞懂了这四个问题基本上就理解了弹性布局了。

容器和项目

容器：是设定了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>.div{display: flex;width: 800px;height: 500px;border: 2px solid;}</style>
</head>
<body><!-- 这里div类是属于容器 --><div class="div"><!-- 这里的div1是div的子类是属于项目 --><div class="div1"><!-- 这里的div2是div1的子类，但不是项目 --><div class="div2"></div></div></div>
</body>
</html>

弹性布局的排列方式

父级为弹性盒模型时，子元素默认有一些特殊的展示方式。当然我们可以通过后面的学习知道如何改变这些展示方式。

1.横向排列（默认样式）

默认盒模型中，各子元素上下排列，弹性盒模型中，子元素默认按主轴从左到右横向排列。（可以通过属性改变主轴及主轴起点），这就是弹性布局的默认形式。

看代码示例：

<!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>.divall{width: 800px;height: 600px;border: 1px solid;display:flex;}.div{/* 注意 我把每一个子元素盒子的宽度设置为500px */width: 500px;height: 300px;}.div1{background-color: red;}.div2{background-color: blue;}.div3{background-color: aquamarine;}.div4{background-color: rosybrown;}.div5{background-color: rgb(127, 255, 142);}</style>
</head>
<body><!-- 弹性布局盒子 --><div class="divall"><div class="div1 div"></div><div class="div2 div"></div><div class="div3 div"></div><div class="div4 div"></div><div class="div5 div"></div></div>
</body>
</html>

效果展示：

 子元素总宽大于父级宽度，默认不换行，按比例缩放各个子元素的宽，上面我把每一个子元素盒子的宽度设置为500px，实际上整个父元素盒子的宽度只有800px，所以这里会按照1:1的形式进行一一缩放，直到宽度填满这个父元素盒子的宽度为止，这就是弹性布局的自适应特点。

 2.父元素容器的属性（*5）

（1）主轴 

flex-direction

flex-direction属性决定主轴的方向，默认为row，即水平方向，起点在左。

子项目按照主轴的方向从起点开始排列。

注意：主轴方向是只有一个的，主轴数量是可以多个的

  • row ，默认值，水平主轴，起点在左；

  • row-reverse，水平主轴，起点在右；

  • column，垂直主轴，起点在上；

  • column-reverse，垂直主轴，起点在下

flex-wrap

flex-wrap属性决定子元素主轴摆放不下的时候，项目换不换行，默认不换行。

  • none ，默认值，不换行；（摆放不下按比例缩放）

  • wrap，换行，第一排在最前；

  • wrap-reverse，换行，最后一排在最前。

justify-content

justify-content属性定义子元素在主轴的对齐方式。

  • flex-start，默认值，起点对齐；

  • flex-end，终点对齐；

  • center，居中

  • space-between，两端对齐，中间间隔分均分配；

  • space-around，所有间隔分均分配，即所有子元素拥有相同的左右(上下)间隔。

  • space-evenly 所有间隔平均分均

代码示例：

<!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>.divall{width: 800px;height: 500px;border: 1px solid;display:flex;/* 按x轴为主轴，默认 */flex-direction: row;/* 设置为所有间隔分均分配，即所有子元素拥有相同的左右(上下)间隔。 */justify-content: space-around;/* 如果子元素宽度大于父元素宽度进行换行 */flex-wrap: wrap;}.div{width: 250px;height: 300px;}.div1{background-color: red;}.div2{background-color: blue;}.div3{background-color: aquamarine;}.div4{background-color: rosybrown;}.div5{background-color: rgb(127, 255, 142);}</style>
</head>
<body><!-- 弹性布局盒子 --><div class="divall"><div class="div1 div"></div><div class="div2 div"></div><div class="div3 div"></div><div class="div4 div"></div><div class="div5 div"></div></div>
</body>
</html>

效果如下：

 以上的主轴是x轴所以会以x轴作为基准，如果子元素盒子的高度大于父元素的高度的话，那么就胡出现超出的情况。

 （2）交叉轴

align-items

align-items定义子元素在副轴的对齐方式。

  • flex-start，副轴起点对齐；

  • flex-end，副轴终点对齐；

  • center，副轴居中对齐；

  • baseline，文本基线对齐

  • stretch，默认值，子元素如果没有设置高度(宽度)，占满整个容器。（如果全部子元素都有设置高度值，则表现和flex-start一致。）

align-content

align-content属性定义多主轴之间（也就是换行后行与行之间）的对齐方式。所以，如果子元素没有换行，这个属性就不起作用。

  • flex-start，副轴起点对齐；

  • flex-end，副轴终点对齐；

  • center，副轴居中对齐；

  • space-between，副轴两端对齐，中间平均分配；

  • space-around，每行之间间距平均分配；

  • strecth，默认值，如果子元素没有设置高度，则占满对应主轴。（其余5个值中，没有设置高度的子元素和该行最高的高度一样）

  • space-evenly 所有间隔平均分均

3.子元素项目的属性（*4）

flex-basis

flex-basis属性定义在分配空间之前，子元素占据的主轴空间大小。默认值auto即元素本来的大小。

这里只接受一个值，这个值的大小是表示子元素盒子内容的大小，并不是宽度的大小。实际上这个样式一般不怎么用，我们一般会提前设置好宽度和高度

如图所示：

order

order属性定义子元素（视觉上）的展示顺序，值为一个数字，越小越优先摆放。如果没设置的话，默认是为0.

flex-shrink

flex-shrink属性用于规定 主轴空间不足时 子元素缩小的分配比例，默认为1，即分均分配来缩小。

计算方式： 

<style>*{ margin: 0; padding: 0;}.wrap{display: flex;width: 400px;height: 100px;margin: 20px auto;border: 1px solid red;font-size: 26px;font-weight: bolder;}.wrap .d1{width: 150px;background-color: #99cc99;flex-shrink: 1;}.wrap .d2{width: 200px;background-color: #f60; flex-shrink: 1;}.wrap .d3{width: 250px;background-color: #1da6ba; flex-shrink: 2;}
</style>
<div class="wrap"><div class="d1">1</div><div class="d2">2</div><div class="d3">3</div>
</div>

 

flex-grow

flex-grow属性用于规定 主轴有剩余空间时 子元素增大的分配比例，默认为0，即不增大。

<style>*{ margin: 0; padding: 0;}.wrap{display: flex;width: 400px;height: 100px;margin: 20px auto;border: 1px solid red;font-size: 26px;font-weight: bolder;}.wrap .d1{width: 50px;background-color: #99cc99;}.wrap .d2{width: 150px;flex-grow: 1;background-color: #f60;}.wrap .d3{width: 50px;flex-grow: 2;background-color: #1da6ba;}
</style>
<div class="wrap"><div class="d1">1</div><div class="d2">2</div><div class="d3">3</div>
</div>

 好了，以上就是今天的全部内容了，我们下一期再见！！！

分享一张壁纸：

樱花庄的宠物女孩_360百科

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/89881.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Stable Diffusion WebUI安装和使用教程(Windows)

Stable Diffusion WebUI安装和使用教程(Windows)

目录 下载Stable Diffusion WebUI运行安装程序&#xff0c;双击webui.bat界面启动插件安装&#xff08;github&#xff09;模型下载(有些需要魔法&#xff09;安装过程遇到的大坑总结参考的博客 整个过程坑巨多&#xff0c;我花了一个晚上的时间才全部搞定,本教程针对有编程基础…
阅读更多...
分布式系统监控zabbix安装部署及使用

分布式系统监控zabbix安装部署及使用

分布式系统监控zabbix安装部署及使用 一.zabbix监控 1.什么是zabbix zabbix&#xff1a;是一款开源免费的&#xff0c;自动化发现服务与网络设备的分布式监控&#xff0c;可以监视应用层服务并以web前端页面集中管理并展示。 2.zabbix功能 监控服务器cpu负载、服务器内存使…
阅读更多...
adb 通过wifi连接手机

adb 通过wifi连接手机

adb 通过wifi连接手机 1. 电脑通过USB线连接手机2. 手机开启USB调试模式&#xff0c;开启手机开发者模式3.手机开启USB调试模式 更多设置-》开发者选项-》USB调试4.点击Wi-Fi 高级设置&#xff0c;可以查看到手机Wi-Fi的IP地址&#xff0c;此IP地址adb命令后面的ip地址&#xf…
阅读更多...
2023年国赛数学建模思路 - 案例：ID3-决策树分类算法

2023年国赛数学建模思路 - 案例：ID3-决策树分类算法

文章目录 0 赛题思路1 算法介绍2 FP树表示法3 构建FP树4 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法&#xff0c;就是频繁模…
阅读更多...
消息队列（11） - 通信协议的设计

消息队列（11） - 通信协议的设计

目录 通信协议设计代码实现 通信协议设计 对于我们客户端与服务器之间的通信协议我们约定如下&#xff1a; 具体的协议设计: 之后我们传递的参数也是这些 关于 type其实是在描述当前这个请求 、 响应是在调用那个API 约定如下 对于channel ,是tcp链接中的一个逻辑上的链接,…
阅读更多...
液体神经网络：LNN是个啥概念？

液体神经网络：LNN是个啥概念？

一、说明 在在人工智能领域&#xff0c;神经网络已被证明是解决复杂问题的非常强大的工具。多年来&#xff0c;研究人员不断寻求创新方法来提高其性能并扩展其能力。其中一种方法是液体神经网络&#xff08;LNN&#xff09;的概念&#xff0c;这是一个利用动态计算功能的迷人框…
阅读更多...
IDEA如何调试Stream API

IDEA如何调试Stream API

Stream API现在在实际开发中应用非常广泛&#xff0c;经常会遇到需要调试Stream API的场景&#xff0c;这篇文章主要讲解如何使用IDEA调试Stream Testpublic void test(){Stream.of(10, 20, 30, 40, 50).mapToInt(e->e*10).filter(e->e>200).forEach(System.out::pri…
阅读更多...
笔记04：全局内存

笔记04：全局内存

一、CUDA内存模型概述 寄存器、共享内存、本地内存、常量内存、纹理内存和全局内存 一个核函数中的线程都有自己私有的本地内存。 一个线程块有自己的共享内存&#xff0c;对同一个线程块中所有的线程都可见&#xff0c;其内容持续线程块的整个生命周期。 所有线程都可以访问…
阅读更多...
12.Eclipse导入Javaweb项目

12.Eclipse导入Javaweb项目

同事复制一份他的项目给我ekp.rar (懒得从SVN上拉取代码了)放在workspace1目录下 新建一个文件夹 workspace2&#xff0c;Eclipse切换到workspace2工作空间 选择Import导入 选择导入的项目(这里是放到workspace1里面) 拷贝一份到workspace2里面 例子 所有不是在自己电脑上开发…
阅读更多...
搭建openGauss 5.0 一主一从复制集群

搭建openGauss 5.0 一主一从复制集群

openGauss是一款支持SQL2003标准语法&#xff0c;支持主备部署的高可用关系型国产数据库。 多种存储模式支持复合业务场景&#xff0c;新引入提供原地更新存储引擎。NUMA化数据结构支持高性能。Paxos一致性日志复制协议&#xff0c;主备模式&#xff0c;CRC校验支持高可用。支…
阅读更多...
数字孪生如何实现物理世界和数字世界之间的交互？

数字孪生如何实现物理世界和数字世界之间的交互？

在当今数字化时代&#xff0c;技术的飞速发展正在引领着各行各业的变革与创新。其中&#xff0c;数字孪生作为一项令人振奋的前沿技术&#xff0c;正在以惊人的方式实现着物理世界与数字世界的无缝交互。它不仅为企业带来了全新的商机&#xff0c;也为科学研究、生产制造等领域…
阅读更多...
打造企业或者个人IP引流法

打造企业或者个人IP引流法

打造企业或者个人IP引流法. 大家好&#xff0c;我是百收网SEO编辑&#xff1a;狂潮老师&#xff0c;今天给大家分享企业IP打造的方法 首先我们想让人知道你的企业叫什么&#xff0c;怎么找到你的企业 这个时候我们就需要去各大平台发布信息&#xff0c;客户想了解直接去搜索…
阅读更多...
php webshell 免杀入门

php webshell 免杀入门

webshell 查杀软件&#xff1a; d盾、安全狗、护卫神、Sangfor WebShellKill 在线查杀 百度WEBDIR https://scanner.baidu.com 河马 https://www.shellpub.com cloudwalker牧云 https://webshellchop.chaitin.cn 查杀技术 静态检测、动态检测、日志检查 静态检查&#xff1a…
阅读更多...
OceanBase 4.1.0 clog 目录探究

OceanBase 4.1.0 clog 目录探究

基于OceanBase 4.x 版本如何统计租户每日 clog 日志生成量的背景下&#xff0c;探究以及如何查看租户 clog 的使用情况。 作者&#xff1a;姜宇 爱可生 DBA 团队成员&#xff0c;擅长数据库故障排查和处理。对技术抱有热忱&#xff0c;实践是检验真理的唯一标准~ 本文来源&…
阅读更多...
高忆管理：爆仓是什么意思？

高忆管理：爆仓是什么意思？

爆仓是指在金融商场中&#xff0c;持有的某种资产价格大幅下跌&#xff0c;导致出资者的保证金不足以支持持仓&#xff0c;被逼平仓的现象。在股票、期货、外汇等商场中均或许呈现爆仓现象。在本文中&#xff0c;咱们将从多个视点分析爆仓的含义、原因和影响。 一、爆仓的含义 …
阅读更多...
Azure概念介绍

Azure概念介绍

云计算定义 云计算是一种使用网络进行存储和处理数据的计算方式。它通过将数据和应用程序存储在云端服务器上&#xff0c;使用户能够通过互联网访问和使用这些资源&#xff0c;而无需依赖于本地硬件和软件。 发展历史 云计算的概念最早可以追溯到20世纪60年代的时候&#x…
阅读更多...
IDEA创建项目常见问题

IDEA创建项目常见问题

1.IDEA修改maven路径无效 创建spring项目&#xff0c;Maven导入报错&#xff0c;无法正常导入jar报&#xff0c;发现setting中设置的maven路径不是自己下载的路径&#xff0c;修改后无效。运行之后maven路径又恢复为其默认的路径 解决方案&#xff1a; 删除.mvn文件&#xff0…
阅读更多...
Grafana监控 Redis Cluster

Grafana监控 Redis Cluster

Grafana监控 Redis Cluster 主要是使用grafana来实现监控&#xff0c;grafana可以对接多种数据源&#xff0c;在官网中可以找到Redis数据源&#xff0c;需要安装redis data source插件。当然也可以利用Prometheus来做数据源&#xff0c;下面分别记录一下这两种数据源的安装配置…
阅读更多...
SQL-每日一题【1251. 平均售价】

SQL-每日一题【1251. 平均售价】

题目 Table: Prices Table: UnitsSold 编写SQL查询以查找每种产品的平均售价。average_price 应该四舍五入到小数点后两位。 查询结果格式如下例所示&#xff1a; 解题思路 1.题目要求查询每种产品的平均售价。给出了两个表&#xff0c;我们用聚合查询来解决此问题。 2.首先我…
阅读更多...
免费AI学习文档（二）

免费AI学习文档（二）

国内绘画midjourney网站 http://aijiaolian.chat优质提示词分解教学 https://q3iylvv7qj.feishu.cn/docx/UGMzdPVGjo1fHcxu1kjcuXFcnff?fromfrom_copylink设计图AI实战&#xff0c;如何用AI提高83%的出图效率&#xff1f;https://q3iylvv7qj.feishu.cn/docx/Fsxxd3MncowFUix5…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023