彻底搞懂flex弹性盒模型布局
为什么要用flex
基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex。
兼容性:
Base Browsers: IE8.0+, Firefox40.0+, Chrome40.0+, iOS8.0+, Android4.4+, Opera40.0+
flex属性的分类
我们先来概览一下flex的所有属性,属性看似多杂,其实分为两大类:
flex container
- flex-flow (复合属性,包含以下两个)
- flex-direction (方向x轴,y轴)
- flex-wrap (是否换行)
- align-content (y轴对齐方式)
- justify-content (x轴对齐方式)
- align-items (flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。)
flex items
- flex (复合属性,包含以下三个)
- flex-grow (扩展比率)
- flex-shrink (收缩比率)
- flex-basis (伸缩基准值)
- align-self (flex子项单独在y轴对齐方式)
- order (排序)
看不懂这一堆属性也没关系,来感受一下实例
See the Pen Flexbox playground by Gabi
(@enxaneta) on CodePen.
实践
理解flex的核心就是区分好flex container和flex items,我们就做一个简单的实例:
See the Pen flex-layout by Tony
(@lostyu) on CodePen.
总结
flex布局很灵活,可以多种搭配,理解了flex container和flex items也就理解了flex弹性盒模型布局
参考资料
彻底搞懂flex弹性盒模型布局的更多相关文章
- 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
- flex弹性盒模型布局
容器属性:1.flex-direction:项目的排列方向(1)row 主轴方向排列(2)row-reverse 主轴反方向排列(3)column 纵向排列(4)column-reverse 纵向反方 ...
- CSS3弹性盒模型布局模块介绍
来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
- Flex 弹性盒模型
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Web的Flex弹性盒模型
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- box flex 弹性盒模型(转载)
css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...
- columns分栏与flex弹性盒模型
columns 分栏 值:column-width:设置每列的宽度 column-count:设置列数 例:columns{200px 3} 列数和宽度固定 co ...
- flex弹性盒模型
flex 意思是弹性布局,用来给盒模型提供最大的灵活度,指定容器中的项目为弹性布局,类似于float:left; 比float的好处是容器没有设置高度,会根据项目来自适应高度,我们都知道,设置floa ...
- 彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
随机推荐
- 安装Jupyter Notebook
1.安装Ipython pip3 install -i https://pypi.douban.com/simple ipython 2.安装jupyter pip3 install -i https ...
- Vue 编程式的导航
1.应用场景 在同一路由的情况下,不同的参数之间进行切换 注意:别忘记初始化路由页面 2.用法 a.定义方法 b.实现方法 c.初始化路由页面 3.案例 <template> <di ...
- 人生中的第一篇OI博客及博客规划
这是笔者第一次在博客园里发表文章,也同样是第一次来写关于OI的一些想法,此篇的主题是想总体对日后的博客有具体的规划. 首先,笔者创办博客并发表观点于看法的目的是记录自己对于题目或竞赛的观念,主要以题解 ...
- 6、python基本数据类型之序列类型
前言:python的基本数据类型可以分为三类:数值类型.序列类型.散列类型,本文主要介绍序列类型及其通用操作. 一.序列类型 1)字符串(str):用单引号('),双引号("),三引号(三单 ...
- mva 的 第一弹 ASP.NET SignalR
弹弹弹 弹走 占位 补齐
- python HelloWorld 的 4 种姿势,你知道几种
安装完 Python 之后该干啥,当然是要 say HelloWorld 了. python.exe 就是个普通程序 和其它所有命令一样,在命令行中敲下 python 并回车的时候,操作系统去 PAT ...
- 内网IP的解释
https://baike.baidu.com/item/%E5%86%85%E7%BD%91ip/8881186?fr=aladdin
- view 视图函数
一 Django的视图函数view 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错 ...
- mybatis generator cmd 终端命令 生成dao model mapper
mybatis generator cmd 终端命令 生成dao model mapper 文件包下载 mybatis-generator-core-1.3.2.jar 下载地址:https://gi ...
- SpringCloud与微服务Ⅲ --- SpringCloud入门概述
一. 什么是SpringCloud SpringCloud基于SpringBoot提供了一套微服务解决方案,包括服务注册与发现,配置中心,全链路监控,服务网关,负载均衡,熔断器等组件,除了基于NetF ...