day06-Flex布局

Flex布局

目标：熟练使用 Flex 完成结构化布局

01-标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。
在这里插入图片描述

02-浮动

基本使用

作用：让块元素水平排列。

属性名：float

属性值

  • left：左对齐
  • right：右对齐
<style>
  /* 特点：顶对齐；具备行内块显示模式特点；浮动的盒子会脱标 */
  .one {
    width: 100px;
    height: 100px;
    background-color: brown;

    float: left;
  }

  .two {
    width: 200px;
    height: 200px;
    background-color: orange;

    /* float: left; */

    float: right;
  }
</style>

<div class="one">one</div>
<div class="two">two</div>

特点：

  • 浮动后的盒子顶对齐
  • 浮动后的盒子具备行内块特点
  • 浮动后的盒子脱标，不占用标准流的位置

产品区域布局

在这里插入图片描述

HTML标签
<!-- 版心：左右，右面：8个产品 → 8个 li -->
<div class="product">
  <div class="left"></div>
  <div class="right">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>
CSS样式
<style>
  * {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  .product {
    margin: 50px auto;
    width: 1226px;
    height: 628px;
    background-color: pink;
  }

  .left {
    float: left;
    width: 234px;
    height: 628px;
    background-color: skyblue;
  }

  .right {
    float: right;
    width: 978px;
    height: 628px;
    background-color: brown;
  }

  .right li {
    float: left;
    margin-right: 14px;
    margin-bottom: 14px;
    width: 234px;
    height: 300px;
    background-color: orange;
  }

  /* 第四个li和第八个li 去掉右侧的margin */
  .right li:nth-child(4n) {
    margin-right: 0;
  }

  /* 细节：如果父级宽度不够，浮动的盒子会掉下来 */
</style>

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

场景搭建

在这里插入图片描述

<style>
  .top {
    margin: 10px auto;
    width: 1200px;
    /* height: 300px; */
    background-color: pink;
  }

  .left {
    float: left;
    width: 200px;
    height: 300px;
    background-color: skyblue;
  }

  .right {
    float: right;
    width: 950px;
    height: 300px;
    background-color: orange;
  }

  .bottom {
    height: 100px;
    background-color: brown;
  }

</style>

<div class="top">
  <div class="left"></div>
  <div class="right"></div>
</div>
<div class="bottom"></div>
额外标签法

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

<style>
.clearfix {
  clear: both;
}
</style>

<div class="father">
  <div class="left"></div>
  <div class="right"></div>
  <div class="clearfix"></div>
</div>
单伪元素法
  1. 准备 after 伪元素
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
  1. 父级使用 clearfix 类
<div class="father clearfix"></div>
双伪元素法
  1. 准备 after 和 before 伪元素
/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

/* after 清除浮动 */
.clearfix::after {
  clear: both;
}
  1. 父级使用 clearfix 类
<div class="father clearfix"></div>
overfow法
.father {
  margin: 10px auto;
  width: 1200px;
  /* height: 300px; */
  background-color: pink;

  overflow: hidden;
}

03-Flex布局

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。
在这里插入图片描述

Flex组成

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

组成部分：

  • 弹性容器
  • 弹性盒子
  • 主轴：默认在水平方向
  • 侧轴 / 交叉轴：默认在垂直方向

在这里插入图片描述

主轴对齐方式

属性名：justify-content

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

侧轴对齐方式

  • align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
  • align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
属性值效果
stretch弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center弹性盒子沿侧轴居中排列
flex-start弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

属性值效果
row水平方向，从左向右（默认）
column垂直方向，从上向下
row-reverse水平方向，从右向左
column-reverse垂直方向，从下向上

弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-wrap

属性值

  • wrap：换行
  • nowrap：不换行（默认）

行内对齐方式

属性名：align-content

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

注意：该属性对单行弹性盒子模型无效。

04-综合案例 – 抖音解决方案

在这里插入图片描述

整体布局

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

.box {
  margin: 50px auto;
  width: 1200px;
  height: 418px;
  border: 1px solid #ddd;
  border-radius: 10px;
}
</style>

<div class="box"></div>

列表布局

<style>
.box ul {
  display: flex;
  /* 弹性盒子换行 */
  flex-wrap: wrap;
  /* 调整主轴对齐方式 */
  justify-content: space-between;

  /* 调整 行对齐方式 */
  align-content: space-between;

  padding: 90px 40px 90px 60px;
  height: 418px;
}

.box li {
  display: flex;
  width: 500px;
  height: 88px;
  /* background-color: pink; */
}
</style>

<div class="box">
	<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

内容样式

<style>
.box .pic {
  margin-right: 15px;
}

.box .text h4 {
  line-height: 40px;
  font-size: 20px;
  font-weight: 400;
  color: #333;
}

.box .text p {
  font-size: 14px;
  color: #666;
}
</style>

<ul>
  <li>
    <div class="pic">
      <img src="./images/1.svg" alt="">
    </div>
    <div class="text">
      <h4>一键发布多端</h4>
      <p>发布视频到抖音短视频、西瓜视频及今日头条</p>
    </div>
  </li>
  <li>
    <div class="pic">
      <img src="./images/2.svg" alt="">
    </div>
    <div class="text">
      <h4>管理视频内容</h4>
      <p>支持修改已发布稿件状态和实时查询视频审核状态</p>
    </div>
  </li>
  <li>
    <div class="pic">
      <img src="./images/3.svg" alt="">
    </div>
    <div class="text">
      <h4>发布携带组件</h4>
      <p>支持分享内容携带小程序、地理位置信息等组件，扩展内容及突出地域性</p>
    </div>
  </li>
  <li>
    <div class="pic">
      <img src="./images/4.svg" alt="">
    </div>
    <div class="text">
      <h4>数据评估分析</h4>
      <p>获取视频在对应产品内的数据表现、获取抖音热点，及时进行表现评估</p>
    </div>
  </li>
</ul>

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

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

相关文章

性能测试 —— 生成html测试报告、参数化、jvm监控

性能测试 —— 生成html测试报告、参数化、jvm监控

1.生成HTML的测试报告 1.1配置 (1)找到jmeter 的安装目录&#xff0c;下的bin中的jmeter.properties&#xff08;jmeter配置文件&#xff09; (2) ctrl f &#xff0c;搜索jmeter.save.saveservice.output_format&#xff0c;取消井号 并且 把等号后的xml改为csv&#xff0c;…
阅读更多...
Web APIS——第一天（下）

Web APIS——第一天（下）

一、随机轮播图案例 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthde…
阅读更多...
Linux 安装maven两种方式(使用yum或手动安装)

Linux 安装maven两种方式(使用yum或手动安装)

1.用yum自动安装 yum install maven -y 配置阿里云镜像 ​vim /etc/maven/settings.xml​​ &#xff0c;mirrors节点下添加&#xff1a; <mirror><id>alimaven</id><name>aliyun maven</name><url>http://maven.aliyun.com/nexus/conte…
阅读更多...
前端html+css+js实现的2048小游戏，很完善。

前端html+css+js实现的2048小游戏，很完善。

源码下载地址 支持&#xff1a;远程部署/安装/调试、讲解、二次开发/修改/定制 逻辑用的是JavaScript&#xff0c;界面用canvas实现&#xff0c;暂时还没有添加动画。 视频浏览地址
阅读更多...
IBM展示非冯·诺依曼架构AI芯片NorthPole

IBM展示非冯·诺依曼架构AI芯片NorthPole

我们正处于人工智能的“寒武纪大爆发”时期。在过去的十年中&#xff0c;人工智能已经从理论和小型测试发展到企业规模的使用案例。但是&#xff0c;用于运行人工智能系统的硬件虽然越来越强大&#xff0c;但在设计时却没有考虑到当今的人工智能。随着人工智能系统规模的扩大&a…
阅读更多...
基于FPGA的电风扇控制器verilog，视频/代码

基于FPGA的电风扇控制器verilog，视频/代码

名称&#xff1a;基于FPGA的电风扇控制器verilog 软件&#xff1a;QuartusII 语言&#xff1a;Verilog 代码功能&#xff1a; 基于FPGA的电风扇控制器 运用 EDA SOPO实验开发系统设计一个基于FPGA的电风扇定时开关控制器,能实现手动和自动模式之间的切换。要求: (1)KI为电…
阅读更多...
Python桌面应用之XX学院水卡报表查询系统（Tkinter+cx_Oracle）

Python桌面应用之XX学院水卡报表查询系统（Tkinter+cx_Oracle）

一、功能样式 Python桌面应用之XX学院水卡报表查询系统功能&#xff1a; 连接Oracle数据库&#xff0c;查询XX学院水卡操作总明细报表&#xff0c;汇总数据报表&#xff0c;个人明细报表&#xff0c;进行预览并且支持导出报表 1.总明细报表样式 2.汇总明细样式 3.个人明细…
阅读更多...
卡巴斯基8（2009）杀毒软件

卡巴斯基8（2009）杀毒软件

下载地址&#xff1a;https://user.qzone.qq.com/512526231/main https://user.qzone.qq.com/3503787372/main
阅读更多...
Kafka KRaft模式探索

Kafka KRaft模式探索

1.概述 Kafka是一种高吞吐量的分布式发布订阅消息系统&#xff0c;它可以处理消费者在网站中的所有动作流数据。其核心组件包含Producer、Broker、Consumer&#xff0c;以及依赖的Zookeeper集群。其中Zookeeper集群是Kafka用来负责集群元数据的管理、控制器的选举等。 2.内容…
阅读更多...
Flutter extended_image库设置内存缓存区大小与缓存图片数

Flutter extended_image库设置内存缓存区大小与缓存图片数

ExtendedImage ExtendedImage 是一个Flutter库&#xff0c;用于提供高级图片加载和显示功能。这个库使用了 image 包来进行图片的加载和缓存。如果你想修改缓存大小&#xff0c;你可以通过修改ImageCache的配置来实现。 1. 获取ImageCache实例: 你可以通过PaintingBinding…
阅读更多...
css 雷达扫描图

css 雷达扫描图

html 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>css 雷达扫描</title><style>* {margin: 0;padding: 0;}body {background: #000000;height: 100vh;display: flex;align-items…
阅读更多...
Java基础总结

Java基础总结

0、Java语言 1.java和c 2.编译和解释 3.jre和jdk&#xff0c;jvm 简单来说&#xff0c;编译型语言是指编译器针对特定的操作系统将源代码一次性翻译成可被该平台执行的机器码&#xff1b;解释型语言是指解释器对源程序逐行解释成特定平台的机器码并立即执行。 Java 语言既具…
阅读更多...
【单片机学习笔记】Windows+Vscode+STM32F4+freeRTOS+FatFs gcc环境搭建

【单片机学习笔记】Windows+Vscode+STM32F4+freeRTOS+FatFs gcc环境搭建

为摒弃在接受keil邮件&#xff0c;研究了下gun编译&#xff0c;以STM32F407为例&#xff0c;简单记录 1. 软件包准备 Git 选择对应版本直接安装即可https://git-scm.com/download/winmakegcc ​ 1&#xff09;将上述软件包放置于C盘根目录 2&#xff09;添加环境变量 3&am…
阅读更多...
[SpringCloud] Eureka 与 Ribbon 简介

[SpringCloud] Eureka 与 Ribbon 简介

目录 一、服务拆分 1、案例一&#xff1a;多端口微服务 2、案例二&#xff1a;服务远程调用 二、Eureka 1、Eureka 原理分析 2、Eureka 服务搭建&#xff08;注册 eureka 服务&#xff09; 3、Eureka 服务注册&#xff08;注册其他服务&#xff09; 4、Eureka 服务发现…
阅读更多...
鸿鹄工程项目管理系统em Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统

鸿鹄工程项目管理系统em Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统

鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工程管…
阅读更多...
【组合计数】CF1866 H

【组合计数】CF1866 H

Problem - H - Codeforces 题意 思路 不知道这种trick叫什么&#xff0c;昨天VP刚遇到过 设 f[x] 为恰好有一个最大值为 x 的方案数&#xff0c;我们要求这个&#xff0c;那就设 g[x] 为 至少有一个最大值为 x 的方案数&#xff0c;那么答案就是 f[x] g[x] - g[x - 1] 这里…
阅读更多...
FL Studio21版无限破解版下载 软件内置破解补丁

FL Studio21版无限破解版下载 软件内置破解补丁

FL Studio是一款非常好用方便的音频媒体制作工具&#xff0c;它的功能是非常的强大全面的&#xff0c;想必那些喜欢音乐创作的朋友们应该都知道这款软件是多么的好用吧&#xff0c;它还能够给用户们带来更多的创作灵感&#xff0c;进一步加强提升我们的音乐制作能力。该软件还有…
阅读更多...
浅谈uniapp中开发安卓原生插件

浅谈uniapp中开发安卓原生插件

其实官方文档介绍的比较清楚而且详细,但是有时候他太墨迹,你一下子找不到自己想要的,所以我总结了一下开发的提纲,也是为了自己方便下次使用。 1.第一步,下载官方提供的Android的示例工程,然后倒入UniPlugin-Hello-AS工程请在App离线SDK中查找,之后Android studio,编译运行项目…
阅读更多...
Android Studio Gradle中没有Task任务，没有Assemble任务，不能方便导出aar包

Android Studio Gradle中没有Task任务，没有Assemble任务，不能方便导出aar包

Gradle中&#xff0c;没有Assemble任务 1. 在编译aar包或者编译module的时候&#xff0c;没有release包&#xff0c;我们一般都是通过assemble进行编译。 如果在Gradle中找不到task。 可以通过设置File->setting -->Experimental→取消勾选“Do not build Gradle task …
阅读更多...
wordpress数据库迁移Invalid default value for ‘comment_date‘

wordpress数据库迁移Invalid default value for ‘comment_date‘

问题说明 最近在往新的电脑上迁移一个wordpress网站&#xff0c;在往新电脑上的mysql数据库中导入数据时&#xff0c;报错&#xff1a;1067 - Invalid default value for comment_date。 异常分析 这个错误的字面意思就是字段‘comment_date’的默认值是无效的&#xff0c;于…
阅读更多...
最新文章

Copyright @ 2022~2023

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