01flex布局

flex 布局 使用方式

容器

也称弹性盒子,可以根据屏幕大小自动适应,只有一个;

子项目

容器内的直接子元素,可以有多个

主轴

Flex容器的主要方向,由 flex-direction 属性定义。可以是水平方向(rowrow-reverse)或垂直方向(columncolumn-reverse)。

交叉轴

与主轴垂直的轴线

响应式布局:

Flexbox可以很好地用于创建响应式布局,因为它可以自动调整项目的大小和位置。

容器上的属性

display: 定义盒子为一个flex 容器

flex | inline-flex

flex-direction 定义主轴的方向。

row | row-reverse | column | column-reverse

justify-content 定义Flex项目在主轴上的对齐方式。

flex-start | flex-end | center | space-between | space-around

默认主轴情况下,左右的对齐方式

align-items 定义Flex项目在交叉轴上的对齐方式。

flex-start | flex-end | center | baseline | stretch

默认主轴情况下,上线的对齐方式

align-self 允许Flex项目自己在交叉轴上对齐方式。

auto | flex-start | flex-end | center | baseline | stretch

align-items 定义容器内所有的item,align-self 可以定义单独的一个

flex-wrap 控制Flex容器是否在一条轴线上排列,还是换到下一行或列。

nowrap | wrap | wrap-reverse

align-content 定义多轴线的对齐方式。

flex-start | flex-end | center | space-between | space-around | stretch

align-content 是描述多行的情况下,每一行的对齐方式;justify-content 每一个item的对齐方式

子项目上的属性

order 定义项目的排列顺序。

主要是修改前后顺序 , 原来是 1 - 2 - 3 排列顺序 , 可以将其改为 2 - 1 - 3 排列顺序 ;

div span:nth-child(2) {/* 将其 顺序设置为 -1 , 其它所有的元素的 order 属性都是 默认值 0 该属性会排在最前面 */order: -1;}

flex-grow 定义项目的放大比例。

默认是0, 可设置为一个非负数

用于定义在有剩余空间时,flex容器中的flex项应该如何分配这些额外的空间

flex-shrink 定义项目的缩小比例。

默认是1, 可设置为一个非负数

用于定义在空间不足时,flex容器中的flex项应该如何缩小

flex-basis 定义项目在主轴上的初始大小。

定义项目在主轴上的初始大小,像widthheigth类型,可以设置px 值,也可以安装容器的百分比

Flex布局的简写属性:

默认值: 0 1 auto

flex 简写属性,包含 flex-grow, flex-shrink, 和 flex-basis

flex flex-basis width的优先级
#container >span {background-color: green;flex: 0 1 300px;flex-basis: 250px;width: 200px;
}

flex 优先级最高,其次 flex-basis,最后是width

如果容器大小不够,会自动分配,自适应大小flex 、 flex-basis 、width 将不生效

Flex容器的横向和纵向居中:
  1. 横向居中: 使用 justify-content: center;

  2. 纵向居中: 使用 align-items: center;

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

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

相关文章

Qt OpenGL中渲染和画图的相互理解

在Qt编程(或者别的图形编程中),我们很容易理解画图,一般用draw之类的函数,画圆,画线,画点,画复杂图形,画图片等2D图形。 在某种程度上,渲染和画图可以理解为相似的概念,都是将图形或图像呈现在屏幕上的过程。所以我们也可以说3D渲染其实就是3D画图。但是呢,这样表…

【SQL】加快SQL查询的九种优秀实践

1.只检索需要的列 对于那些所谓的数据库开发老司机而言,他们会有一个常见的SQL习惯:在编写查询代码时,频繁地使用SELECT *,一次性列出所有可能需要的数据列。显然,如果查询一个存储了一百多列的数据表的所有列,您可以想象会发生什么?毕竟在真实的系统应用环境中,这样的…

Vue知识总结-中

VUE-生命周期 生命周期概述 生命周期也常常被称为生命周期回调函数/生命周期函数/生命周期钩子生命周期是Vue在关键时刻帮我们调用的一些特殊名称的函数生命周期函数的名字不能更改,但函数的具体内容是由我们程序员自己编写的生命周期函数中的this指向是vm或组件实例对象 生命周…

【软件测试】学习笔记-如何做好测试计划

本篇文章将为你介绍一份成功的测试计划应该包含哪些内容,以及如何才能做好测试计划。 软件项目,通常都会有详细的项目计划。软件测试作为整个项目中的重要一环,也要执行详细的测试计划。正所谓运筹帷幄之中,决胜千里之外&#xf…

【开题报告】基于微信小程序的母婴商品仓库管理系统的设计与实现

1.选题背景 随着社会经济的发展和家庭生活水平的提高,母婴商品市场逐渐兴起。然而,传统的母婴商品仓库管理方式存在着许多问题,如信息不透明、操作繁琐等。为了提高仓库管理的效率和准确性,基于微信小程序的母婴商品仓库管理系统…

Pointnet++损失函数改进:Focalloss | 助力解决正负样本比例不均衡问题

简介:1.该教程提供大量的首发改进的方式,降低上手难度,多种结构改进,助力寻找创新点!2.本篇文章对Pointnet++特征提取模块进行改进,加入Focalloss损失函数,解决正负样本比例不均衡问题。3.专栏持续更新,紧随最新的研究内容。 目录 1.理论介绍 2.修改步骤 2.1 步骤一…

解决在test以外的目录下导入junit无效

以上引用来自src目录下的文件,可以看到,和junit有关的导入都飘红,但明明junit已经被正确导入进了项目中。 再看右侧的Maven的依赖下方,junit的右边有一个很不起眼的(test) 这是因为junit作为测试框架,可能包含仅适用于…

杰发科技AC7840——CAN通信简介(2)

1.时钟频率 2.位时间 3.采样点 4.消息缓冲区 和ST、NXP的邮箱类似,AutoChips用了缓冲区的概念。 5.接收缓冲区 屏蔽掉demo程序的发送,只看接收情况 在回调中接收数据 先判断是不是进了接收中断 接收数据的处理函数 所有buff数据放到Info buff的内容 BUF…

NumPy 高级教程——性能优化

Python NumPy 高级教程:性能优化 在处理大规模数据集或进行复杂计算时,性能是关键的考虑因素。NumPy 提供了一些工具和技巧,帮助用户优化代码以提高执行效率。在本篇博客中,我们将深入介绍 NumPy 中的性能优化技术,并…

css_auto的用法

<div style"display: flex; justify-content: center;"><div style"margin-right: auto;"></div><div>其他元素</div> </div>auto到底是什么意思&#xff0c;为什么可以让父div中的子div向左边对齐&#xff1f; auto是…

数据结构与算法Python版:基数排序

简介&#xff1a;基数排序&#xff08;radix sort&#xff09;属于“分配式排序”&#xff08;distribution sort&#xff09;&#xff0c;又称“桶子法”&#xff08;bucket sort&#xff09;或bin sort&#xff0c;顾名思义&#xff0c;它是透过键值的部份资讯&#xff0c;将…

1872_S32K344 MCU基本信息了解

全部学习汇总&#xff1a; GreyZhang/g_s32k344: A new MCU learning notes. I would try to use MCAL instead of SDK. (github.com) 以下的摘录信息来自&#xff1a; S32K Auto General-Purpose MCUs | NXP Semiconductors 安全等级可以到ASIL D。 M7的内核&#xff0c;主频可…

深入理解并解析Flutter Widget

文章目录 完整代码程序入口构建 Widget 结构定义 widget 状态定义 widget UI获取上下文关于build()build() 常用使用 完整代码 import package:english_words/english_words.dart; import package:flutter/material.dart; import package:provider/provider.dart;void main() …

抖音在线查权重系统源码,附带查询接口

抖音权重在线查询只需输入抖音主页链接&#xff0c;即可查询作品情况。 搭建教程 上传源码并解压 修改数据库“bygoukai.sql” 修改“config.php” 如需修改水印请修改第40行 如需修改限制次数&#xff0c;请修改第156行 访问域名user.php即可查看访问用户&#xff0c;停…

2023年度总结:技术沉淀、持续学习

2023年度总结&#xff1a;技术沉淀、持续学习 一、引言 今年是我毕业的第二个年头&#xff0c;也是完整的一年&#xff0c;到了做年终总结的时候了 这一年谈了女朋友&#xff0c;学习了不少技术&#xff0c;是充实且美好的一年&#xff01; 首先先看年初定的小目标&#xf…

第二次面试总结 - 宏汉科技 - Java后端开发

&#x1f9f8;欢迎来到dream_ready的博客&#xff0c;&#x1f4dc;相信您对博主首页也很感兴趣o (ˉ▽ˉ&#xff1b;) 博主首页&#xff0c;更多redis、java等优质好文以及各种保姆级教程等您挖掘&#xff01; 目录 总结 (非详细) 面试内容(提问内容) - 带答案 1、字符串相…

多文件上传

HTML中实现多文件上传是通过用<input type"file">元素的multiple属性&#xff0c;以下简单描述多文件上传的步骤 HTML表单准备&#xff0c;使用<input type"file">元素&#xff0c;并为其添加multiple属性&#xff0c;以允许用户选择多个文件…

管理系统-基于javaweb的图书管理系统

基于javaweb的图书管理系统 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; 本项目采用eclipse工具开发&#xff0c;jspservlet技术编写&#xff0c;样式采用了layui…

2022年全国职业院校技能大赛软件测试赛题卷②—自动化测试解析报告(含术语)

2022年全国职业院校技能大赛软件测试任务四 自动化测试 目录 第一题:按照以下步骤在PyCharm中进行自动化测试脚本编写,并执行脚本。

一、二进制方式 安装部署K8S

目录 一、操作系统初始化 1、关闭防火墙 2、关闭 SELinu 3、 关闭 swap 4、添加hosts 5、同步系统时间 二、集群搭建 —— 使用外部Etcd集群 1、自签证书 2、自签 Etcd SSL 证书 ① 创建 CA 配置文件&#xff1a;ca-config.json ② 创建 CA 证书签名请求文件&#xff…