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

文章目录

  • 🎀前言:本篇博客介绍弹性布局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.rhkb.cn/news/168607.html

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

相关文章

酷开科技 | 酷开系统,为居家生活打开更精彩的窗口

电视在我们的日常生活中扮演着重要的角色。虽然,作为客厅C位的扛把子——电视的娱乐作用深入人心,但是,它的涵义和影响力却因我们每个人的具体生活环境而存在着种种差异,而我们的生活环境又受到我们所处的社会及文化环境的影响。 …

一文了解AIGC与ChatGPT

一、AIGC简介 1.AIGC基础 (1)AIGC是什么 AIGC是人工智能图形计算的缩写,是一种基于图形处理器(GPU)的计算技术,可以加速各种计算任务,包括机器学习、深度学习、计算机视觉等。 AIGC是一种基于GPU的计算技术&#x…

Git(一)Windows下安装及使用Git Bash

目录 一、简介1.1 什么是Git?1.2 Git 的主要特点1.3 什么是 Git Bash? 二、下载三、安装3.1 同意协议3.2 选择安装位置3.3 其他配置(【Next】 即可)3.4 安装完毕3.5 打开 Git Bash 官网地址: https://www.git-scm.com/…

包管理工具

代码共享方案 放到npm仓库,下载到本地放到node_modules npm配置文件 必须填写的属性:name、version name是项目的名称; version是当前项目的版本号; description是描述信息,很多时候是作为项目的基本描述&#xff1b…

力扣每日一题61:旋转链表

题目描述: 给你一个链表的头节点 head ,旋转链表,将链表每个节点向右移动 k 个位置。 示例 1: 输入:head [1,2,3,4,5], k 2 输出:[4,5,1,2,3]示例 2: 输入:head [0,1,2], k 4 输…

CSS必学:你需要知道的盒子模型的秘密

作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 👉 WangMin 作为前端开发来说,要掌握的CSS基础一定很多,那么CSS中盒子模型肯定是必考必问必掌握的前端知识点,因为它是CSS基础中非常重要的内容,…

异步编程详解(.NET)

在之前写的一篇关于async和await的前世今生的文章之后,大家似乎在async和await提高网站处理能力方面还有一些疑问,很多网站本身也做了不少的尝试。今天我们再来回答一下这个问题,同时我会做一个async和await在WinForm中的尝试,并且…

Java SOAP 调用 C# 的WebService

Java SOAP 调用 C# 的WebService,C# 的WebService方法的创建可以参考上一篇文章。IntelliJ IDEA Community Edition 2021.2.3的idea64.exe新建项目,导入需要的jar,代码如下: import org.apache.axis.client.Service; import org.…

循环神经网络(Recurrent Neural Network)

1. 为什么需要循环神经网络 RNN 上图是一幅全连接神经网络图,我们可以看到输入层-隐藏层-输出层,他们每一层之间是相互独立地,(框框里面代表同一层),每一次输入生成一个节点,同一层中每个节点之间又相互独立的话&#…

PKU 概率论+数理统计+建模 期中考复习总结

目录 计算条件概率计算概率(放回与不放回)生成随机数算法Linear Congruential Method判断是否是full period Uniformity (test of frequency)1.Chi-Square testmethodreminderexample 2.Kolmogorov-Sminov testmethodexample Independence (test of auto…

互联网Java工程师面试题·Spring篇·第一弹

目录 1、一般问题 1.1、不同版本的 Spring Framework 有哪些主要功能? 1.2、什么是 Spring Framework? 1.3、列举 Spring Framework 的优点。 1.4、Spring Framework 有哪些不同的功能? 1.5、Spring Framework 中有多少个模块&#xff…

JSX 模板精简原则

学习目标: 使模板中的逻辑跟简洁 实现: 复杂的多分枝的逻辑收敛为一个函数,通过一个专门的函数来写分支逻辑,模板中只负责调用 实例: // 有一个状态type有1,2,3三种 // 1 展示 h1 // 2 展示 h2…

webpack proxy如何解决跨域?

一、是什么 webpack proxy,即webpack提供的代理服务 基本行为就是接收客户端发送的请求后转发给其他服务器 其目的是为了便于开发者在开发模式下解决跨域问题(浏览器安全策略限制) 想要实现代理首先需要一个中间服务器,webpac…

C++左值引用与右值引用

0.类型和值类别的区别? 类型(type)和值类别(value category) 1.类型指的是数据类型,int,char这样的内置类型,类型主要是用来区别它们的字节大小。除了内置类型还有自定义类型&…

【ESP-BOX-LITE】:照片查看器

目录 项目场景: 项目需求描述: 项目技术: 项目成果: 项目总结: 项目视频: 芳香 项目场景: 使用ESP-BOX-LITE实现照片查看器功能,显示多级目录下的图片或文件夹,自…

二进制部署k8s

常见的K8S安装部署方式 ●Minikube Minikube是一个工具,可以在本地快速运行一个单节点微型K8S,仅用于学习、预览K8S的一些特性使用。 部署地址:https://kubernetes.io/docs/setup/minikube ●Kubeadm Kubeadm也是一个工具,提供…

vue3中使用vue3-pdf-app和使用浏览器内置的PDF插件浏览器PDF文件

文章目录 先准备一个PDF使用浏览器内置的PDF插件预览PDF在HTML中使用浏览器插件预览PDFVscode使用插件发布服务后直接通过URL地址访问PDF可使用的浏览器 在vue3项目中预览PDF文件vue3项目也是可以通过URL地址访问文件的vue3中使用浏览器内置的PDF插件预览PDF代码如下所示&#…

京东数据分析:2023厨房小电市场遇冷,空气炸锅等明星产品被抛弃

过去几年间,宅经济的爆发带火了酸奶机、煮蛋器、豆浆机、空气炸锅、养生壶等,一众外观小巧、功能丰富、价格相对便宜的厨房小家电。但随着年轻人走出家门回归工作岗位,厨房小家电们却步入了艰难时刻。 如今,厨房小家电们似乎正在经…

blender怎么在一个面上对半切割(不影响别的面)

1进入编辑模式 2.在面选择模式下,选中该物体需要切割成两半的面。 3.按K这个快捷键(切记,必须得用快捷键,不用的话没办法调出第一个绿色切割点),将切割点移动到需要切割的起始边,按住Shift键不放…

第六节:Word中对象的层次结构

《VBA之Word应用》(10178982),是我推出第八套教程,教程是专门讲解VBA在Word中的应用,围绕“面向对象编程”讲解,首先让大家认识Word中VBA的对象,以及对象的属性、方法,然后通过实例让…