一起从头学习Flex
前言
“其实我觉得flex很像现在的人——是适应性很好的生物,在家秋衣秋裤在外香肩外露。flex container看作一个环境或者大佬,flex-item是其中个体或者马仔。个体如何存在很大程度上取决环境的设定,当然也会有一些出世的人 比如
position: absolute;
存在感就有比较酷” —— 炖炖
背景:布局模式
页面拆开了看,无非是由众多尺寸各异的box以不同层叠水平和顺序组合而成。
CSS2.1定义了下面前4种布局模式,不同的布局模式下box内的渲染规则不同。
布局 | 特性 | ||
---|---|---|---|
block layout | 块级布局 | 独立的渲染区域,与外界无关 | |
inline layout | 行内布局 | 为布局文本设计 | |
table layout | 表格布局 | 在表格格子布局二维数据 | |
positioned layout | 定位布局 | 不考虑文件流中其他元素,布局有非常明确的位置 | |
flex layout | 弹性布局 | 呈现复杂的应用与页面 |
flex-layout和block-layout非常相似。
块级布局中一些比较复杂的属性,比如浮动、多列,在弹性布局中是没有的;
反过来弹性布局有一些很简单但厉害的属性去实现复杂的网页布局中常见的需求。
flex-container档案
- 元素名:flex container
- 中文名:弹性容器、弹性盒
- 身份:大佬
- 年代:css3,chrome29就已经可以不加前缀地支持了
- 权力:弹性布局——指定容器中元素的布局方式,子元素在其中是否收缩或伸展
被接受程度:所有的浏览器都支持flexbox(caniuse)
flex layout is split into three versions: 1. old version display: box;2. transitional version: display:flexbox;3. present standard version: display:flex;Android2.3 began to support old version: display: -webkit-box;4.4 began to support standard version: display: flex;IOS6.1 began to support old version: display: -webkit-box;7.1 began to support standard version: display: flex;复制代码
如何成为
大佬flex:display:flex/inline-flex;
分别产生块级和行内的弹性容器。- 社会关系:弹性容器中的子元素——flex items
- 主要参数:主轴、侧轴,主轴长度、侧轴长度
速记几个属性:
flex-flow 子元素排列的方向和是否换行
flex-flow: [<flex-direction> <flex-wrap>]
flex-direction 排列方向和顺序(主轴侧轴方向决定)
flex-direction: row | row-reverse | column | column-reverse
flex-wrap 主轴个数和排列顺序
flex-wrap: nowrap | wrap | wrap-reverse
eg.
flex-flow: row || column wrap || row-reverse wrap-reverse
justify-content 安排(
决定)子元素在主轴上如何分配空白空间的方式justify-content: flex-start | flex-end | center | space-between | space-around
align-items 安排(
决定)子元素在纵轴上的伸展方式align-items: flex-start | flex-end | center | baseline | stretch
align-content 多条主轴如何在纵轴方向上面排布,跟justify-content 在主轴方向对齐元素的方式相似,如果只有一行该属性不生效
align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex-items档案
- 元素名:flex item
- 中文名:弹性子元素
- 身份:flex container的马仔
- 如何成为
马仔flex-item:在flex container里面的子元素自动成为flex item,直接包含在容器中的连续文本会被包裹成一个匿名的flex item,空白的item不会被渲染出来 - 职责:为其内容创建新的formatting context,flex item是flex-level的块,所以使用弹性容器的弹性格式化上下文而不是BFC(比如在BFC中margin会坍塌在弹性格式化上下文中不会 戳)
- 比较酷的绝对定位的弹性子元素 特性速记
- 不参与flex布局,脱离文档流 (戳)
align-self: auto/stretch
=align:flex-start
默认布局从主轴开始位置放置align-self: center
垂直方向居中(chrome遵守了这一规范,IE/FF没有,戳)
几个重要属性:
margins 和 paddings:flex item的margins不会重叠(应该尽量避免使用百分比的margins、paddings,在不同浏览器下表现不一样,目前在IE/FF/Chrome还没有测试出来差别啦) 百分比的基准是浏览器宽度
有order的元素渲染顺序会重置,相当于指定特定的子元素出现在什么位置
visibility: collapse
看例子flex 子元素的弹性
flex: [ <flex-grow> <flex-shrink> <flex-basis>]
详见flex缩写探究margin: auto
会“贪吃”掉所有空白的区域 例子align-self 单独设置子元素(包括绝对定位的子元素)在纵轴上的定位方式,可以覆盖align-items属性
align-self: auto | flex-start | flex-end | center | baseline | stretch
(auto是跟container的flex-items属性一致)
flex缩写的探究
flex: [ <flex-grow> <flex-shrink> <flex-basis>]
- flex-grow 默认1 如何分配container中的空白空间,数值决定权重
- flex-shrink 默认1 在空间不够的时候如何收缩元素
- flex-basis 指定flex-item的默认尺寸 百分比以父级容器宽度为基数计算(Flexbox Tester可以帮助理解flex item宽度的工具网站)
缩写 | flex-grow | flex-shrink | flex-basis |
---|---|---|---|
no declaration | 0 | 1 | auto |
auto | 1 | 1 | auto |
0 | 0 | 1 | 0% |
1 | 1 | 1 | 0% |
none | 0 | 0 | auto |
弹性布局不是块级布局
- float不生效
- 相邻子元素的margin不会发生重叠
- 多列布局column-*不起作用
- 'float'和'clear'对flex item不产生浮动或者清除浮动的效果,也不会让它脱离文档流
vertical-align
对于flex item没效果- 伪元素
::first-line
、::first-letter
不适用于弹性容器,弹性容器也不会成为其父元素的first-line或者first-letter
为什么你的flexbox不管用
"了解一个人并不代表什么,人是会变的"——《重庆森林》。
放在W3C规范和浏览器实现就是“了解一个属性并不代表什么,浏览器实现都是有差异的”。
W3C只是制定了规范,但是遵守程度和实现效果各个浏览器是有所差异的。当你清楚你想实现什么效果而使用了对应的属性却发现不起作用,那么很可能是浏览器的差异造成的。比如上面提到的flex缩写,IE10的实现是不符合规范的
Declaration | What it should mean | What it means in IE 10 |
---|---|---|
(no flex declaration) |
flex: 0 1 auto
|
flex: 0 0 auto
|
flex: 1
|
flex: 1 1 0%
|
flex: 1 0 0px
|
flex: auto
|
flex: 1 1 auto
|
flex: 1 0 auto
|
flex: initial
|
flex: 0 1 auto
|
flex: 0 0 auto
|
另外一个可能不常见但也能体现浏览器差异的是,嵌套的弹性容器的baseline不作为其他弹性子元素的对齐参考(可以在Firefox戳例子看看)。
“当你在构建页面的时候使用了flexbox但是发现他并没有出现你预想的效果,可以在这里找到答案”——flexbugs
关于flex.css
flex.css就是对flex布局的一种封装,通过简洁的属性设置就能使得它完美的运行在移动端的各种浏览器,甚至能运行在ie10+的各种PC端浏览器中。是一种类似于标签属性声明的方式,指定flex属性。
<!-- 设置主轴方向 -->
<div class="flexbox" flex="dir: top"> ...
</div>复制代码
flex.css html | css |
---|---|
dir: top | flex-direction: cloumn |
main: center | justify-content: center |
cross: top | align-items: flex-start |
试验flex布局的工具网站: flexbox playground and code generator
参考
- W3C flexbox
- flex.css快速入门,极速布局
- flexbugs
- 使用弹性盒子进行高级布局
- Flex 布局教程:语法篇
by DDun
一起从头学习Flex相关推荐
- 如何学习Flex Framework
如何学习Flex Framework 最近由於種種緣故又要開始做點教育訓練的事,先趁現在有空把手邊的資料整理一下. *Flex 的基礎架構 關於 flex 基本上常被問到的不外乎就是「如何可以學好它? ...
- 从头学习计算机网络_我如何通过从头开始构建网络爬虫来自动进行求职
从头学习计算机网络 它是如何开始的故事 (The story of how it began) It was midnight on a Friday, my friends were out hav ...
- 从头学习计算机网络_如何从头开始构建三层神经网络
从头学习计算机网络 by Daphne Cornelisse 达芙妮·康妮莉丝(Daphne Cornelisse) 如何从头开始构建三层神经网络 (How to build a three-laye ...
- 轻松学习 Flex 布局的小游戏
轻松学习 Flex 布局的小游戏 Flexbox Froggy,帮助你学习前端 Flex 布局的小游戏,难度不高,趣味性极强! Flexbox Froggy(弹性盒小青蛙)是一个帮助你快速学习前端 F ...
- 如何快速学习flex
1.先访问flex.org,大概了解flex能做什么?目前的版本如何?与flash.actionscript关系几何等? 2.学习.开发环境安装:包括flexbuilder安装,flash playe ...
- Java程序员学习Flex和BlazeDS的十三个理由
作者 Ryan Knight 译者 沙晓兰 发布于 2009年5月18日 上午2时55分 本文列述了13个Java程序员应当学习Flex和BlazeDS的理由,讨论了为什么Flex结合BlazeDS是 ...
- 学习flex布局(弹性布局)
Flex是Flexible Box的缩写,意为弹性布局.是W3C早期提出的一个新的布局方案.可以便捷的实现页面布局,目前较高版本的主流浏览器都能兼容,兼容情况如下: Flex在移动端开发上已是主流,比 ...
- 前端学习-flex布局
2020-10-28补充 容器上的一些属性: display: flex flex-direction 排列方向 row水平,column垂直 flex-wrap 是否换行 align-items 交 ...
- 从头学习DirectDraw
在开始学习DirectDraw编程之前,有一些题外话要说明,以下内容均是个人的心得和体会,如果其中有什么谬误之处,敬请谅解,同时个人不对可能造成的后果负责.. 以下几点是在编制DirectX应用程序时 ...
最新文章
- java collections_Java集合基础的详细介绍(二)
- 时间戳转格式化日期,日期转换成时间戳
- 招聘行业颠覆者【伯小乐】| 手摸手产品研究院
- 世纪互联云和华为共同打造的数据中心是一个很好的一步标志!
- anaconda base环境_anaconda中安装packages:pip还是conda install?
- Linux——批量查找替换方法(VIM和sed)
- 物流车辆数据在金融科技的应用
- Oracle PL/SQL编程之变量
- MssqlOnLinux 主从集群【2】
- 推理集 —— 特殊的空间
- 异步消息的性能与激情之Netty开发思路
- suse linux 使用教程,suse linux 命令教程
- 外螺纹对照表_螺纹对照表
- tera term 设置_重置窗口大小不清屏
- Qt设置字体类型及添加字体文件
- 免费SSL证书申请和部署
- brpc中的协程bthread源码剖析(一):Work Stealing以及任务的执行与切换
- 必应词典英语学习APP案例分析
- onenote for windwos10_调整行距(uwp版)
- Java售票方式_Java多线程之火车售票系统