百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

前端样式布局神器-弹性布局flex学习思路

yuyutoo 2024-10-25 19:18 7 浏览 0 评论

写在前面

#web前端面试题#面试中经常会被问道前端布局的实现。相信做前端的朋友们都会需要在日常的工作中需要遇到页面排版样式布局的细节处理。前端样式布局比较经典的布局方式无外乎是以下几种，各有优缺点(下次可以单独写一个系列进行交流哈)

  • 浮动布局 float
  • 绝对定位布局 absolute
  • 固定定位布局 fixed
  • Grid方案
  • table 布局
  • 媒体查询布局
  • 弹性盒子布局 flex
  • 百分比布局
  • rem 布局

上面提及到布局方案每个都是很经典的，每个单独拿出来写都可以单独开课学习。

好戏开始

今天我们着重复习下，移动端开发的神器 flex布局，flex学习其实最高效的方式我总结下来就几点比较实用的窍门，

第一 多看阮神的大作 学习flex的骨灰级秘籍

第二 多练结合属性值强化记忆

第三 掌握常用的处理场景封装到真实的实战项目中复用

其实学习flex布局并不难，但是你要去理解，下面我谈谈对于这种布局的使用体验吧。从flex布局的表象含义来看 flex 是弹性伸缩的意思，其实从这点来看他对于浏览器的兼容性是有一定要求的。我记得它最早是在2009提出来的吧，pc端的管理平台或者早期的政府部门的页面就不太适合采用这种布局模式，它是随着时代发展而生的产物。flex 引入了“容器”，“项目”的概念，容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。flex在实际使用中最核心的是容器上的属性和项目元素的属性。

flex容器的属性

以下6个属性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

项目的属性

以下6个属性设置在项目上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

文章小结

内容比较干，建议学习flex布局的小伙伴们自行翻阅阮一峰的大作，这篇文章只是对flex布局的核心的知识点列了一个大纲开了一个头，未逐点展开举例，写这篇文章的目的是为了给前端学习者一点点启示以及对自己学习心得的有效记录方便回溯知识体系，网上的学习素材很多，只有融汇贯通，学以致用才能更好的为开发服务，欢迎一起交流学习。 「链接」


相关推荐

ETCD 故障恢复（etc常见故障）

概述Kubernetes集群外部ETCD节点故障，导致kube-apiserver无法启动。...

在Ubuntu 16.04 LTS服务器上安装FreeRADIUS和Daloradius的方法

FreeRADIUS为AAARadiusLinux下开源解决方案，DaloRadius为图形化web管理工具。...

如何排查服务器被黑客入侵的迹象（黑客 抓取服务器数据）

---排查服务器是否被黑客入侵需要系统性地检查多个关键点，以下是一份详细的排查指南，包含具体命令、工具和应对策略：---###**一、快速初步检查**####1.**检查异常登录记录**...

使用 Fail Ban 日志分析 SSH 攻击行为

通过分析`fail2ban`日志可以识别和应对SSH暴力破解等攻击行为。以下是详细的操作流程和关键分析方法：---###**一、Fail2ban日志位置**Fail2ban的日志路径因系统配置...

《5 个实用技巧，提升你的服务器安全性，避免被黑客盯上!》

服务器的安全性至关重要，特别是在如今网络攻击频繁的情况下。如果你的服务器存在漏洞，黑客可能会利用这些漏洞进行攻击，甚至窃取数据。今天我们就来聊聊5个实用技巧，帮助你提升服务器的安全性，让你的系统更...

聊聊Spring AI Alibaba的YuQueDocumentReader

序本文主要研究一下SpringAIAlibaba的YuQueDocumentReaderYuQueDocumentReader...

Mac Docker环境，利用Canal实现MySQL同步ES

Canal的使用使用docker环境安装mysql、canal、elasticsearch，基于binlog利用canal实现mysql的数据同步到elasticsearch中，并在springboo...

RustDesk:开源远程控制工具的技术架构与全场景部署实战

一、开源远程控制领域的革新者1.1行业痛点与解决方案...

长安汽车一代CS75Plus2020款安装高德地图7.5

不用破解原车机，一代CS75Plus2020款，安装车机版高德地图7.5，有红绿灯读秒！废话不多讲，安装步骤如下：一、在拨号状态输入：在电话拨号界面，输入:*#518200#*（进入安卓设置界面，...

Zookeeper使用详解之常见操作篇（zookeeper ui）

一、Zookeeper的数据结构对于ZooKeeper而言，其存储结构类似于文件系统，也是一个树形目录服务，并通过Key-Value键值对的形式进行数据存储。其中，Key由斜线间隔的路径元素构成。对...

zk源码—4.会话的实现原理一（会话层的基本功能是什么）

大纲1.创建会话...

Zookeeper 可观测性最佳实践（zookeeper能够确保）

Zookeeper介绍ZooKeeper是一个开源的分布式协调服务，用于管理和协调分布式系统中的节点。它提供了一种高效、可靠的方式来解决分布式系统中的常见问题，如数据同步、配置管理、命名服务和集群...

服务器密码错误被锁定怎么解决（服务器密码错几次锁）

#服务器密码错误被锁定解决方案当服务器因多次密码错误导致账户被锁定时，可以按照以下步骤进行排查和解决：##一、确认锁定状态###1.检查账户锁定状态（Linux）```bash#查看账户锁定...

zk基础—4.zk实现分布式功能（分布式zk的使用）

大纲1.zk实现数据发布订阅...

《死神魂魄觉醒》卡死问题终极解决方案:从原理到实战的深度解析

在《死神魂魄觉醒》的斩魄刀交锋中，游戏卡死犹如突现的虚圈屏障，阻断玩家与尸魂界的连接。本文将从技术架构、解决方案、预防策略三个维度，深度剖析卡死问题的成因与应对之策，助力玩家突破次元壁障，畅享灵魂共鸣...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表