Css提高——flex布局及其相关属性

目录:

1、传统布局与flex布局的区别

2、flex的布局原理

 3、flex常见的父项属性

3.1、flex-direction :设置主轴的方向

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

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

3.4、align-items 设置侧轴上的子元素排列方式(单行 )

3.5、align-content 设置侧轴上的子元素的排列方式(多行)

         3.6、flex-flow(flex-direction 和 flex-wrap 属性的复合属性

 4、flex常见的子项属性 

4.1、flex

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


1、传统布局与flex布局的区别

2、flex的布局原理

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

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

 3、flex常见的父项属性

  • flex-direction:设置主轴的方向
  • justify-content:设置主轴上的子元素排列方式
  • flex-wrap:设置子元素是否换行
  • align-content:设置侧轴上的子元素的排列方式(多行)
  • align-items:设置侧轴上的子元素排列方式(单行)
  • flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap

3.1、flex-direction :设置主轴的方向

1、主轴和侧轴的概念

2、flex-direction的属性值

3、例子

如果我想要将flex的子元素从右往左排列的话,则需要对父元素添加flex-direction: row-reverse;属性

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>.main {width: 800px;height: 600px;margin: 0 auto;border-radius: 12px;background-color: skyblue;display: flex;flex-direction: row-reverse;}span {width: 200px;margin-left: 10px;height: 100%;border-radius: 12px;background-color: pink;}</style>
</head><body><div class="main"><span>1</span><span>2</span><span>3</span></div>
</body></html>
2、 效果图

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

1、justify-content 的属性值:

2、例子:
2、代码: 
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {display: flex;width: 800px;height: 400px;background-color: pink;/* 我们现在的主轴是y轴 */flex-direction: column;/* justify-content: center; */justify-content: space-between;}div span {width: 150px;height: 100px;background-color: purple;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span></div>
</body></html>
3、效果图:

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

1、flex-wrap 属性值

2、例子
1、代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {display: flex;width: 600px;height: 400px;background-color: pink;/* flex布局中,默认的子元素是不换行的, 如果装不开,会缩小子元素的宽度,放到父元素里面  *//* flex-wrap: nowrap; */flex-wrap: wrap;}div span {width: 150px;height: 100px;background-color: purple;color: #fff;margin: 10px;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
</body></html>
2、效果图

3.4、align-items 设置侧轴上的子元素排列方式(单行 )

1、align-items 属性值

2、例子
1、代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {display: flex;width: 800px;height: 400px;background-color: pink;/* 默认的主轴是 x 轴 row */flex-direction: column;justify-content: center;/* 我们需要一个侧轴居中 *//* 拉伸,但是子盒子不要给高度 *//* align-items: stretch; */align-items: center;/* align-content: center; */}div span {width: 150px;height: 100px;background-color: purple;color: #fff;margin: 10px;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span></div>
</body></html>
2、效果图:

3.5、align-content 设置侧轴上的子元素的排列方式(多行)

1、align-content属性值

2、例子
1、代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {display: flex;width: 800px;height: 400px;background-color: pink;/* 换行 */flex-wrap: wrap;/* 因为有了换行,此时我们侧轴上控制子元素的对齐方式我们用 align-content *//* align-content: flex-start; *//* align-content: center; *//* align-content: space-between; */align-content: space-around;}div span {width: 150px;height: 100px;background-color: purple;color: #fff;margin: 10px;}</style>
</head><body><div><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span></div>
</body></html>
2、效果图:

3.6、flex-flow(flex-direction 和 flex-wrap 属性的复合属性)

1、flex-flow 属性值

 4、flex常见的子项属性 

4.1、flex

1、flex属性

2、例子
 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>.main {width: 800px;height: 400px;background-color: skyblue;margin: 0 auto;border-radius: 12px;display: flex;}span {flex: 1;background-color: green;height: 100px;border-radius: 12px;margin-left: 10px;}.main span:nth-child(2) {flex: 2;background-color: blue;height: 100px;border-radius: 12px;margin-left: 10px;}</style>
</head><body><div class="main"><span>1</span><span>2</span><span>3</span></div>
</body></html>
2、效果图

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

1、定义

align-self

order:

2、例子:
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>.main {width: 90%;height: 400px;background-color: skyblue;margin: 0 auto;border-radius: 12px;display: flex;flex-direction: row;}span {flex: 1;background-color: green;height: 100px;border-radius: 12px;margin-left: 10px;}.main span:nth-child(2) {flex: 2;background-color: blue;height: 100px;border-radius: 12px;align-self: flex-end;margin-left: 10px;}.main span:nth-child(3) {height: 100px;border-radius: 12px;order: -1;margin-left: 10px;}</style>
</head><body><div class="main"><span>1</span><span>2</span><span>3</span></div>
</body></html>
2、效果图:

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

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

相关文章

Linux:系统初始化,内核优化,性能优化(1)

我们安装好了一个服务器之后&#xff0c;一定要对他的系统&#xff0c;内核&#xff0c;性能一系列进行一个优化&#xff0c;否则当大并发的情况下很可能出现问题&#xff0c;我把要优化的东西直接罗列出来并介绍&#xff0c;后期可以直接编写一个脚本拿到服务器上直接用就行 …

在深圳,为什么硬件工程师的待遇还不如软件?

深圳触觉智能科技有限公司 硬件明明比软件更难&#xff0c;为何在国内… 硬件明明比软件更难&#xff0c;但硬件工程师待遇却不如软件工程师&#xff0c;硬件工程师常被忽视&#xff0c;被视为可轻易模仿的“配角”&#xff0c;默默付出却鲜获认可。比如八年以上的资深硬件工…

linux 内核升级-离线

离线升级 首先找到镜像网址&#xff1a;http://elrepo.org/tiki/Download 我选择了 https://mirrors.tuna.tsinghua.edu.cn/elrepo/kernel/el7/x86_64/RPMS/ 下载安装包 wget https://mirrors.tuna.tsinghua.edu.cn/elrepo/kernel/el7/x86_64/RPMS/elrepo-release-7.0-6.el7…

2024年普通人的创业机会在哪里?2024热门创业项目!2024普通人想翻身的风口行业!

创业千万别冲动&#xff0c;社区团购代理创业失败案例&#xff01; 是不是一开始挺看好这个赛道&#xff0c;看别人做的风生水起&#xff0c;以为不难&#xff0c;真正开始做才发现不好做&#xff0c;没有先天优势&#xff0c;货源和客源从零开始积累&#xff0c;开始就是摸着石…

Java 世界破破烂烂,电音小猫缝缝补补

Java 世界破破烂烂&#xff0c;电音小猫缝缝补补 Java 通用代码生成器光 2.4.0 电音之王尝鲜版六正在研发&#xff0c;昨天发布了介绍视频&#xff0c;请见&#xff1a; https://www.bilibili.com/video/BV1yD421j7UP/ 电音之王尝鲜版六支持哑数据模式&#xff0c;支持枚举。…

uniapp APP 上传文件

/*** 上传文件*/uploadPhoneFile:function(callback,params {}) {let fileType [.pdf,.doc,.xlsx,.docx,.xls]// #ifdef APP-PLUSplus.io.chooseFile({title: 选择文件, filetypes: [doc, docx], // 允许的文件类型 multiple: false, // 是否允许多选 },(e)>{const tem…

软件测试面试200问,面试看这就够了。。。

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 Part1 1、你的测试职业发展是什么&#xff1f; 测试经验越多&#xff0c;测试能力越高。所以我…

学嵌入式真的很烧钱吗?

如果是走嵌入式单片机方向&#xff0c;这篇内容&#xff0c;很适合预算1000以下的&#xff0c;作为发育参考。 下面是我2011年的入行成本&#xff1a; 买了智能小车&#xff0c;还有51开发板&#xff0c;杂七杂八&#xff0c;可能一共不到1000。 一开始迷之自信了&#xff0c;买…

软件测试方法 -- 等价类边界值

测试用例的定义 测试用例是为了特定的目的而设计的一组测试输入、执行条件和预期的结果&#xff0c;以便测试是否满足某个特定需求。通过大量的测试用例来检验软件的运行效果&#xff0c;他是指导测试工作进行的依据。 下面我们介绍几种常用的黑盒测试方法 等价类划分法 定…

数据表示—二进制与十进制转换

1. 二进制转十进制 按照数据类型分为三种&#xff1a;无符号的二进制整数&#xff0c;有符号的二进制整数和小数二进制数。 1.1 无符号的二进制整数 计算技巧&#xff1a; 从二进制数的右边第一位起&#xff0c;从右往左&#xff0c;先用二进制位置上的数乘以2的相应位数的幂&…

ABS10-ASEMI开关电源专用ABS10

编辑&#xff1a;ll ABS10-ASEMI开关电源专用ABS10 型号&#xff1a;ABS10 品牌&#xff1a;ASEMI 封装&#xff1a;ABS-4 最大重复峰值反向电压&#xff1a;1000V 最大正向平均整流电流(Vdss)&#xff1a;1A 功率(Pd)&#xff1a;中小功率 芯片个数&#xff1a;4 引脚…

NetSuite多脚本性能研究

在项目中&#xff0c;随着复杂度的提升&#xff0c;客制脚本以及各类SuiteAPP的应用&#xff0c;导致某个对象上挂载的脚本大量增加&#xff0c;最终导致了性能问题。表现在保存单据时时间过长&#xff0c;严重影响人机界面的用户感受。基于此问题&#xff0c;我们开展了NetSui…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Grid)

网格容器&#xff0c;由“行”和“列”分割的单元格所组成&#xff0c;通过指定“项目”所在的单元格做出各种各样的布局。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 仅支持GridItem…

ubuntu下修改硬盘名字和开机挂载硬盘

操作系统 文章目录 操作系统查看信息挂载处理修改自动挂载硬盘权限设置 ubuntu下修改硬盘名字和开机挂载硬盘 查看信息 查看电脑上所有硬盘分区的卷标及uuid&#xff0c; sudo blkid /dev/sda1: LABEL“win7” UUID“40305E93305E9030” TYPE“ntfs” /dev/sda5: LABEL“so…

pta 7-29 删除字符串中的子串 C语言

输入2个字符串S1和S2&#xff0c;要求删除字符串S1中出现的所有子串S2&#xff0c;即结果字符串中不能包含S2。 输入格式&#xff1a; 输入在2行中分别给出不超过80个字符长度的、以回车结束的2个非空字符串&#xff0c;对应S1和S2。 输出格式&#xff1a; 在一行中输出删除…

docker yocto vscode

scode的docker插件怎么使用 vscode是一个基于VS Code的开发环境&#xff0c;它提供了一个Docker插件&#xff0c;可以帮助你在VS Code中使用Docker进行开发。下面是使用scode的Docker插件的步骤&#xff1a; 安装scode插件&#xff1a;在VS Code的扩展商店中搜索并安装scode插…

Web 开发模式演进过程

作为初学者&#xff0c;要了解 Web 开发模式的演进过程&#xff0c;并从这些演进过程中看到变化&#xff0c;这样有利于开发者的思路提升。 什么是 Web 开发 Web &#xff1a;网页&#xff0c;可以通过浏览器访问的资源 Web 开发&#xff1a;基于网页载体的软件开发&#xff…

mac下Appuim环境安装

参考资料 Mac安装Appium_mac电脑安装appium-CSDN博客 安卓测试工具&#xff1a;Appium 环境安装&#xff08;mac版本&#xff09;_安卓自动化测试mac环境搭建-CSDN博客 1. 基本环境依赖 1 node.js 2 JDK&#xff08;Java JDK&#xff09; 3 Android SDK 4 Appium&#x…

Verilog——综合和防真

2.1综合 Verilog 是硬件描述语言&#xff0c;顾名思义&#xff0c;就是用代码的形式描述硬件的功能&#xff0c;最终在硬件电路上实 现该功能。在Verilog描述出硬件功能后需要使用综合器对Verilog代码进行解释并将代码转化成实际 的电路来表示&#xff0c;最终产生实际的电路&a…