前端笔记（四）Flex 布局

标准流

标准流也叫文档流，指的是标签在页面中默认的派不规则，例如：块元素独占一行，行内元素可以一行显示多个。

但是很多的网页布局都是块元素在一行中显示的，这时候就需要浮动和 Flex 布局，浮动只需要了解即可

浮动

可以让块元素水平排列
给块元素加上 float属性可以使得块元素往左边或者往右边浮动，使得两个块元素可以出现在一行里面。
浮动后的格子会脱离标准流的控制，不再占用标准流的范围。

浮动-产品区域布局

image.png

<!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>
        * {
            margin: 0;
            height: 0;
        }
        li {
            list-style: none;
        }
        .product {
            width: 1226px;
            height: 628px;
            background-color: greenyellow;
            margin: 50px auto;
        }
        .left {
            width: 234px;
            height: 628px;
            background-color: aqua;
            float: left;
        }
        .right {
            width: 978px;
            height: 628px;
            background-color: grey;
            float: right;
        }
        .right > li {
            width: 234px;
            height: 300px;
            margin-right: 14px;
            margin-bottom: 14px;
            background-color: orange;
            float: left;
        }
        .right > li:nth-child(4n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="product">
        <div class="left"></div>
        <div class="right">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </div>
    </div>
</body>
</html>

清除浮动

浮动元素脱标的情况，如果父级没有高度，子级无法撑开父级的高度（可能导致页面布局的错乱 ）
方法一：额外标签法

  • 在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear:both

方法二：单伪元素法

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

方法三：双伪元素法

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear:both;
}

代码解释：
.clearfix::before 和 .clearfix::after：分别使用伪元素 ::before 和 ::after。
content: "";：添加了一个空内容，这样伪元素才能生效并占据空间。
display: table;：将伪元素的 display 属性设置为 table，使其表现得像一个表格元素。
.clearfix::after：在第二个伪元素后，应用了 clear: both;，使其清除浮动。
方法四：overflow

  • 父元素添加属性：overflow:hidden

Flex 布局

Flex 布局又叫弹性布局，它使用 flexbox 使得容器有了弹性，更加适应设备的不同宽度，而不用再去依赖传统的块状布局和浮动定位，作为在 CSS3 中新增的规范，目前大部分的主流浏览器已经支持，是浏览器提倡的布局方式，
非常适合结构化布局，提供了空间分布和对其能力，它不会有浮动布局中的脱标、坍塌等现象，布局网页更简单更灵活。

Flex - 组成

设置方式：给父元素设置 display:flex，子元素可以自动挤压或者拉伸
组成部分：

  • 弹性容器：父级容器
  • 弹性盒子：当父级容器设置为 display:flex 的时候，子级自动变为 flexbox（弹性盒子）。
  • 主轴：默认在水平方向，是子级弹性盒子排列的轴，所以一开始设置的时候弹性盒子默认是水平排列的。
  • 侧轴 / 交叉轴：默在垂直方向，后面可以根据需要改变主轴和侧轴。

示意图：
image.png

Flex - 布局属性

这里展示一些 flex 布局有关的属性，后面会进行详细的讲解

属性描述
display: flex创建 flex 容器
justify-content主轴对齐方式
align-items侧轴对齐方式
align-self修改某个盒子的侧轴对齐方式
flex-direction修改主轴方向
flex弹性伸缩比
flex-wrap弹性盒子换行
align-content行对齐方式

主轴对齐方式(justify-content)

属性名：justify-content
可以改变主轴上的对齐方式

属性值效果
flex-start默认值，弹性盒子从起点依次排列
flex-end盒子从终点开始依次排列
center弹性盒子从主轴居中排列
space-between弹性盒子沿主轴均匀排列，空白间距在盒子中间
space-around弹性盒子沿主轴均匀排列，空白间距在盒子两侧
space-evenly弹性盒子演主轴均匀排列，弹性盒子与容器之间间距相等

需要重点关注的是后面的几个，这里先来演示一下 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>
        div {
            /* 设置 flex 布局 */
            display: flex;
            width: 500px;
            background-color: yellow;
    		// justify-content: space-evenly;
            justify-content: space-around;
            
        }
        li {
            list-style: none;
            width: 30px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </div>
</body>
</html>

around
image.png
evenly
image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        display: flex;
        /* justify-content: center;
        justify-content: space-around;
        justify-content: space-between; */
        justify-content: space-evenly;
        height: 300px;
        border: solid 2px black;
    }
    .box div {
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
</style>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

侧轴对齐方式(align-items / align-self)

属性名
align-items：当前弹性容器内所有盒子的侧轴对齐方式
align-self：单独控制某个弹性盒子的侧轴对齐方式
这两个属性值是相同的，只不过 align-self 属性是设置在子级的

属性值效果
stretch盒子沿侧轴被拉伸到铺满整个容器，如果没有设置盒子在侧轴方向尺寸则会默认拉伸
center弹性盒子沿侧轴居中排列
flex-start弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列

这里就不具体演示了，效果和描述的一样

<!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>
    .box {
        display: flex;
        justify-content: space-evenly;
        height: 300px;
        align-items: flex-end;
    }
    .box div {
        width: 200px;
        height: 200px;
        background-color: yellow;
    }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

image.png
可以清晰的看到是从底部开始排列的

修改主轴方向（flex-direction）

主轴就是弹性盒子排列的轴，我们可以通过设置主轴方向来做到水平排列和数值排列

属性名：flex-direction

属性值效果
row水平方向，从左到右
column竖直方向，从上到下
row-reverse水平方向，从右到左
column-reverse垂直方向，从下到上

只需要记忆垂直方向从上向下的 column 即可，这时候主轴的方向就变为垂直了

<!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: 300px;
            height: 600px;
            background-color: blue;
        }
        div li {
            list-style: none;
            width: 90px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <li></li>
        <li></li>
        <li></li>
    </div>
</body>
</html>

看这段代码主轴是横轴，页面效果是这样的：
image.png
这时候我们加上 flex-direction:column 属性：
image.png主轴就变为竖直方向了。

弹性伸缩比

可以用来控制弹性盒子在主轴方向的尺寸，比如主轴为水平方向控制的就是这个盒子的宽度。
属性名：flex
属性值：整数数字，表示占用父级剩余尺寸的份数
默认的情况下每一个盒子是占一份的，剩余尺寸是原本的尺寸减去

内容宽度和高度： Flex 项目的内容决定了其在主轴上的大小。比如，文字、图像或者内部元素的宽度和高度。
盒子模型属性： padding、border、margin 等属性也会影响 Flex 项目在主轴方向上的实际大小。
设置的宽度和高度属性： 如果明确设置了 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: 300px;
            height: 150px;
            background-color: blue;
            justify-content: space-between;
        }
        div li:nth-child(1) {
            flex: 2;
            margin: 10px;
            list-style: none;
            width: 90px;
            height: 100px;
            background-color: yellow;
        }
        div li:nth-child(2) {
            flex: 1;
            margin: 10px;
            list-style: none;
            width: 90px;
            height: 100px;
            background-color: yellow;
        }
        div li:nth-child(3) {
            flex: 1;
            margin: 10px;
            list-style: none;
            width: 90px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <li></li>
        <li></li>
        <li></li>
    </div>
</body>
</html>

image.png

弹性换行

弹性盒子会自动挤压和拉伸，默认情况下，所有的盒子都在一行显示，如果盒子的宽度过大会被挤压到适合的大小
属性名：flex-wrap

属性值效果
wrap换行
nowarp不换行（默认情况）
<!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>
        .flex-container {
        display: flex;
        flex-wrap: wrap; /* 设置项目换行 */
        width: 300px; /* 设置容器宽度 */
        border: 2px solid #ccc;
        }

        .flex-item {
        width: 80px;
        height: 80px;
        background-color: #f0f0f0;
        margin: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        }

    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
      </div>
      
</body>
</html>

显示效果：
image.png

行对齐方式

可以控制每行之间的对齐方式，需要设施flex-wrap: wrap
属性名：align-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>
    .flex-container {
        display: flex;
        flex-wrap: wrap;
        height: 300px; /* 设置容器高度 */
        width: 300px;
        align-content: space-between; /* 设置轴线分布方式 */
        border: 2px solid #ccc;
    }

    .flex-item {
        width: 80px;
        height: 80px;
        background-color: #f0f0f0;
        margin: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
      </div>      
</body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

地址栏不安全提示

地址栏不安全提示

在使用浏览器时访问网站的时候&#xff0c;我们可能会遇到地址栏提示不安全的情况。这种情况通常都是是由于未安装有效SSL证书或者网站SSL证书过期等原因导致的。本文将介绍如何处理地址栏提示不安全的问题&#xff0c;以确保我们的上网安全。 1&#xff0c;缺少SSL证书&#x…
阅读更多...
基于Java SSM框架实现超市进销存购物商城管理系统项目【项目源码+论文说明】

基于Java SSM框架实现超市进销存购物商城管理系统项目【项目源码+论文说明】

基于java的SSM框架实现超市进销存购物商城管理系统演示 摘要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;社区生活超市管理系统当然也不能排除在外。社区生活超市管理系统…
阅读更多...
TQ2440开发板-按键驱动程序设计

TQ2440开发板-按键驱动程序设计

目录 按键测试底板原理图核心板原理图使用轮询方式设计按键程序 按键测试底板原理图 TQ2440开发板有4个用户可编程按键&#xff0c;它们直接与CPU的GPIO相连&#xff0c;低电平触发中断&#xff0c;资源占用如下图所示&#xff1a; 核心板原理图 使用轮询方式设计按键程序 按…
阅读更多...
使用FFMPEG转码，转单声道，转标准WAV，转PCM

使用FFMPEG转码，转单声道，转标准WAV，转PCM

本文为使用FFMPEG命令行的方式处理音频&#xff0c;来获取想要得到的音频文件。 零、使用命令行查看编码封装信息 格式&#xff1a;ffprobe.exe -show_format inputfile 例子&#xff1a;ffprobe.exe -show_format .\stereo_44_16bit.wav 运行结果为下图&#xff1a; 如图可…
阅读更多...
HNU计算机结构体系-实验2：CPU动态指令调度Tomasulo

HNU计算机结构体系-实验2：CPU动态指令调度Tomasulo

文章目录 实验2 CPU动态指令调度Tomasulo一、实验目的二、实验说明三、实验内容问题1&#xff1a;问题2&#xff1a;问题3&#xff1a;问题4&#xff1a;问题5&#xff1a; 四、思考题问题1&#xff1a;问题2&#xff1a; 五、实验总结 实验2 CPU动态指令调度Tomasulo 一、实验…
阅读更多...
前端canvas的基础使用

前端canvas的基础使用

一、介绍 前端中的 Canvas 是一种用于在网页上绘制图形的 HTML 元素。它提供了一个可以通过 JavaScript 进行绘制的 2D 绘图环境。使用 Canvas&#xff0c;您可以绘制图形&#xff0c;包括线条、矩形、圆形、文本和图像。Canvas 为开发人员提供了灵活自由的绘图能力&#xff0…
阅读更多...
FlexRay总线信号译码

FlexRay总线信号译码

我们用虹科Pico汽车示波器捕捉了FlexRay总线信号 &#xff0c;一定要用专用的高速探头&#xff0c;不能用基本的BNC测试线来测。因为FlexRay的传输信号太快&#xff0c;用基本的BNC测试线来测&#xff0c;信号会失真严重。 专用的高速探头有TA499&#xff0c;如下图&#xff1a…
阅读更多...
Vue3-01-创建项目

Vue3-01-创建项目

环境准备 1.需要用到 16.0 以及更高版本的 node.js 2.使用vscode编辑器进行项目开发可以在命令行中查看node的版本号: node -v创建项目 1.准备一个目录 例如&#xff0c;我创建项目的时候是在该目录下进行的;D:\projectsTest\vue3project2.执行创建命令&#xff08;*&#x…
阅读更多...
Nacos 基础篇：Nacos简介、基本概念、基本架构、Standalone单机搭建部署

Nacos 基础篇：Nacos简介、基本概念、基本架构、Standalone单机搭建部署

文章目录 什么是Nacos基本架构逻辑架构及其组件介绍领域模型数据模型服务领域模型配置领域模型 下载目录结构配置启动 什么是Nacos Nacos&#xff1a;(Dynamic) Naming and Configuration Service&#xff0c;动态的服务发现和配置的服务&#xff0c;是一个更易于构建云原生应…
阅读更多...
Qt/C++音视频开发58-逐帧播放/上一帧下一帧/切换播放进度/实时解码

Qt/C++音视频开发58-逐帧播放/上一帧下一帧/切换播放进度/实时解码

一、前言 逐帧播放是近期增加的功能&#xff0c;之前也一直思考过这个功能该如何实现&#xff0c;对于mdk/qtav等内核组件&#xff0c;可以直接用该组件提供的接口实现即可&#xff0c;而对于ffmpeg&#xff0c;需要自己处理&#xff0c;如果有缓存的数据的话&#xff0c;可以…
阅读更多...
Linux（17）：认识与分析登录档

Linux（17）：认识与分析登录档

什么是登录档 【详细而确实的分析以及备份系统的登录文件】是一个系统管理员应该要进行的任务之一。 登录档 就是记录系统活动信息的几个文件&#xff0c;例如&#xff1a;何时、何地(来源IP)、何人(什么服务名称)、做了什么动作(讯息登录啰)。 换句话说就是&#xff1a;记录系…
阅读更多...
设置网络发现，合理利用共享，让自己在准确的地方出现或隐藏

设置网络发现，合理利用共享，让自己在准确的地方出现或隐藏

本文介绍如何在Windows 11中打开或关闭网络发现。它还解释了网络发现的用途以及你可能想使用&#xff08;或不使用&#xff09;它的时间。 如何在Windows 11中切换网络发现 可以在“设置”中打开和关闭网络发现。 1、使用WINI快捷方式打开“设置”或从任务栏中搜索。 2、选…
阅读更多...
CAS-ESM设置起始时间不起作用的原因

CAS-ESM设置起始时间不起作用的原因

问题描述&#xff1a; 今天在运行CAS-ESM2.0的时候出现了一个怪事&#xff0c;不论我怎么修改start_ymd&#xff0c;模式总是从1850年&#xff0c;1851 年开始跑。 解决方法&#xff1a; 修改start_type为startup&#xff0c;初始积分。 原因解释&#xff1a; CAS-ESM2.0代码…
阅读更多...
Rust的From与Into Trait

Rust的From与Into Trait

Into的本质是调用了From Trait 的方法。 From是底层的方法&#xff0c;把From实现了&#xff0c;Into的实现&#xff0c;编译器会自动根据From Trait生成Into Trait的代码 编译器自动类型推导出Into Trait的U的类型&#xff0c;调用了U类型的From的方法&#xff0c;实现其他类…
阅读更多...
JavaSE基础50题：18. 写一个递归方法，输入一个非负整数，返回组成它的数字之和。例如：输入1729，则应该返回1+7+2+9，它的和是19

JavaSE基础50题：18. 写一个递归方法，输入一个非负整数，返回组成它的数字之和。例如：输入1729，则应该返回1+7+2+9，它的和是19

概述 写一个递归方法&#xff0c;输入一个非负整数&#xff0c;返回组成它的数字之和。例如&#xff1a;输入1729&#xff0c;则应该返回1729&#xff0c;它的和是19。 代码 public class P18 {public static int func(int n) {if (n < 10) {return n;}return n%10 func…
阅读更多...
[gRPC实现go调用go]

[gRPC实现go调用go]

1什么是RPC RPC&#xff1a;Remote Procedure Call&#xff0c;远程过程调用。简单来说就是两个进程之间的数据交互。正常服务端的接口服务是提供给用户端(在Web开发中就是浏览器)或者自身调用的&#xff0c;也就是本地过程调用。和本地过程调用相对的就是&#xff1a;假如两个…
阅读更多...
使用Pytorch实现变分自编码器

使用Pytorch实现变分自编码器

使用Pytorch实现变分自编码器 可以结合这篇VAE讲解文章阅读这篇blog post代码。 # Import necessary packages. import os import torch import torch.nn as nn import torch.nn.functional as F import torchvision from torchvision import transforms from torchvision.ut…
阅读更多...
微信小程序引入vant-weapp爬出坑

微信小程序引入vant-weapp爬出坑

最新的微信小程序的项目结构跟之前的不一样&#xff0c;然后&#xff0c;按照vant-weapp上的官方文档&#xff0c;安装步骤失败&#xff0c;提示了各种错误。如果你的微信小程序结构跟我的一致&#xff0c;可以采用和我一样的方案。 微信小程序引入vant-weapp爬出坑 移动pack…
阅读更多...
基于redisson实现发布订阅（多服务间用避坑）

基于redisson实现发布订阅（多服务间用避坑）

前言 今天要分享的是基于Redisson实现信息发布与订阅&#xff08;以前分享过直接基于redis的实现&#xff09;&#xff0c;如果你是在多服务间基于redisson做信息传递&#xff0c;并且有服务压根就收不到信息&#xff0c;那你一定要看完。 今天其实重点是避坑&#xff0…
阅读更多...
TINA-TI —— 电路仿真

TINA-TI —— 电路仿真

文章目录 1. 安装2. 1. 安装 Tina-TI 官网下载链接&#xff1a;https://www.ti.com.cn/tool/cn/TINA-TI注册登陆&#xff0c;选择简体中文版下载&#xff1b; 下载完成后&#xff0c;直接安装&#xff1b; 2.
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站