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;默默付出却鲜获认可。比如八年以上的资深硬件工…

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;支持枚举。…

学嵌入式真的很烧钱吗?

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

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

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

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…

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…

APP性能测试,你需要关注哪些指标?

一、Android客户端性能测试常见指标 1、内存 2、CPU 3、流量 4、电量 5、启动速度 6、滑动速度、界面切换速度 7、与服务器交互的网络速度 二、预期标准指定原则 1、分析竞争对手的产品&#xff0c;所有指标要强于竞品 2、产品经理给出的预期性能指标数据 3、符合业…

【Python使用】嘿马头条完整开发md笔记第2篇:数据库,作用【附代码文档】

嘿马头条项目从到完整开发笔记总结完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;课程简介&#xff0c;ToutiaoWeb虚拟机使用说明&#xff0c;Pycharm远程开发&#xff0c;产品与开发&#xff0c;数据库1 产品介绍,2 原型图与UI图,3 技术架构,4 开发。OS…

SSL证书过期不更新会有什么影响?怎么续签?

SSL证书如果不及时更新&#xff0c;可能会带来以下问题&#xff1a; 1.影响体验和信誉&#xff1a; - 如果你的网站SSL证书过期了&#xff0c;现在大部分浏览器都会提醒用户这个网站的安全证书已经失效。这就很可能让用户觉得你的网站不太安全&#xff0c;不敢继续浏览&#x…

Python接口自动化之接口依赖

一、场景说明 在面试接口自动化时&#xff0c;经常会问&#xff0c;其他接口调用的前提条件是当前用户必须是登录状态&#xff0c;如何处理接口依赖&#xff1f; 在此之前我们介绍过session管理器保存会话状态。如果接口请求需要携带token&#xff0c;那么又如果处理呢&#…

绿色再生·安卓4G智能远程操作巡视机器人小车

一、前言 1.1 项目介绍 【1】项目功能介绍 随着物联网技术与移动通信技术的快速发展&#xff0c;远程遥控设备在日常生活及工业应用中的普及度日益提高。无论是家用扫地机器人实现自主导航清扫&#xff0c;还是目前抖音平台上展示的实景互动小车等创新应用&#xff0c;都体现…

Games101笔记-模型、视图、投影

在旋转点&#xff0c;旋转矩阵的逆等于矩阵的转置 视图变换和投影变换 三维变换 左边3*3是线性变换&#xff0c;右边一列是仿射变换(平移) 先线性再平移 缩放、旋转、平移 x叉乘y得到z&#xff0c;y叉乘z得到x&#xff0c; xyz给任何两个可以得到另一个 (循环对称) z叉乘x得…

sqllab第十一关通关笔记

知识点&#xff1a; 发现登录框就可以尝试注入登录框一般都是字符型注入通过注入可以获取其他表的信息绕过手段 单引号闭合联合注入也可以进行错误注入 首先看界面是一个登录框&#xff1b;通过admin admin登录进去&#xff0c;发现页面会把用户名和密码的登录信息打印出来&am…