HTML Flex 布局

news/2024/3/29 3:09:59/文章来源:https://blog.csdn.net/jg_csdn/article/details/129174785

基本概念

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称“容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称“项目”。容器默认存在两根轴,分别为水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫做 cross start,结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。如下图所示:

 ps:您可以通过将元素的 display 属性设置为 flex(生成块级 flex 容器)或 inline-flex(生成类似 inline-block 的行内块级 flex 容器)。当一个元素设置了 Flex 布局以后,其子元素的 float、clear 和 vertical-align 等属性将失效。

支持属性

display

指定 HTML 元素的盒子类型

flex-direction

指定弹性盒子中子元素的排列方式

属性值:

row默认值,主轴沿水平方向从左到右
row-reverse主轴沿水平方向从右到左
column主轴沿垂直方向从上到下
column-reverse主轴沿垂直方向从下到上
initial将此属性设置为属性的默认值
inherit从父元素继承此属性的值

<!DOCTYPE html>
<html lang="en">
<head><style>#main {border: 1px solid #CCC;padding: 5px;position: relative;}.row, .row_reverse, .column, .column_reverse{display: flex;margin-bottom: 5px;}.row {flex-direction: row;}.row_reverse {flex-direction: row-reverse;}.column {flex-direction: column;}.column_reverse {flex-direction: column-reverse;position: absolute;top: 120px;left: 400px;}.row div, .row_reverse div, .column div, .column_reverse div {width: 50px;height: 50px;border: 1px solid black;}</style>
</head>
<body><div id="main"><div class="row"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div></div><div class="row_reverse"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div></div><div class="column"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div></div><div class="column_reverse"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div></div></div>
</body>
</html>

 

flex-wrap

设置当弹性盒子的子元素(项目)超出父容器时是否换行,属性的可选值如下:

nowrap默认值,表示项目不会换行
wrap表示项目会在需要时换行
wrap-reverse表示项目会在需要时换行,但会以相反的顺序
initial将此属性设置为属性的默认值
inherit从父元素继承属性的值
<!DOCTYPE html>
<html lang="en">
<head><style>#main {border: 1px solid #CCC;padding: 5px;}.nowrap, .wrap, .wrap_reverse {display: flex;flex-direction: row;margin-bottom: 15px;}.nowrap {flex-wrap: nowrap;}.wrap {flex-wrap: wrap;}.wrap_reverse {flex-wrap: wrap-reverse;}.nowrap div, .wrap div, .wrap_reverse div {width: 70px;height: 50px;border: 1px solid black;}</style>
</head>
<body><div id="main"><div class="nowrap"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></div><div class="wrap"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></div><div class="wrap_reverse"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></div></div>
</body>
</html>

 

flex-flow

属性是 flex-direction 和 flex-wrap 两个属性的简写,如:

flex-flow: flex-direction flex-wrap;
<!DOCTYPE html>
<html lang="en">
<head><style>.flex_flow {display: flex;flex-flow: row-reverse wrap;}.flex_flow div {width: 60px;height: 60px;margin-bottom: 5px;border: 1px solid black;}</style>
</head>
<body><div class="flex_flow"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></div>
</body>
</html>

 

justify-content

 设置弹性盒子中元素在主轴(横轴)方向上的对齐方式,属性的可选值如下

flex-start默认值,左对齐
flex-end右对齐
center居中
space-between两端对齐,项目之间的间隔是相等的
space-around每个项目两侧的间隔相等
initial将此属性设置为属性的默认值
inherit从父元素继承属性的值
<!DOCTYPE html>
<html lang="en">
<head><style>.flex {display: flex;flex-flow: row wrap;margin-top: 10px;}.flex div {width: 60px;height: 60px;margin-bottom: 5px;border: 1px solid black;}.flex-start {justify-content: flex-start;}.flex-end {justify-content: flex-end;}.center {justify-content: center;}.space-between {justify-content: space-between;}.space-around  {justify-content: space-around;}</style>
</head>
<body><div class="flex flex-start"><div>A</div><div>B</div><div>C</div><div>D</div></div><div class="flex flex-end"><div>A</div><div>B</div><div>C</div><div>D</div></div><div class="flex center"><div>A</div><div>B</div><div>C</div><div>D</div></div><div class="flex space-between"><div>A</div><div>B</div><div>C</div><div>D</div></div><div class="flex space-around"><div>A</div><div>B</div><div>C</div><div>D</div></div>
</body>
</html>

 

align-items

设置弹性盒子中元素在侧轴(纵轴)方向上的对齐方式,属性的可选值如下:

stretch默认值,项目将被拉伸以适合容器
center项目位于容器的中央
flex-start项目位于容器的顶部
flex-end项目位于容器的底部
baseline项目与容器的基线对齐
initial将此属性设置为属性的默认值
inherit从父元素继承属性的值

 

align-content

与 justify-content 属性类似,可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式,属性的可选值如下

stretch默认值,将项目拉伸以占据剩余空间
center项目在容器内居中排布
flex-start项目在容器的顶部排列
flex-end项目在容器的底部排列
space-between多行项目均匀分布在容器中,其中第一行分布在容器的顶部,最后一行分布在容器的底部
space-around多行项目均匀分布在容器中,并且每行的间距(包括离容器边缘的间距)都相等
initial将此属性设置为属性的默认值
inherit从父元素继承该属性的值

 

order

设置项目在容器中出现的顺序

<!DOCTYPE html>
<html lang="en">
<head><style>.flex {display: flex;flex-flow: row wrap;margin-top: 10px;}.flex div {width: 60px;height: 60px;margin-bottom: 5px;border: 1px solid black;}.flex div:nth-child(1) {order: 5;}.flex div:nth-child(2) {order: 3;}.flex div:nth-child(3) {order: 1;}.flex div:nth-child(4) {order: 2;}.flex div:nth-child(5) {order: 4;}</style>
</head>
<body><div class="flex"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div></div>
</body>
</html>

align-self

align-self

允许您为某个项目设置不同于其它项目的对齐方式,该属性可以覆盖 align-items 属性的值。align-self 属性的可选值如下:

auto默认值,表示元素将继承其父容器的 align-items 属性值,如果没有父容器,则为“stretch”
stretch项目将被拉伸以适合容器
center项目位于容器的中央
flex-start项目位于容器的顶部
flex-end项目位于容器的底部
baseline项目与容器的基线对齐
initial将此属性设置为属性的默认值
inherit从父元素继承属性的值
<!DOCTYPE html>
<html lang="en">
<head><style>.flex {display: flex;flex-flow: row wrap;align-items: flex-end;border: 1px solid #CCC;height: 150px;}.flex div {width: 60px;height: 60px;border: 1px solid black;}.flex div:nth-child(4) {align-self: flex-start;}</style>
</head>
<body><div class="flex"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div></div>
</body>
</html>

 

 

flex

flex-grow、flex-shrink 和 flex-basis 三个属性的简写,语法格式如下:

flex: flex-grow flex-shrink flex-basis;

参数说明如下:

  • flex-grow:(必填参数)一个数字,用来设置项目相对于其他项目的增长量,默认值为 0;
  • flex-shrink:(选填参数)一个数字,用来设置项目相对于其他项目的收缩量,默认值为 1;
  • flex-basis:(选填参数)项目的长度,合法值为 auto(默认值,表示自动)、inherit(表示从父元素继承该属性的值) 或者以具体的值加 "%"、"px"、"em" 等单位的形式。


另外,flex 属性还有两个快捷值,分别为 auto(1 1 auto)和 none(0 0 auto)。

<!DOCTYPE html>
<html lang="en">
<head><style>.flex {display: flex;flex-flow: row wrap;align-items: flex-end;border: 1px solid #CCC;}.flex div {width: 60px;height: 60px;border: 1px solid black;}.flex div:nth-child(2) {flex:0;}.flex div:nth-child(4) {flex:1 1 auto;}</style>
</head>
<body><div class="flex"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div></div>
</body>
</html>

 

flex-grow

设置弹性盒子的扩展比率

flex-shrink

设置弹性盒子的收缩比率

flex-basis

设置弹性盒子伸缩基准值

参考文献

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

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

相关文章

JavaSE之常用关键字学习

文章目录Java常用关键字学习1、static关键字学习1.1 用法一&#xff1a;修饰成员变量1.2 用法二&#xff1a;修饰成员方法1.3 用法三&#xff1a;修饰代码块1.4 用法四&#xff1a;修饰内部类类1.5 单例设计模式2、extends关键字学习2.1 继承的特点2.2 方法重写3、this、super关…

基于Comsol的花瓣形穿孔微穿孔板的吸声理论仿真

研究背景&#xff1a; 为了抑制噪声污染&#xff0c;已经开发了许多吸声材料和结构。传统的吸声材料&#xff0c;如开孔泡沫和纤维棉&#xff0c;随着时间的推移会劣化&#xff0c;因为小颗粒常常从这些多孔材料的骨架中脱落。此外&#xff0c;脱落的小颗粒可能污染建筑物内的…

立项近7年,索尼产品经理分享PS VR2开发背后的故事

备受期待的索尼PS VR2终于正式发售&#xff0c;VR爱好者们终于有机会体验到《地平线&#xff1a;山之呼唤》等PS VR2独占的VR大作。近期&#xff0c;为了解PS VR2头显诞生背后的故事&#xff0c;外媒AV Watch采访到PS VR2的开发负责人Yasuo Takahashi&#xff0c;在本次采访中&…

面试题-----JDBC单例模式(懒汉式和饿汉式)

1.单例概念 作为一种常见的设计模式&#xff0c;单例模式的设计概念是"两个私有,一个公有",即私有属性/成员变量和私有构造,以及公有方法,常用于在整个程序中仅调用一次的代码。 2.具体操作 从单例模式的描述来看,单例模式并不能用于多次频繁调用的设计中,而更适用…

剑指 Offer 55 - I. 二叉树的深度

摘要 剑指 Offer 55 - I. 二叉树的深度 一、深度优先搜索 如果我们知道了左子树和右子树的最大深度l和r&#xff0c;那么该二叉树的最大深度即为&#xff1a;max(l,r)1。 而左子树和右子树的最大深度又可以以同样的方式进行计算。因此我们可以用「深度优先搜索」的方法来计…

校园学生翻墙打架识别检测系统 yolov7

校园学生翻墙打架识别检测系统通过yolov7网络模型深度学习分析技术&#xff0c;校园学生翻墙打架识别检测算法可以对&#xff1a;打架行为、倒地行为识别、人员拥挤行为、攀高翻墙违规行为等违规行为进行实时分析检测。YOLOv7 的发展方向与当前主流的实时目标检测器不同&#x…

动手学深度学习v2—01数据操作+数据预处理

[TOC]此次用到的虚拟环境&#xff1a;pytorchmwy项目名称&#xff1a;limuAI所需框架和工具&#xff1a;pytorch&#xff0c;pandas一、创建CSV文件所需工具&#xff1a;pandas在与项目同等目录下创建一个文件夹名为data&#xff0c;其中文件名称为house_tiny.csv。代码如下&am…

随想录二刷 (双指针法) leetcode 27 26 283 844

双指针法的原理 双指针法相对于暴力解法的优点有以下几点 暴力遍历的时间复杂度会比较高双指针法利用两个指针进行遍历完成双层循环所做的事情 双指针一般有两种方法 同向指针&#xff0c;双向指针 第一题 leetcode 27 移除元素 题目描述 题目分析 采用暴力遍历可以得出结…

高效制作知识库的软件工具,这6个都很不错哦!

任何工作流程都离不开文档管理&#xff0c;因此文档管理也是企业数字化转型中的重要环节。面对复杂的业务流程、频繁的文档编辑任务和跨区域的文件共享需求&#xff0c;优秀的文档管理体系能够帮助企业实现安全的文档存储&#xff0c;高效的文档搜索&#xff0c;便捷的文档协作…

(一)Spring-Cloud源码分析之核心流程关系及springcloud与springboot包区别(新)

文章目录1. 前言2. springcloud简介3. Springcloud包简介4. Springcloud和Springboot流程关系5. Springcloud启动流程新增的功能和接口5.1 新增接口5.2 新增功能类5.2.1 spring-cloud-context包5.2.2 spring-cloud-commons包6. Springcloud实现机制带来的问题7. Springcloud和S…

深入浅出C++ ——手撕红黑树

文章目录一、红黑树的概念二、红黑树的性质三、红黑树节点的定义四、红黑树的插入操作五、红黑树的验证五、红黑树的删除六、红黑树与AVL树的比较七、红黑树的应用八、红黑树模拟实现一、红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存…

Typecho COS插件实现网站静态资源存储到COS,降低本地存储负载

Typecho 简介Typecho 是一个简单、强大的轻量级开源博客平台&#xff0c;用于建立个人独立博客。它具有高效的性能&#xff0c;支持多种文件格式&#xff0c;并具有对设备的响应式适配功能。Typecho 相对于其他 CMS 还有一些特殊优势&#xff1a;包括可扩展性、不同数据库之间的…

(二十五)、实现评论功能(5)【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】

1&#xff0c;实现二级回复的入库操作 1.1 两个子组件&#xff08;comment-item和comment-frame&#xff09;与父组件reply之间的属性传值 comment-item&#xff1a; props: {item: {type: Object,default () {return {}}}},comment-frame&#xff1a; props: {commentObj: {…

儿童饰品发夹发卡出口美国办理什么认证?

亚马逊美国站上传新产品&#xff0c;很多时候都是需要类目审核的&#xff0c;后台给出要求提供认证&#xff0c;产品类目不同&#xff0c;所需要提供的认证证书是不一样&#xff0c;儿童产品需要提交的是CPC认证&#xff0c;玩具&#xff0c;母婴用品&#xff0c;儿童书包&…

PDF文件怎么转图片格式?转换有技巧

PDF文件有时为了更美观或者更直观的展现出效果&#xff0c;我们会把它转成图片格式&#xff0c;这样不论是归档总结还是存储起来都会更为高效。有没有合适的转换方法呢&#xff1f;这就来给你们罗列几种我个人用过体验还算不错的方式&#xff0c;大家可以拿来参考一下哈。1.用电…

Apifox = Postman + Swagger + Mock + JMeter

目录 可视化API设计 高效 & 零学习成本 可复用的“数据模型” 遵循 OpenAPI(Swagger) 规范 可导入 Swagger 等 20 数据格式 具体使用尝鲜 多项目管理 支持多环境切换 支持IDEA、浏览器、桌面应用 Idea插件 公共API hub库 如题&#xff1a;一款非常好用的API管理测…

Wi-Fi 7技术揭秘

引言 2022年4月7日&#xff0c;紫光股份旗下新华三集团全球首发企业级智原生Wi-Fi 7 AP新品 WA7638和WA7338。仅在同年的6月15日&#xff0c;在东京举行的第29届日本网络通信展览会&#xff08;Interop Tokyo 2022&#xff0c;简称Interop展&#xff09;中&#xff0c;WA7638就…

D1s RDC2022纪念版开发板开箱评测及点屏教程

作者new_bee 本文转自&#xff1a;https://bbs.aw-ol.com/topic/3005/ 目录 芯片介绍开发板介绍RT-Smart用户态系统编译使用感想引用 1. 芯片介绍 RISC-V架构由于其精简和开源的特性&#xff0c;得到业界的认可&#xff0c;近几年可谓相当热门。操作系统方面有RT-Thread&am…

Firebase常用功能和官方Demo简介

一、Firebase简介Firebase刚开始是一家实时后端数据库创业公司&#xff0c;它能帮助开发者很快的写出Web端和移动端的应用。自2014年10月Google收购Firebase以来&#xff0c;用户可以在更方便地使用Firebase的同时&#xff0c;结合Google的云服务。现在的Firebase算是谷歌旗下的…

模拟信号4-20mA /0-5V/0-75mV/0-100mV转RS-485/232,数据采集A/D转换模块 YL21

特点&#xff1a;● 模拟信号采集&#xff0c;隔离转换 RS-485/232输出● 采用12位AD转换器&#xff0c;测量精度优于0.1%● 通过RS-485/232接口可以程控校准模块精度● 信号输入 / 输出之间隔离耐压3000VDC ● 宽电源供电范围&#xff1a;8 ~ 32VDC● 可靠性高&#xff0c;编程…