css之Flex弹性布局(父项常见属性)

文章目录

  • 🐕前言:
    • 🏨定义flex容器 display:flex
    • 🏨在flex容器中子组件进行排列
      • 🪂行排列 flex-direction: row
      • 🪂将行排列进行翻转排列 flex-direction: row-reverse
      • 🏅按列排列 flex-direction: column;
      • 🏅按列排列 flex-direction: column-reverse
    • 🪀flex容器内的默认宽度
      • 🏅默认宽度 width: max-content
      • 🏅默认宽度 width: min-content
      • 🏅自定义宽度 flex-basis: 100px
      • 🎀平均分配宽度 flex-grow: 1
      • 🐕缩小组件逻辑 flex-shrink: 1
      • 简写:flex:grow shrink basis
    • 🎀组件交叉轴对齐方式(行高)align-items:stretch
    • 🎀组件水平轴(主轴)对齐方式 justify-content:flex-start
    • 🎀组件换行 flex-wrap:nowrap(放不下了,又不想缩小宽度,想换行放)
    • 🎀flex多轴之间的对齐 align-content: normal

🐕前言:

本篇博客会讲解css中的弹性布局的常见用法,
在这里插入图片描述

🏨定义flex容器 display:flex

将一个div定义成flex容器,它分为主轴与交叉轴(其中左右边对应主轴的start、end,上下边对应交叉轴的start、end

display:flex

在这里插入图片描述

🏨在flex容器中子组件进行排列

🪂行排列 flex-direction: row

flex-direction: row

在这里插入图片描述

在这里插入图片描述

🪂将行排列进行翻转排列 flex-direction: row-reverse

flex-direction: row-reverse

在这里插入图片描述
注意:由于翻转时主轴的start、end会进行对调,故紧挨着右边界

在这里插入图片描述

🏅按列排列 flex-direction: column;

flex-direction: column;

注意:按列排列时主轴的start、end会变成竖轴
在这里插入图片描述

在这里插入图片描述

🏅按列排列 flex-direction: column-reverse

注意:按列排列时主轴的start、end会变成竖轴,由于翻转时主轴的start、end会进行对调,故紧挨着下边界

flex-direction: column-reverse;

在这里插入图片描述
在这里插入图片描述

🪀flex容器内的默认宽度

在这里插入图片描述

在flex容器中哪怕你的子组件是div(块元素),也都会加上默认宽度(width:max-content)
在这里插入图片描述

🏅默认宽度 width: max-content

这个宽度就是你内容的宽度,一直不换行
在这里插入图片描述
下面还有一种情况:

🏅默认宽度 width: min-content

但是如果你的内容长度超过了页面大小(就是内容跑到显示外面去了),那么它默认长度就会发生改变,变成(width: min-content),它的长度是内容中最长单词的长度
在这里插入图片描述

🏅自定义宽度 flex-basis: 100px

假设父元素宽度500px,子组件自定义宽度50px,那么还有200px空余空间,
如果想平均分配这200px:(为了理解,这里省略了样式修饰)

.bar{display: flex;/* 将标签变为flex容器 */width: 500px;.item{/* 子组件 */flex-basis: 50px;}

在这里插入图片描述

🎀平均分配宽度 flex-grow: 1

在这里插入图片描述
这个是怎么计算的呢
(50px+ 1y )*5=500px ,得出y=50px的空余空间,故每个元素可以分到50px空余
在这里插入图片描述

🐕缩小组件逻辑 flex-shrink: 1

当组件的长度之和超过容器长度,默认平均长度,而不会超出页面
在这里插入图片描述
在这里插入图片描述

简写:flex:grow shrink basis

等分

flex:1 0px;

🎀组件交叉轴对齐方式(行高)align-items:stretch

默认的:(以组件中最大的行高定义)

align-items: stretch;

统一在交叉轴起点对齐

align-items: flex-start;

统一在交叉轴终点对齐

align-items: flex-end

统一在交叉轴居中对齐

align-items: center;

基于文字的基线对齐

align-items: baseline;

🎀组件水平轴(主轴)对齐方式 justify-content:flex-start

默认主轴对齐方式(以start为起始位置):

justify-content:flex-start;

以end终点对齐:

justify-content:flex-end;

水平居中:

justify-content:center;

我们设置导航栏:让组件紧挨着左右两边,中间的距离是相等的

justify-content:space-between;

我们设置导航栏:让组件比较均匀的分布,中间的距离是两边距离的两倍 2:1

justify-content:space-around;

我们设置导航栏:让组件比较均匀的分布,中间的距离等于两边的距离 1:1

justify-content:space-evenly;

🎀组件换行 flex-wrap:nowrap(放不下了,又不想缩小宽度,想换行放)

默认不换行:

flex-wrap:nowrap;

在这里插入图片描述

换行:

flex-wrap:wrap;

在这里插入图片描述

🎀flex多轴之间的对齐 align-content: normal

默认:不对齐啥样子,就是啥样子

align-content: normal

从交叉轴start对齐、从交叉轴end对齐

align-content: flex-start;
align-content: flex-end;

竖着看:首尾元素距离是中间元素之间距离的一半 1:2

align-content: space-around

在这里插入图片描述

竖着看:首尾元素没有空隙,中间距离平均

align-content: space-between;

在这里插入图片描述

竖着看:首尾元素没有空隙,中间距离平均

align-content: space-evenly;

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

No170.精选前端面试题,享受每天的挑战和学习

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

mstsc改端口为33389

windows 远程默认端口3389不太安全,改成33389防下小人 把下面的2个文本存在后缀.reg的文件,双击导入注册表,"PortNumber"dword:0000826d 这个就是33389对应的端口号的16进制值,要想自己改成其它的换下值即可 Windows …

人工智能、机器学习、深度学习的区别

人工智能涵盖范围最广,它包含了机器学习;而机器学习是人工智能的重要研究内容,它又包含了深度学习。 人工智能(AI) 人工智能是一门以计算机科学为基础,融合了数学、神经学、心理学、控制学等多个科目的交…

LeetCode讲解篇之77. 组合

文章目录 题目描述题解思路题解代码 题目描述 题解思路 遍历nums,让当前数字添加到结果前缀中,递归调用,直到前缀的长度为k,然后将前缀添加到结果集 题解代码 func combine(n int, k int) [][]int {var nums make([]int, n)fo…

分享转发API

分享转发API 微信小程序可以在page中定义 onShareAppMessage函数,设置该页面的分享信息。只有定义了此事件处理函数,小程序右上角菜单栏才会显示“转发”按钮,用户点击页面内的转发按钮是才能调用函数, 除了在这里点击转发按钮进行…

最新!两步 永久禁止谷歌浏览器 Google Chrome 自动更新

先放效果图: CSDN这个问题最火的大哥的用了没用 像他这样连浏览器都打不开 为什么要禁止chrome自动更新 看到很多搞笑的大哥,说为啥要禁止; 我觉得最大的原因就是chromedriver跟不上chrome的自动更新,导致我们做selenium爬虫的…

MySQL数据库查询实战操作

前置条件: 创建库:MySQL基本操作之创建数据库-CSDN博客 创建表:MySQL基本操作之创建数据表-CSDN博客 目录 常规查询常用函数union查询一、常规查询 普通的查询方式 1、查询所有姓名以 "张" 开头的学生: SELECT * FROM student WHERE name LIKE 张%; 这条语…

Golang爬虫入门指南

引言 网络爬虫是一种自动化程序,用于从互联网上收集信息。随着互联网的迅速发展,爬虫技术在各行各业中越来越受欢迎。Golang作为一种高效、并发性好的编程语言,也逐渐成为爬虫开发的首选语言。本文将介绍使用Golang编写爬虫的基础知识和技巧…

支付风控规则

支付宝使用基本风控规则 一、 6个规则 1、规则一:30分钟内,不要连续刷3笔(包括失败交易),两笔交易时间间隔大于5分钟,交易金额不要一样,不要贴近限额; 2、规则二:非正…

ETL工具对比

ETL开发 ETL是英文Extract-Transform-Load的缩写,表示将数据从来源端,经过抽取,转换,加载到目标数据源的过程。 数据抽取 分为全量抽取和增量抽取,数据量达到百万级别建议用增量抽取,小于百万级别可用增…

matlab中绘制 维诺图(Voronoi Diagram)

1.专业术语(相关概念): 基点Site:具有一些几何意义的点 细胞Cell:这个Cell中的任何一个点到Cell中基点中的距离都是最近的,离其他Site比离内部Site的距离都要远。 Cell的划分:基点Site与其它的…

Java中的static关键字

一、static关键字的用途 在《Java编程思想》P86页有这样一段话: “static方法就是没有this的方法。在static方法内部不能调用非静态方法,反过来是可以的。而且可以在没有创建任何对象的前提下,仅仅通过类本身来调用static方法。这实际上正是s…

frida中使用gson打印map对象

Java.openClassFile("/data/local/tmp/r0gson.dex").load();const gson Java.use(com.r0ysue.gson.Gson);var Gson Java.use(‘com.google.gson.Gson’).$new(); console.log("map -> " Gson.toJsonTree(map).getAsJsonObject());

JS小数运算出现00000多位小数怎么解决

JS小数运算出现00000多位小数怎么解决 给大家分享一个经典的前端面试题: 0.10.2 0.3 //false javascript中浮点数的计算是以2进制计算的,所以0.10.2变成:0.30000000000000004 解决方案一 首先最简单的是利用JavaScript 的toFixed(n) 方…

app分发的一些流程

应用分发的流程通常包括以下步骤: 开发应用程序:首先,您需要开发您的应用程序。这包括编写代码、设计用户界面、测试应用程序等等。确保您的应用程序符合各个应用商店的规范和要求,以确保顺利通过审核。 准备应用材料&#xff1a…

Element UI定义方法校验邮箱格式

1. .vue中定义了3个邮箱输入框&#xff0c;前面两个是输入多个邮件地址&#xff0c;最后一个是使用element自带的校验来校验单个邮件地址 <el-row><el-col :span"24"><el-form-item label"收件人" prop"to"><el-input v-mo…

Linux系统管理:虚拟机Kylin OS安装

目录 一、理论 1.Kylin OS 二、实验 1.虚拟机Kylin OS安装准备阶段 2.安装Kylin OS 3.进入系统 一、理论 1.Kylin OS &#xff08;1&#xff09;简介 麒麟操作系统&#xff08;Kylin OS&#xff09;亦称银河麒麟&#xff0c;是由中国国防科技大学、中软公司、联想公司…

oracle rac了解

Oracle RAC 是一种高可用性和高性能的数据库解决方案&#xff0c;它允许多台服务器共享同一个数据库。简而言之&#xff0c;Oracle RAC 允许你将多个计算节点连接到一个共享的数据库实例中&#xff0c;从而提供了以下优势&#xff1a; 高可用性&#xff1a;Oracle RAC 提供了故…

Leetcode 2911. Minimum Changes to Make K Semi-palindromes

Leetcode 2911. Minimum Changes to Make K Semi-palindromes 1. 解题思路2. 代码实现 题目链接&#xff1a;2911. Minimum Changes to Make K Semi-palindromes 1. 解题思路 这一题属实也是把我坑惨了…… 坦率地说&#xff0c;这道题本身并没有啥难度&#xff0c;但是坑爹…

【RS】遥感影像/图片64位、16位(64bit、16bit)的意义和区别

在数字图像处理中&#xff0c;我们常常会听到不同的位数术语&#xff0c;比如64位、16位和8位&#xff08;64bit、16bit、8bit&#xff09;。这些位数指的是图像的深度&#xff0c;也就是图像中每个像素可以显示的颜色数。位数越高&#xff0c;图像可以显示的颜色数就越多&…