CSS盒子 flex弹性布局

使用flex弹性布局页面效果图（源代码在文章末尾）：

目录

flex弹性布局

一、基本容器

二、设置主轴方向

三、设置主轴对齐方式

四、设置交叉轴上的对齐方式

flex弹性布局

一、基本容器

Flexbox 是 CSS3 引入的一种一维布局模型，旨在提供更高效的方式来布局、对齐和分配容器内项目的空间。其核心概念包括：

1、容器与项目：采用 Flex 布局的元素称为 Flex 容器，其内部的子元素称为 Flex 项目。

2、主轴与交叉轴：Flex 容器有两根轴，主轴由flex-direction定义，交叉轴垂直于主轴。

3、空间分配：通过 flex-basis、flex-grow 和 flex-shrink 控制项目在主轴上的初始大小、放大和缩小比例。

4、对齐方式：justify-content 控制主轴对齐，align-items 和 align-content 控制交叉轴对齐。

举例源代码：

<style>.container {display: flex;border: 2px solid #ccc;padding: 10px;}.item {background-color: #4CAF50;color: white;margin: 5px;padding: 20px;text-align: center;}</style>
<body><h3>Flex容器示例</h3><div class="container"><div class="item">项目1</div><div class="item">项目2</div><div class="item">项目3</div></div>
</body>

效果图：

二、设置主轴方向

flex-direction属性的四种取值，决定了主轴的方向和项目的排列方式。

1、将从左到右的箭头，设置为主轴

flex-direction: row; 默认值，水平排列（从左到右）

2、将从右到左的箭头，设置为主轴

flex-direction: row-reverse; 水平反向排列（从右到左）

3、将从上到下的箭头，设置为主轴

flex-direction: column; 垂直排列（从上到下）

4、将从下到上的箭头，设置为主轴

flex-direction: column-reverse; 垂直反向排列（从下到上）

举例源代码：

<style>.container {display: flex;border: 2px solid #ccc;padding: 10px;margin-bottom: 20px;}.item {background-color: #2196F3;color: white;margin: 5px;padding: 20px;text-align: center;}.row {flex-direction: row; }.row-reverse {flex-direction: row-reverse;}.column {flex-direction: column; }.column-reverse {flex-direction: column-reverse; }
<body><h3>flex-direction: row</h3><div class="container row"><div class="item">项目1</div><div class="item">项目2</div><div class="item">项目3</div></div><h3>flex-direction: row-reverse</h3><div class="container row-reverse"><div class="item">项目1</div><div class="item">项目2</div><div class="item">项目3</div></div><h3>flex-direction: column</h3><div class="container column"><div class="item">项目1</div><div class="item">项目2</div><div class="item">项目3</div></div><h3>flex-direction: column-reverse</h3><div class="container column-reverse"><div class="item">项目1</div><div class="item">项目2</div><div class="item">项目3</div></div>
</body>

效果图：

三、设置主轴对齐方式

justify-content属性的六种取值，控制项目在主轴上的对齐方式和间距分布。 

1、justify-content: flex-start;  默认值，项目向主轴起点对齐 

2、justify-content: flex-end; 项目向主轴终点对齐 

3、justify-content: center; 项目在主轴居中对齐 

4、justify-content: space-between; 项目均匀分布，首尾项目紧贴容器边缘 

5、justify-content: space-around; 项目均匀分布，每个项目两侧间距相等

6、 justify-content: space-evenly;  项目均匀分布，所有间距相等

举例源代码：

    <style>.container {display: flex;border: 2px solid #ccc;padding: 10px;margin-bottom: 20px;height: 100px;}.item {background-color: #FF9800;color: white;margin: 5px;padding: 20px;text-align: center;}.justify-start {justify-content: flex-start; }.justify-end {justify-content: flex-end; }.justify-center {justify-content: center;}.justify-between {justify-content: space-between; }.justify-around {justify-content: space-around; }.justify-evenly {justify-content: space-evenly; }</style>
<body><h3>justify-content: flex-start 项目向主轴起点对齐（默认值）</h3><div class="container justify-start"><div class="item">项目1</div><div class="item">项目2</div><div class="item">项目3</div></div><h3>justify-content: flex-end 项目向主轴终点对齐</h3><div class="container justify-end"><div class="item">项目1</div><div class="item">项目2</div><div class="item">项目3</div></div><h3>justify-content: center 项目在主轴居中对齐</h3><div class="container justify-center"><div class="item">项目1</div><div class="item">项目2</div><div class="item">项目3</div></div><h3>justify-content: space-between 项目均匀分布，首尾项目紧贴容器边缘</h3><div class="container justify-between"><div class="item">项目1</div><div class="item">项目2</div><div class="item">项目3</div></div><h3>justify-content: space-around   项目均匀分布，每个项目两侧间距相等</h3><div class="container justify-around"><div class="item">项目1</div><div class="item">项目2</div><div class="item">项目3</div></div><h3>justify-content: space-evenly   项目均匀分布，所有间距相等</h3><div class="container justify-evenly"><div class="item">项目1</div><div class="item">项目2</div><div class="item">项目3</div></div>
</body>

效果图：

四、设置交叉轴上的对齐方式

 align-items属性的五种取值，控制项目在交叉轴上的对齐方式。

1、 align-items: flex-start; /项目向交叉轴起点对齐

2、align-items: flex-end; 项目向交叉轴终点对齐

3、align-items: center;  项目在交叉轴居中对齐

4、align-items: stretch; 项目拉伸以填满容器高度（默认值）

5、align-items: baseline;

举例源代码：

    <style>.container {display: flex;border: 2px solid #ccc;padding: 10px;margin-bottom: 20px;height: 200px;  }.align-start {align-items: flex-start;        }.align-end {align-items: flex-end;}.align-center {align-items: center; }.align-stretch {align-items: stretch;         }.align-baseline {align-items: baseline; }.item {background-color: #9C27B0;color: white;margin: 5px;padding: 20px;text-align: center;}.tall {height: 120px;}.short {height: 60px;}.baseline {padding-top: 80px;  }</style>
<body><h3>align-items: flex-start 项目向交叉轴起点对齐</h3><div class="container align-start"><div class="item tall">高项目</div><div class="item short">矮项目</div><div class="item">标准项目</div></div><h3>align-items: flex-end 项目向交叉轴终点对齐</h3><div class="container align-end"><div class="item tall">高项目</div><div class="item short">矮项目</div><div class="item">标准项目</div></div><h3>align-items: center 项目在交叉轴居中对齐</h3><div class="container align-center"><div class="item tall">高项目</div><div class="item short">矮项目</div><div class="item">标准项目</div></div><h3>align-items: stretch 项目拉伸以填满容器高度（默认值）</h3><div class="container align-stretch"><div class="item" style="padding: 5px;">拉伸项目1</div><div class="item" style="padding: 5px;">拉伸项目2</div><div class="item" style="padding: 5px;">拉伸项目3</div></div><h3>align-items: baseline 项目根据基线对齐</h3><div class="container align-baseline"><div class="item baseline">基线项目1</div><div class="item">标准项目</div><div class="item short">矮项目</div></div>
</body>

效果图：

效果图源代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Flex布局练习</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;}.navbar {display: flex;justify-content: space-between;align-items: center;background-color: #333;color: white;padding: 10px 20px;}.logo {font-size: 24px;font-weight: bold;}.nav-links {display: flex;list-style: none;margin: 0;padding: 0;}.nav-links li {margin-left: 20px;}.nav-links a {color: white;text-decoration: none;}.search-box {display: flex;align-items: center;}.search-box input {padding: 5px;border: none;border-radius: 3px 0 0 3px;}.search-box button {padding: 5px 10px;background-color: #4CAF50;color: white;border: none;border-radius: 0 3px 3px 0;cursor: pointer;}</style>
</head>
<body><nav class="navbar"><div class="logo">网站Logo</div><ul class="nav-links"><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">服务</a></li><li><a href="#">关于我们</a></li><li><a href="#">联系我们</a></li></ul><div class="search-box"><input type="text" placeholder="搜索..."><button><i class="fa fa-search"></i></button></div></nav><div class="container"><h1>欢迎来到我们的网站</h1><p>这里是一些关于我们的内容。</p></div>
</body>
</html>

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

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

相关文章

数据结构与算法-线性表-线性表的应用

数据结构与算法-线性表-线性表的应用

1 线性表 1.5 线性表的应用 1.5.1 线性表的合并 【算法步骤】 分别获取 LA 表长 m 和 LB 表长 n 。从 LB 中第 1 个数据元素开始&#xff0c;循环 n 次执行以下操作&#xff1a; 从 LB 中查找第 i 个数据元素赋给 e &#xff1b;在 LA 中查找元素 e &#xff0c;如果不存在&…
阅读更多...
流数据机器学习框架 CapyMOA

流数据机器学习框架 CapyMOA

环境准备: pip install capymoa 使用 HoeffdingTree 对流数据做在线分类: from capymoa.streams import FileStream from capymoa.learners import HoeffdingTreeClassifier from capymoa.evaluation import ProgressiveEvaluator# 1. 构造流&#xff1a;假设 data/stream…
阅读更多...
QEMU源码全解析 —— 块设备虚拟化（27）

QEMU源码全解析 —— 块设备虚拟化（27）

接前一篇文章：QEMU源码全解析 —— 块设备虚拟化（26） 本文内容参考： 《趣谈Linux操作系统》 —— 刘超，极客时间 《QEMU/KVM源码解析与应用》 —— 李强，机械工业出版社 Virt
阅读更多...
Cilium动手实验室: 精通之旅---19.Golden Signals with Hubble and Grafana

Cilium动手实验室: 精通之旅---19.Golden Signals with Hubble and Grafana

Cilium动手实验室: 精通之旅---19.Golden Signals with Hubble and Grafana 1. Lab 环境2. 部署测试应用2.1 7层可见性的网络2.1.1 允许所有命名空间2.1.2 DNS 可见性2.1.3 L7-egress-visibility 2.2 检查 Deployments2.3 在 Hubble UI 中查看 3. Grafana 选项卡3.1 Grafana 中…
阅读更多...
常见文件系统格式有哪些

常见文件系统格式有哪些

PART.01 常见文件系统格式有哪些 常见的文件系统格式有很多&#xff0c;通常根据使用场景&#xff08;Windows、Linux、macOS、移动设备、U盘、硬盘等&#xff09;有所不同。以下是一些主流和常见的文件系统格式及其特点&#xff1a; 一、Windows 常见文件系统格式 Digital …
阅读更多...
React Native 弹窗组件优化实战：解决 Modal 闪烁与动画卡顿问题

React Native 弹窗组件优化实战：解决 Modal 闪烁与动画卡顿问题

&#x1f4cc; 前言 在移动端开发中&#xff0c;用户对动画的流畅性和过渡自然性有着极高的期待。最近我对一个使用 react-native-modal 实现的 Alert 弹窗组件进行了优化&#xff0c;成功解决了闪烁和卡顿问题&#xff0c;并显著提升了用户体验。 本篇博客将带你深入了解优化…
阅读更多...
智能客服系统开发方案：RAG+多智能体技术实现

智能客服系统开发方案：RAG+多智能体技术实现

智能客服系统开发方案：RAG+多智能体技术实现 一、系统架构设计 #mermaid-svg-hKDXil2J0xV064Q5 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-hKDXil2J0xV064Q5 .error-icon{fill:#552222;}#mermaid-svg-hKDXil2…
阅读更多...
【Kafka】消息队列Kafka知识总结

【Kafka】消息队列Kafka知识总结

【Kafka】消息队列Kafka知识总结 【一】消息队列【1】什么是消息队列【2】消息队列有什么用&#xff08;1&#xff09;异步处理&#xff08;2&#xff09;削峰/限流&#xff08;3&#xff09;降低系统耦合性&#xff08;4&#xff09;实现分布式事务&#xff08;5&#xff09;顺…
阅读更多...
微信小程序开发 RangeError: Maximum call stack size exceeded

微信小程序开发 RangeError: Maximum call stack size exceeded

通常是由于​​调用栈深度超限​​&#xff08;如无限递归、过深的函数调用链或数据绑定循环&#xff09;导致。以下是具体解决方案&#xff1a; 一、核心原因分析 ​​无限递归​​ 函数直接或间接调用自身且无终止条件&#xff0c;例如事件处理函数中错误触发自身。​​数据…
阅读更多...
mapbox进阶，切片网格生成实现

mapbox进阶，切片网格生成实现

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通 文章目录 一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️line线图层样式1.4 ☘️symbol符号图层…
阅读更多...
Mysql 函数concat、concat_ws和group_concat

Mysql 函数concat、concat_ws和group_concat

1.concat concat()函数是将多个字符串组合在一起&#xff0c;形成一个大的字符串&#xff1b;如果连接的字符串中存在一个为NULL&#xff0c;则输出的结果为NULL&#xff0c;语法格式为&#xff1a; concat(str1,str2,....strn) -- 1、字符之间不加连接符 mysql> select c…
阅读更多...
“在同一事务中“ 的含义

“在同一事务中“ 的含义

一、"在同一事务中" 的核心含义 "在同一事务中" 指多个数据库操作共享同一个事务上下文&#xff0c;具有以下特点&#xff1a; 原子性保证&#xff1a;所有操作要么全部成功提交&#xff0c;要么全部失败回滚。隔离性共享&#xff1a;操作使用相同的隔离…
阅读更多...
【Create my OS】从零编写一个操作系统

【Create my OS】从零编写一个操作系统

前言&#xff1a; 相信每个自学操作系统的同学&#xff0c;大致学习路线都离不开 HIT-OS、MIT-6.S081、MIT-6.824、MIT-6.828等经典的公开课。但学习完这些经典公开课并完成相应的Lab&#xff0c;很多同学脑海中对于操作系统的知识其实都是零散的&#xff0c;让你从头开始编写一…
阅读更多...
计算机视觉与深度学习 ｜ 低照度图像增强算法综述（开源链接，原理，公式，代码）

计算机视觉与深度学习 ｜ 低照度图像增强算法综述（开源链接，原理，公式，代码）

低照度图像增强算法综述 1 算法分类与原理1.1 传统方法1.2 深度学习方法2 核心算法详解2.1 多尺度Retinex (MSRCR) 实现2.2 SCI自校准光照学习2.3 自适应伽马校正2.4 WaveletMamba架构3 开源资源与实现3.1 主流算法开源库3.2 关键代码实现4 评估与实验对比4.1 客观评价指标4.2 …
阅读更多...
【工具教程】批量PDF识别提取区域的内容重命名，将PDF指定区域位置的内容提取出来改名的具体操作步骤

【工具教程】批量PDF识别提取区域的内容重命名，将PDF指定区域位置的内容提取出来改名的具体操作步骤

在企业运营过程中&#xff0c;时常会面临处理海量 PDF 文件的挑战。从 PDF 指定区域提取内容并用于重命名文件&#xff0c;能极大地优化企业内部的文件管理流程&#xff0c;提升工作效率。以下为您详细介绍其在企业中的应用场景、具体使用步骤及注意事项。​ 详细使用步骤​ 选…
阅读更多...
【Java多线程从青铜到王者】定时器的原理和实现(十一)

【Java多线程从青铜到王者】定时器的原理和实现(十一)

定时器 定时器时我们日常开发中会用到的组件工具&#xff0c;类似于一个"闹钟"&#xff0c;设定一个时间&#xff0c;等到了时间&#xff0c;定时器最自动的去执行某个逻辑&#xff0c;比如博客的定时发布&#xff0c;就是使用到了定时器 Java标准库里面也提供了定时…
阅读更多...
深入剖析AI大模型：Prompt 优化的底层逻辑

深入剖析AI大模型：Prompt 优化的底层逻辑

记得看到一篇NLP的文章&#xff0c;就 Prompt 时序效应的论文揭示了一个有趣现象&#xff0c;文章中说&#xff1a;模型对指令的解析存在 "注意力衰减" 特性 —— 就像人类阅读时会更关注段落开头&#xff0c;模型对 Prompt 前 20% 的内容赋予的权重高达 60%。这个发…
阅读更多...
【备忘】PHP web项目一般部署办法

【备忘】PHP web项目一般部署办法

【PHP项目一般部署办法】 操作步骤 代码&#xff1a; 把php项目代码clone到指定位置如www/下新建php站点&#xff0c;填写域名&#xff0c;把站点根目录设置为项目根目录项目入口设置&#xff0c;一般为public/项目权限改为766(特殊时候可设置为777)&#xff0c;如果有特殊要求…
阅读更多...
【60 Pandas+Pyecharts | 箱包订单数据分析可视化】

【60 Pandas+Pyecharts | 箱包订单数据分析可视化】

文章目录 &#x1f3f3;️‍&#x1f308; 1. 导入模块&#x1f3f3;️‍&#x1f308; 2. Pandas数据处理2.1 读取数据2.2 数据信息2.3 去除订单金额为空的数据2.5 提取季度和星期 &#x1f3f3;️‍&#x1f308; 3. Pyecharts数据可视化3.1 每月订单量和订单金额分布3.2 各季…
阅读更多...
玩转Docker | 使用Docker部署vaultwarden密码管理器

玩转Docker | 使用Docker部署vaultwarden密码管理器

玩转Docker | 使用Docker部署vaultwarden密码管理器 前言一、vaultwarden介绍Vaultwarden 简介主要特点二、系统要求环境要求环境检查Docker版本检查检查操作系统版本三、部署vaultwarden服务下载vaultwarden镜像编辑部署文件创建容器检查容器状态检查服务端口安全设置四、配置…
阅读更多...
最新文章

Copyright @ 2022~2023