跟着pink老师前端入门教程-day20

news2024/11/15 14:02:22

二、移动WEB开发之flex布局

1、flex 布局体验

1.1 传统布局与flex布局

传统布局：兼容性好、布局繁琐、局限性、不能再移动端很好的布局

flex弹性布局：操作方便，布局极为简单，移动端应用很广泛；PC 端浏览器支持情况较差；IE 11或更低版本，不支持或仅部分支持

建议：

1. 如果是PC端页面布局，我们还是传统布局。

2. 如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

1.2 初体验

2、flex 布局原理

2.1 布局原理

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

        当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

        伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

        体验中 div 就是 flex父容器。

        体验中 span 就是 子容器 flex项目

        子容器可以横向排列也可以纵向排列

总结flex布局原理： 就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

3、flex 布局父项常见属性

3.1 常见父项属性

以下由6个属性是对父元素设置的

flex-direction：设置主轴的方向

justify-content：设置主轴上的子元素排列方式

flex-wrap：设置子元素是否换行

align-content：设置侧轴上的子元素的排列方式（多行）

align-items：设置侧轴上的子元素排列方式（单行）

flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

3.2 flex-direction：设置主轴的方向

2.1 主轴与侧轴

在flex布局中，是分为主轴与侧轴两个方向，同样的叫法有：行和列、x轴与y轴

默认主轴方向：x轴方向，水平向右

默认侧轴方向：y轴方向，水平向下

2.2 属性值

flex-direction 属性决定主轴的方向（即项目的排列方向）

注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

    <title>flex-direction设置主轴的方向</title>
    <style>
        div {
            /* 给父级 添加flex属性 */
            display: flex;
            width: 80%;
            height: 300px;
            background-color: saddlebrown;
            /* 默认的主轴是x轴 行row，那么y轴是侧轴 */
            /* 元素是跟着主轴排列的 */
            /* flex-direction: row; */
            /* 翻转 */
            /* flex-direction: row-reverse; */
            /* 可以把主轴设置为y轴 那么x轴是侧轴 */
            flex-direction: column;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: salmon;
            margin-left: 5px;
        }
    </style>
</head>

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

★3.3 justify-content：设置主轴上的子元素排列方式 

justify-content 属性定义了项目在主轴上的对齐方式

注意： 使用这个属性之前一定要确定好主轴是哪个

    <title>justify-content：设置主轴上的子元素排列方式</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: saddlebrown;
            /* 默认主轴：x行 */
            flex-direction: row;
            /* justify-content：设置主轴上的子元素排列方式 */
            /* 默认值 从头部开始 如果主轴是x轴，则从左到右 */
            /* justify-content: flex-start; */
            /* 从尾部开始排列，顺序排列 */
            /* justify-content: flex-end; */
            /* 在主轴居中对齐（如果主轴是x轴则 水平居中） */
            /* justify-content: center; */
            /* 平分剩余空间 */
            /* justify-content: space-around; */
            /* 先两边贴边 再平分剩余空间（重要） */
            justify-content: space-between;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: salmon;
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

★3.4 flex-wrap：设置子元素是否换行

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。 

    <title>flex-wrap：设置子元素是否换行</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: saddlebrown;
            /* flex 布局中，默认的子元素是不换行的，
            如果装不开，会缩小字元素的宽度，放到父元素里面 */
            flex-wrap: wrap;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: salmon;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

★3.5 align-items：设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用

    <title>align-items：设置侧轴上的子元素排列方式（单行）</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: saddlebrown;
            /* 默认的主轴是x轴 row */
            justify-content: center;
            /* 需要一个侧轴居中 */
            align-items: center;
            /* 拉伸，子盒子不需要高度 */
            /* align-items: stretch; */
        }

        div span {
            width: 150px;
            /* height: 100px; */
            background-color: salmon;
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
    <title>align-items：设置侧轴上的子元素排列方式（单行）</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: saddlebrown;
            /* 默认的主轴是x轴 row */
            flex-direction: column;
            justify-content: center;
            /* 需要一个侧轴居中 */
            align-items: center;
            /* 拉伸，子盒子不需要高度 */
            /* align-items: stretch; */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: salmon;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

3.6 align-content：设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

    <title>align-content：设置侧轴上的子元素的排列方式（多行）</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: saddlebrown;
            /* 换行 */
            flex-wrap: wrap;
            /* 因为有了换行，此时侧轴上控制子元素的对齐方式 用align-content */
            /* align-content: flex-start; */
            /* align-content: center; */
            align-content: space-around;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: salmon;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
 3.7 align-content 和 align-items 区别

align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸

align-content 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值。

总结就是单行找 align-items 多行找 align-content

3.8 flex-flow

flex-flow 属性是 flex-direction（设置主轴） 和 flex-wrap（是否换行） 属性的复合属性

flex-flow:row wrap;

4、flex 布局子项常见属性

flex 子项目占的份数

align-self 控制子项自己在侧轴的排列方式

order属性定义子项的排列顺序（前后顺序）

★4.1 flex属性

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

.item {
        flex: <number>; /* default 0 */
} 
    <title>flex 属性</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: saddlebrown;
            margin: 0 auto;
        }

        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: salmon;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: seagreen;
        }

        section div:nth-child(2) {
            /* 左右固定，中间剩余空间分成一份全给第2个盒子 */
            flex: 1;
            background-color: sandybrown;
        }

        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: saddlebrown;
            margin: 100px auto;
        }

        p span {
            flex: 1;
            background-color: salmon;
        }

        p span:nth-child(2) {
            flex: 2;
            background-color: sandybrown;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span><span>2</span><span>3</span>
    </p>
</body>

4.2  align-self 控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

span:nth-child(2) {
        /* 设置自己在侧轴上的排列方式 */
        align-self: flex-end;
}

4.3 order 属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。

注意：和 z-index 不一样。

.item {
        order: <number>;
} 
    <title>order 属性定义项目的排列顺序</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: saddlebrown;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: salmon;
            margin: 5px;
        }

        div span:nth-child(2) {
            /* 默认是0 -1比0小 所以向前移 */
            order: -1;
        }
    </style>
</head>

<body>
    <div><span>1</span><span>2</span><span>3</span></div>
</body>

5、携程网首页案例制作

访问地址：m.ctrip.com

5.1  设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">

5.2  常用初始化样式

body {
        max-width: 540px;
        min-width: 320px;
        margin: 0 auto;
        font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
        color: #000;
        background: #f2f2f2;
        overflow-x: hidden;
        -webkit-tap-highlight-color: transparent;
}

 5.3 常见模块命名

11-携程移动端首页准备工作_哔哩哔哩_bilibili 

12-首页布局分析以及搜索模块布局_哔哩哔哩_bilibili

13-搜索模块user制作_哔哩哔哩_bilibili 

14-搜索模块制search制作_哔哩哔哩_bilibili 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

OJ_W的密码

OJ_W的密码

题干 c实现 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<map> #include<string> #include<vector> using namespace std;void Partition(string &str,vector<int> &vec1, vector<int>& vec2, vector<int…
阅读更多...
如何在Linux部署Yearning并结合cpolar实现公网访问内网管理界面

如何在Linux部署Yearning并结合cpolar实现公网访问内网管理界面

文章目录 前言1. Linux 部署Yearning2. 本地访问Yearning3. Linux 安装cpolar4. 配置Yearning公网访问地址5. 公网远程访问Yearning管理界面6. 固定Yearning公网地址 前言 Yearning 简单, 高效的MYSQL 审计平台 一款MYSQL SQL语句/查询审计工具&#xff0c;为DBA与开发人员使用…
阅读更多...
基于Vue的移动端UI框架整理

基于Vue的移动端UI框架整理

一、Vant 官方地址&#xff1a;https://youzan.github.io/vant/#/zh-CN/ 简介&#xff1a;有赞公司开发。 特性&#xff1a;60 高质量组件、90% 单元测试覆盖率、完善的中英文文档和示例、支持按需引入、支持主题定制、支持国际化、支持 TS、支持 SSR。 特别说明&#xff1…
阅读更多...
【大模型上下文长度扩展】FlashAttention-2：比1代加速1.29倍、GPU利用率从55%上升到72%

【大模型上下文长度扩展】FlashAttention-2：比1代加速1.29倍、GPU利用率从55%上升到72%

FlashAttention-2 提出背景FlashAttention-2 改进 前向传播和反向传播对比FlashAttention前向传播FlashAttention反向传播FlashAttention-2前向传播FlashAttention-2反向传播FlashAttention-2并行性线程束之间的工作分区 总结FlashAttentionFlashAttention-2 论文&#xff1a;h…
阅读更多...
YUM | 起源 | 发展 | 运行逻辑

YUM | 起源 | 发展 | 运行逻辑

介绍 YUM&#xff08;Yellowdog Updater, Modified&#xff09;起源于 Red Hat Linux 发行版 up2date 工具。 最初&#xff0c;up2date 是由 Red Hat 公司提供的用于管理系统更新的工具。然而&#xff0c;社区逐渐对 up2date 出现一些不满&#xff0c;主要是由于其使用体验和…
阅读更多...
跟着cherno手搓游戏引擎【21】shaderLibrary（shader管理类）

跟着cherno手搓游戏引擎【21】shaderLibrary（shader管理类）

前置&#xff1a; ytpch.h&#xff1a; #pragma once #include<iostream> #include<memory> #include<utility> #include<algorithm> #include<functional> #include<string> #include<vector> #include<unordered_map> #in…
阅读更多...
SpringBoot 过滤器Filter的过滤链 多个过滤器优先级

SpringBoot 过滤器Filter的过滤链 多个过滤器优先级

SpringBoot 过滤器Filter 拦截请求 生命周期 什么是过滤链&#xff1f; 指的是有多个过滤器形成的过滤链&#xff0c;一个项目中可以存在多个过滤器。 优先级 根据字母排序&#xff0c;如XFilter和AFilter&#xff0c;那么按照顺序应该先到AFilter过滤器当中
阅读更多...
2024/02/06

2024/02/06

画出TCP三次握手和四次挥手的示意图 三次握手 四次挥手 并且总结TCP和UDP的区别 TCP: TCP提供面向连接的&#xff0c;可靠的数据传输服务传输过程中&#xff0c;数据无误、数据无丢失、数据无失序、数据无重复 TCP会给每个数据包编上编号&#xff0c;该编号称之为序列号每个序…
阅读更多...
2、6作业

2、6作业

TCP和UDP的区别 TCP和UDP都是通信协议 TCP提供有连接的&#xff0c;稳定的&#xff0c;无误码无失真无乱序无丢失的通信 UDP提供无连接的&#xff0c;尽力的&#xff0c;可能误码可能乱序&#xff0c;可能丢失的通信 TCP每发一个数据包就需要对方回应一个应答包&#xff0c…
阅读更多...
Linux进程信号处理：深入理解与应用（3）

Linux进程信号处理：深入理解与应用（3）

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;its 6pm but I miss u already.—bbbluelee 0:01━━━━━━️&#x1f49f;──────── 3:18 &#x1f504; ◀️…
阅读更多...
编译原理与技术（三）——语法分析（二）自顶向下-递归下降

编译原理与技术（三）——语法分析（二）自顶向下-递归下降

一、语法分析的两种方法 自顶向下&#xff08;Top-down&#xff09;&#xff1a; 针对输入串&#xff0c;从文法的开始符号出发&#xff0c;尝试根据产生式规则推导&#xff08;derive&#xff09;出该输入串。 从根部开始构造语法树。 自底向上&#xff08;Bottom-up&#…
阅读更多...
双非本科准备秋招（18.1）—— 力扣二叉树

双非本科准备秋招（18.1）—— 力扣二叉树

1、404. 左叶子之和 方法一&#xff1a; 可以在父节点判断一下&#xff0c;如果左子树不为null&#xff0c;并且左子树没有左右子树&#xff0c;说明这是个左叶子节点。 class Solution {public int sumOfLeftLeaves(TreeNode root) {if(root null) return 0;int LV sumOfL…
阅读更多...
怎么把两段视频合成一个画面？教你4个合成方法

怎么把两段视频合成一个画面？教你4个合成方法

怎么把两段视频合成一个画面&#xff1f;在数字媒体时代&#xff0c;视频编辑已经成为一项必备技能。有时候&#xff0c;我们需要将两段或多段视频合并成一个画面&#xff0c;这在电影制作、自媒体内容创作、家庭相册制作等领域都有广泛应用。本文将为你介绍四种简单易行的方法…
阅读更多...
挑战杯 python+opencv+机器学习车牌识别

挑战杯 python+opencv+机器学习车牌识别

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于机器学习的车牌识别系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;4分工作量&#xff1a;4分创新点&#xff1a;3分 该项目较为新颖&#xff0c;适…
阅读更多...
PyTorch的10个基本张量操作

PyTorch的10个基本张量操作

PyTorch是一个基于python的科学计算包。它的灵活性允许轻松集成新的数据类型和算法&#xff0c;并且框架也是高效和可扩展的&#xff0c;下面我们将介绍一些Pytorch的基本张量操作。 Tensors 张量Tensors是一个向量&#xff0c;矩阵或任何n维数组。这是深度学习的基本数据结构…
阅读更多...
企业计算机服务器中了halo勒索病毒如何解密，halo勒索病毒数据恢复

企业计算机服务器中了halo勒索病毒如何解密，halo勒索病毒数据恢复

对于众多的企业来说&#xff0c;数据是一个企业的发展的根基&#xff0c;通过数据可以更好地规划调整企业的发展方向&#xff0c;提高企业生产效率。但网络是一把双刃剑&#xff0c;网络技术的发展不仅会为企业带来极大便利&#xff0c;但也为企业数据安全带来严重威胁。近期&a…
阅读更多...
谈谈BlueFS

谈谈BlueFS

目录 前言数据结构标识一个文件文件系统的全局记录事务记录超级块 启动流程磁盘管理读写流程创建文件流程为文件写数据把数据下刷到磁盘读流程 参考资料 前言 BlueFS具体是个什么东西呢&#xff1f; 如上图&#xff0c;在Ceph里&#xff0c;使用BlueStore作为默认的存储引擎。…
阅读更多...
LLM（大语言模型）——大模型简介

LLM（大语言模型）——大模型简介

目录 概述 发展历程 大语言模型的概念 LLM的应用和影响 大模型的能力、特点 大模型的能力 涌现能力&#xff08;energent abilities&#xff09; 作为基座模型支持多元应用的能力 支持对话作为统一入口的能力 大模型的特点 常见大模型 闭源LLM&#xff08;未公开源…
阅读更多...
datax离线同步oracle表到clickhouse实践1

datax离线同步oracle表到clickhouse实践1

时间&#xff1a;2024.01 目录1、安装启动 oracle19c 容器 2、rpm包安装clickhouse 3、datax安装 4、datax同步 目标库根据要同步的表&#xff0c;按照clickhouse建表规范建表 编写json文件 编写增量同步shell脚本&#xff0c;加入 crond 定时任务 1、安装启动 oracle19c 容器…
阅读更多...
关于如何在Mac上安装Windows，看这篇文章就差不多了

关于如何在Mac上安装Windows，看这篇文章就差不多了

启动转换（Boot Camp）助手可以让你在一些Mac电脑上安装Windows并引导到其中，就像在普通电脑上一样。现代苹果硅型号（M1、M2等）不支持启动转换助手，必须使用其他方法来运行Windows。 可以在M1或M2 Mac上使用启动转换助手吗 只有当Mac上有Intel（x86）处理器时，才能使用启…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023