弹性盒子布局，flex布局

弹性盒子布局（Flexbox）是CSS3引入的一种新的布局模式，它提供了一种更加有效的方式来设计、布局和对齐容器中的项目，即使容器的大小动态改变或者项目的数量未知。

弹性盒子布局的主要特点是能够轻松地在不同的屏幕大小和设备上实现一致的布局，通过为父容器（弹性容器）设置display: flex;或display: inline-flex;来定义。弹性容器内的子元素（弹性项）会自动成为容器的成员，并按照弹性盒子的规则进行布局。

弹性盒子布局有以下主要优点：

  1. 灵活性：弹性盒子布局可以轻松地适应不同屏幕尺寸和设备，无论是桌面设备还是移动设备。

  2. 方向性：可以设置主轴的方向（水平或垂直），从而决定弹性项是水平排列还是垂直排列。

  3. 对齐方式：可以轻松地在主轴和交叉轴上对齐弹性项，包括两端对齐、居中、空间分布等。

  4. 顺序调整：通过order属性，可以改变弹性项在容器中的排列顺序。

  5. 弹性：弹性项可以根据需要增长或缩小，以适应可用空间。

  6. 包裹：如果弹性项在主轴上超出了容器的空间，可以设置弹性容器是否允许弹性项换行显示。

弹性盒子布局由两部分组成：弹性容器（flex container）和弹性项（flex items）。弹性容器通过一系列CSS属性来控制其子元素（弹性项）的布局，而弹性项则自动成为容器的成员并遵循容器的布局规则。

在弹性盒子布局中，有一些关键的CSS属性，如flex-direction、justify-content、align-items、flex-wrap、flex-grow、flex-shrink和flex-basis等，这些属性可以用来控制弹性容器和弹性项的行为和外观。

总之，弹性盒子布局是一种强大而灵活的布局模式，可以帮助开发人员更轻松地创建适应性强、易于维护的网页布局。

flex术语

序号

简记术语
1二成员容器和项目(container / item)
2二根轴主轴与交叉轴(main-axis / cross-axis)

3

二根线起始线与结束线(flex-start / flex-end)

弹性容器属性

  1. flex-direction
    • 定义主轴的方向，即弹性项默认的排列方向。
    • 可选值：row（默认值，水平方向从左到右）、row-reverse（水平方向从右到左）、column（垂直方向从上到下）、column-reverse（垂直方向从下到上）。
  2. justify-content
    • 定义弹性项在主轴上的对齐方式。
    • 可选值：flex-start（默认值，起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，弹性项之间的间隔相等）、space-around（每个弹性项两侧的间隔相等）、space-evenly（弹性项之间的间隔和两侧的间隔都相等）。
  3. align-items
    • 定义弹性项在交叉轴上的对齐方式（当弹性项为单行时）。
    • 可选值：stretch（默认值，如果弹性项未设置高度或设为auto，将占满整个容器的高度）、flex-start、flex-end、center、baseline（以第一行文字的基线对齐）。
  4. flex-wrap
    • 定义弹性项是否换行显示。
    • 可选值：nowrap（默认值，不换行）、wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方）。
  5. align-content
    • 定义多行弹性项在交叉轴上的对齐方式（当弹性项换行时）。
    • 可选值与 align-items 类似，但额外支持 stretch（默认值，如果弹性项未设置高度或设为auto，将占满整个容器的高度，但仅适用于多行）。
  6. flex-flow
    • 简化flex-direction，flex-wrap属性

弹性项属性

  1. flex-grow
    • 定义弹性项的放大比例。默认为 0，表示不放大。如果有剩余空间，则根据所有弹性项的 flex-grow 值来分配剩余空间。
  2. flex-shrink
    • 定义弹性项的缩小比例。默认为 1，表示如果空间不足，该项目将缩小。如果有空间不足的情况，则根据所有弹性项的 flex-shrink 值来缩小项目。
  3. flex-basis
    • 定义弹性项在主轴上的初始大小。默认为 auto，表示项目的大小由其内容决定。
  4. flex
    • 是 flex-grow、flex-shrink 和 flex-basis 的简写属性，用于同时设置这三个值。例如，flex: 1 0 200px; 就等同于 flex-grow: 1; flex-shrink: 0; flex-basis: 200px;。
  5. order
    • 定义弹性项的排列顺序（整数，默认为0）。数值越小，排列越靠前。
  6. align-self
    • 允许单个弹性项覆盖由 align-items 设置的交叉轴对齐方式。可选值与 align-items 相同。

创建flex容器与项目

1.属性

display:flex                        创建flex块级容器

display:inline-flex              创建flex行内容器

主轴方向与多行容器

 <style>.container {width: 300px;height: 150px;background-color: pink;/* 可选值：row（默认值，水平方向从左到右）、row-reverse（水平方向从右到左）、column（垂直方向从上到下）、column-reverse（垂直方向从下到上）。 */display: flex;/* 设置主轴方向：水平方向 *//* flex-direction: row; *//* flex-direction: row-reverse; *//* 设置主轴方向：垂直方向 */flex-direction: column;/* flex-direction: column-reverse;  *//* 设置多行容器 *//* 可选值：nowrap（默认值，不换行）、wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方）。 *//* 默认单行容器，不允许换行显示，项目自动收缩适应容器大小 *//* flex-wrap: nowrap; */flex-wrap: wrap;}.item {width: 100px;height: 50px;background-color: lightcyan;}</style>
</head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</body>

主轴项目对齐方式

 <style>.container {width: 300px;height: 150px;background-color: pink;display: flex;/* 默认从主轴的起始线排列 */justify-content: flex-start;/* 对齐到终止线 */justify-content: flex-end;/* 对齐到主轴的中间线，居中对齐 */justify-content: center;/* 两端对齐  剩余空间在头尾项目之外的项目间平均分配 */justify-content: space-between;/* 分散对齐  剩余空间在每个项目之间平均分配*/justify-content: space-around;/* 平均对齐 */justify-content: space-evenly;}.item {width: 50px;height: 50px;background-color: lightcyan;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div></body>

交叉轴项目对齐方式

<style>/* 可选值：stretch（默认值，如果弹性项未设置高度或设为auto，将占满整个容器的高度）、flex-start、flex-end、center、baseline（以第一行文字的基线对齐）。 */.container {width: 300px;height: 150px;background-color: pink;display: flex;/* 主轴为水平方向 */flex-flow: row nowrap;/* 默认：从交叉轴的起始线开始排列，对齐到起始线 */align-items: flex-start;/* 对齐到终止线 */align-items: flex-end;/* 居中对齐 */align-items: center;}.item {width: 50px;height: 50px;background-color: lightcyan;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div></body>

多行容器项对齐方式

<style>.container {width: 300px;height: 400px;background-color: pink;display: flex;/* 主轴为水平方向 */flex-flow: row wrap;/* 默认 */align-content: stretch;/* 与起始线对齐 */align-content: flex-start;/* 与终止线对齐 */align-content: flex-end;/* 居中对齐 */align-content: center;/* 两端对齐 */align-content: space-between;/* 分散对齐 */align-content: space-around;/* 平均对齐 */align-content: space-evenly;}.item {width: 100px;height: 50px;background-color: lightcyan;}
</style>
</head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div></div>
</body>

设置单个项目在交叉轴上的对齐方式

<style>.container {width: 300px;height: 200px;background-color: pink;display: flex;}.item {width: 100px;height: 50px;background-color: lightcyan;}.item:first-child {align-self: flex-start;/* auto 是默认值，继承的是容器中的align-items */align-self: auto;}.item:nth-child(2) {/* 第二个项目与中间线对齐 */align-self: center;}.item:nth-child(3) {/* 第三个项目拉伸 */align-self: stretch;}.item:last-child {/* 和基线对齐 *//* 所有项目基线对齐才会有效果 */align-self: baseline;}
</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</body>

设置单个项目的排列顺序

<style>.container {width: 300px;height: 200px;background-color: pink;display: flex;}.item {width: 100px;height: 50px;background-color: lightcyan;}/* order数值越小顺序越靠前 ,默认为0，按照书写顺序*/.item:first-child {order: 2;}.item:nth-child(2) {order: -1;}.item:last-child {order: 0;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>

单个项目的放大因子

<style>.container {width: 300px;height: 200px;background-color: pink;display: flex;}.item {width: 50px;height: 50px;background-color: lightcyan;}/* 默认值为0 */放大比列计算方法/* 1.计算出需要分配的主轴上剩余空间：300 - (50*3) *//* 2.计算放大因子：(0 + 1 + 2) = 3 *//* 将剩余空间150px分成三等分 150 / 3 *//* 第一个：50  + (0 * 50) = 50第二个：50 + (1 * 50) = 100第三个：50 + (2 * 50) = 150 */.item:first-child {flex-grow: 0;}.item:nth-child(2) {flex-grow: 1;}.item:last-child {flex-grow: 2;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>

单个项目的收缩因子

<style>.container {width: 300px;height: 200px;background-color: pink;display: flex;/* flex-wrap: wrap; */}.item {width: 150px;height: 50px;background-color: lightcyan;}.item:first-child {flex-shrink: 0;}.item:nth-child(2) {flex-shrink: 1;}.item:last-child {flex-shrink: 2;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body><style>.container {width: 300px;height: 200px;background-color: pink;display: flex;/* flex-wrap: wrap; */}.item {width: 150px;height: 50px;background-color: lightcyan;}.item:first-child {flex-shrink: 0;}.item:nth-child(2) {flex-shrink: 1;}.item:last-child {flex-shrink: 2;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>

设置项目在主轴上的计算基准尺寸

<style>.container {width: 300px;height: 200px;background-color: pink;display: flex;flex-wrap: wrap;}.item {width: 50px;height: 50px;background-color: lightcyan;/* 默认 *//* flex-basis: auto; *//* flex-basis设置的值会覆盖掉原始项目的值 */flex-basis: 80px;/* min-width的值会覆盖掉flex-basis的值 */min-width: 90px;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>

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

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

相关文章

使用VCPKG编译并使用Qt5

使用VCPKG编译并使用Qt5

一、背景 Qt就不介绍了。VCPKG可以看这里VCPKG资料记录_vcpkg boost 多久-CSDN博客 为什么搞Qt5而不是Qt6&#xff1f;因为Qt5比较稳定吧。而且我公司也是用的Qt5。 为什么要自己编译而不是去下载Qt5&#xff1f; 第一&#xff0c;因为Qt5在Qt在线安装版本只提供到Qt5.15.2&…
阅读更多...
【CTF Web】CTFShow web3 Writeup（SQL注入+PHP+UNION注入）

【CTF Web】CTFShow web3 Writeup（SQL注入+PHP+UNION注入）

web3 1 管理员被狠狠的教育了&#xff0c;所以决定好好修复一番。这次没问题了。 解法 注意到&#xff1a; <!-- flag in id 1000 -->但是拦截很多种字符。 if(preg_match("/or|\-|\\|\*|\<|\>|\!|x|hex|\/i",$id)){die("id error"); }使用…
阅读更多...
Linux驱动设备导论（1）

Linux驱动设备导论（1）

最近本人在学习Linux驱动&#xff0c;本系列教程是本人在一边学习&#xff0c;一边总结的系列教程&#xff0c;希望能够给很多刚学驱动小伙伴一些总结。 1.Linux设备分类 驱动针对的对象是存储器和外设&#xff0c;不是针对CPU&#xff0c;可以分为以下三大类&#xff1a; 1.…
阅读更多...
『Stable Diffusion 』AI绘画，不会写提示词怎么办？

『Stable Diffusion 』AI绘画，不会写提示词怎么办？

提示词 有没有想过&#xff0c;为什么你用 SD 生成的猫是长这样的。 而其他人可以生成这样的猫。 虽然生成的都是猫&#xff0c;但猫与猫之间还是有差距的。 如果你的提示词只是“cat”&#xff0c;那大概率就会出现本文第一张图的那个效果。而如果你加上一些形容词&#xff…
阅读更多...
C#应用的用户配置窗体方案 - 开源研究系列文章

C#应用的用户配置窗体方案 - 开源研究系列文章

这次继续整理以前的代码。本着软件模块化的原理&#xff0c;这次笔者对软件中的用户配置窗体进行剥离出来&#xff0c;单独的放在一个Dll类库里进行操作&#xff0c;这样在其它应用程序里也能够快速的复用该类库&#xff0c;达到了快速开发软件的效果。 笔者其它模块化应用的例…
阅读更多...
SQL面试题练习 —— 波峰波谷

SQL面试题练习 —— 波峰波谷

来源&#xff1a;字节今日头条 目录 1 题目2 建表语句3 题解 1 题目 有如下数据&#xff0c;记录每天每只股票的收盘价格&#xff0c;请查出每只股票的波峰和波谷的日期和价格&#xff1b; 波峰定义&#xff1a;股票价格高于前一天和后一天价格时为波峰 波谷定义&#xff1a;股…
阅读更多...
在linux下的ROS中下载超级终端Terminator ROS开发得力助手

在linux下的ROS中下载超级终端Terminator ROS开发得力助手

在一般我们运行机器人包时要打开三个终端来运行&#xff0c;关闭时还要一个一个关闭&#xff08;ctrlc&#xff09;过于麻烦 现在下载用了terminator后&#xff0c;就支持一键关闭多个终端了&#xff0c;很方便&#xff0c;具体操作如下&#xff1a; sudo apt install termin…
阅读更多...
JDBCTemplate介绍

JDBCTemplate介绍

Spring JDBC Spring框架对Spring的简单封装。提供一个JDBCTemplate对象简化JDBC开发 *步骤&#xff1a; 1、导入jar包 2、创建JDBCTemplate对象。依赖于数据源DataSource *JdbcTemplate templatenew JdbcTemplate(ds); 3、调用JdbcTemplate的方法来完成CRUD的操作 *update()&…
阅读更多...
中国企业出海，哪些业务需要负载均衡？

中国企业出海，哪些业务需要负载均衡？

国内企业出海的进程正在加速。中国的出海企业剑指跨境电商、社交、游戏、短剧等市场&#xff0c;其中尤其以跨境电商的数据最为突出。据官方数据&#xff0c;2023年我国跨境电商进出口总额达到2.38万亿元&#xff0c;比2016年增长近50倍&#xff0c;占货物贸易总规模的5.7%。 …
阅读更多...
2024-5-9-从0到1手写配置中心Config之@ConfigurationProperties热更新

2024-5-9-从0到1手写配置中心Config之@ConfigurationProperties热更新

在PropertySourcesProcessor中&#xff0c;需要通过http从config-server获取配置。 使用ConfigMeta包装服务信息 在MidnightConfigService接口中添加默认实现类 继承MidnightRepositoryChangeListener接口&#xff1b;获取默认的MidnightRepository&#xff1b;创建MidnightCo…
阅读更多...
xcode配置快速打开终端命令行工具教程

xcode配置快速打开终端命令行工具教程

以往我们使用idea编辑器或者vscode编辑器的时候&#xff0c;我们可以快速的在编辑器下面打开终端进行相关的操作&#xff0c;但是在xcode里面却没有这么方便的功能按钮&#xff0c;真的不是很习惯&#xff0c;所以这次就来给xcode配置这么一个方便的功能。 idea的Terminal 这…
阅读更多...
2024年蓝桥杯Web开发【大赛大纲】15届

2024年蓝桥杯Web开发【大赛大纲】15届

一、 组别 Web应用开发分为&#xff1a;大学组和职业院校组。 每位选手只能申请参加其中一个组别的竞赛。各个组别单独评奖。 研究生和本科生只能报大学组。 其它高职高专院校可自行选择报任意组别。 二. 竞赛赛程 省赛时长&#xff1a;4小时。 决赛时长&#xff1a;4小…
阅读更多...
SpringCloud微服务04-Elasticsearch-DSL查询-聚合

SpringCloud微服务04-Elasticsearch-DSL查询-聚合

一、Elasticsearch 搜索引擎&#xff0c;响应速度非常快&#xff0c;特别是对大数据量的情况 1.初始elasticsearch 如果只需要商品搜索&#xff0c;百度这种搜索网站&#xff0c;只需要第二个就够了 docker部署&#xff1a;day08-Elasticsearch - 飞书云文档 (feishu.cn) e…
阅读更多...
【Andoird开发】android获取蓝牙权限，搜索蓝牙设备MAC

【Andoird开发】android获取蓝牙权限，搜索蓝牙设备MAC

<!-- Android 12以下才需要定位权限&#xff0c; Android 9以下官方建议申请ACCESS_COARSE_LOCATION --><uses-permission android:name"android.permission.ACCESS_COARSE_LOCATION" /><uses-permission android:name"android.permission.ACCES…
阅读更多...
创建FreeRTOS工程

创建FreeRTOS工程

创建STM32CubeMX工程 配置时钟 配置FreeRTOS 生成Keil MDK的工程 打开工程 结尾 这就是我们用STM32CubeMX创建的最基本的一个FreeRTOS的工程。可以看到&#xff0c;这个与我们使用stm32开发的裸机程序有相同的地方&#xff0c;也有不同的地方&#xff0c;我们可以发现&am…
阅读更多...
MySQL 8.4.0 LTS 变更解析：I_S 表、权限、关键字和客户端

MySQL 8.4.0 LTS 变更解析：I_S 表、权限、关键字和客户端

↑ 关注“少安事务所”公众号&#xff0c;欢迎⭐收藏&#xff0c;不错过精彩内容~ MySQL 8.4.0 LTS 已经发布 &#xff0c;作为发版模型变更后的第一个长期支持版本&#xff0c;注定要承担未来生产环境的重任&#xff0c;那么这个版本都有哪些新特性、变更&#xff0c;接下来少…
阅读更多...
Sui生态DeFi项目Cetus和Aftermath宣布启动孵化器

Sui生态DeFi项目Cetus和Aftermath宣布启动孵化器

Sui DeFi中的去中心化交易所Cetus和Aftermath Finance联合Sui基金会宣布启动新的孵化器&#xff0c;为初创项目提供更多可行性途径。这两个DeFi项目在Sui上有着较长的历史&#xff0c;自去年一同与主网推出以来&#xff0c;目前在TVL方面位居前五。这两个项目的持久性和成功使它…
阅读更多...
curl: (60) SSL certificate problem: self-signed certificat

curl: (60) SSL certificate problem: self-signed certificat

目录&#xff1a; 1、背景2、测试结果 1、背景 今天帮忙客户排查问题&#xff0c;报错请求超时&#xff0c;但是ping客户的ip以及测试端口都是通的&#xff0c;最终不得不从中台服务器上发起请求客户回调接口&#xff0c;报错如下&#xff1a; 怀疑是客户的证书有问题&#xf…
阅读更多...
C语言.数据结构.顺序表

C语言.数据结构.顺序表

1.顺序表的概念及结构 1.1线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串… 线性表在逻辑上是线性结构&#xff0c;…
阅读更多...
闲鱼电商运营高级课程，一部手机学会闲鱼开店赚钱（34节课）

闲鱼电商运营高级课程，一部手机学会闲鱼开店赚钱（34节课）

课程目录 1&#xff0c;闲鱼更货出售主要核心原理.mp4 2、闲鱼前期开店准备.mp4 3.账号基础信息设置1.mp4 4、提升账号权重.mp4 5、注意避免违规行为.mp4 6、实接课 应该怎么选择爆款产品.mp4 7、分析商品的闲鱼市场.mp4 8、寻找最低价货源.mp4 9、怎么寻我优质的货源…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023