css3 flex弹性布局学习

news/2025/1/11 23:58:55/

一、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.ppmy.cn/news/80581.html

相关文章

Jenkins使用Maven构建Java应用程序

本教程将向你展示如何使用Jenkins编排并构建一个使用Maven管理的简单Java应用程序。 如果你是使用Maven的Java开发人员,并且对CI/CD概念不熟悉,或者你可能熟悉这些概念,但不知道如何使用Jenkins实现构建应用程序,那么本教程适合你…

新-git-gitee代码管理(管理)

git忽略文件失效 git rm -r --cached . //清除缓存 git add . //添加所有文件 git commit -m update .gitignore //提交更新.gitignoregit 提交的一些规范 开发git commit规范: git commit --fix我的问题feat:新功能 fix:BUG…

【算法题】2390. 从字符串中移除星号

插: 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 坚持不懈,越努力越幸运,大家一起学习鸭~~~ 题目: 给你一个包含若干星号 * 的字符串 …

快速学Go依赖注入工具wire

Go相对java和C是较新的语言,但也有诸多优秀特性及生态库。本文介绍大多数软件工程中常用的功能:依赖注入。首先介绍什么是依赖注入,go实现库wire与其他语言的差异。然后通过简单示例实现依赖注入,简化代码、提升可读性。 依赖注入…

微服务之服务容错

Informal Essay By English Share a sentence that I think is very reasonable, as long as you can know the underlying logic of anything, you can hold it without fear 参考书籍: “凤凰架构” 引言 在 Martin Fowler 与 James Lewis合写的文章《Micros…

【C++】C++11线程库 和 C++IO流

春风若有怜花意,可否许我再少年。 文章目录 一、C11线程库1.thread类介绍2.mutex互斥锁 和 CAS原子操作(compare and set)3.lock_guard和unique_lock4.两个线程交替打印,一个打印奇数,一个打印偶数(线程同步…

Spring事务及事务传播机制

一.事务的含义:多个操作封装在一起,要么同时执行成功,一旦有一个操作执行失败,那么全部执行失败。这里给大家举个例子:比如A给B转账50元,而B没有收到这50元,此时A转账B这个操作也需要进行回滚,恢复到A给B没…

MyBatis 框架

MyBatis 框架 MyBatis 简介搭建 MyBatis 开发环境核心配置文件详解mapper 映射文件(实现增删改查)MyBatis获取参数值的两种方式MyBatis的各种查询功能特殊SQL的执行自定义映射resultMapresultMap 字段和属性的映射多对一映射处理一对多映射处理 动态SQLM…