我所知道的flex布局 —— 上篇

andycall 发布于2019-08-30 13:13 / 545人阅读

摘要：布局也经历了一段演变历史。不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更适用于应用组件和小比例布局。常规布局是基于块和内联流方向，而布局是基于流。

前言

你还在用display+position+float来进行css布局吗？有没有觉得用传统的这种布局方法来实现特殊布局特别麻烦困难，例如：垂直居中。今天来记录一下自己对flex布局的了解（虽然不算神马新东西了都可以说是旧东西了~~~）

历史

2009年，W3C提出了一种新的方案 —— Flex布局，可以简便、完整、响应式地实现各种页面布局。

flex布局也经历了一段演变历史。当你用google搜索flex时你会发现很多“过时”的资料信息。

如果你正在浏览一篇关于flexbox的博客时看到display:box或一个属性为box-{*}，那么你正在浏览的是2009年版本的flexbox

如果你正在浏览一篇关于flexbox的博客时看到display:flexbox或一个flex()函数，那么你正在浏览的是2011年版本的flexbox

如果你正在浏览一篇关于flexbox的博客时看到display:flex和flex-{*}的一系列属性，那么你正在浏览的是现在版本的flexbox

目前，它已经得到了所有浏览器的支持，网页端浏览器兼容性如下：

移动端浏览器兼容性：

概念

Flexbox布局（ Flexible Box 或CSS3 弹性布局），是CSS3中的一种新的布局模式，可以自动调整子元素的高和宽，来很好的填充任何不同屏幕大小的显示设备中的可用显示空间，收缩内容防止内容溢出，确保元素拥有恰当的行为的布局方式。使用Flexbox来布局更容易，可以使用更少的代码，更简单的方式实现更复杂的布局，例如对齐方式，排列方向，排列顺序（这也是Flexbox布局的核心能力所在），弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素的显示顺序和它们在代码中的顺序是独立的，通过使用弹性盒，定位子元素变得更加简单，复杂的布局也能够使用更清晰的代码更简单的实现。独立显示被设定成只针对可见元素，而不是基于代码的声明和导航顺序。

不同于块级元素基于垂直方向布局以及行内元素基于水平方向布局，弹性盒布局的算法是方向无关的。虽然块级元素布局在页面中工作良好，但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需要进行协作而做出的努力。

常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流。先看一张图：

1. flex container：flex容器/弹性容器

flex容器是flex元素的父元素。通过设置display属性的值为flex或inline-flex定义。
旧版本属性值：

- box:将对象作为弹性容器显示（最老版本-2009）
- inline-box:将对象作为内联块级弹性容器显示（最老版本-2009）
- flexbox:将对象作为弹性容器显示。（过渡版本-2011）
- inline-box: 将对象作为内联块级弹性容器显示。（过渡版本-2011）

2. flex item：flex子元素或弹性子元素

flex容器的每一个子元素均为一个flex子元素。注意：flex容器直接包含的文本变为匿名的弹性子元素，同时flexbox布局和原来的布局是两套概念，所以部分css属性在flex子元素中将不起作用，如：float，clear，vertical-align，column-*等

###3. 轴 axis

每个flex子元素沿着主轴（main axis）依次相互排列。交叉轴（cross axis）垂直于主轴。

- 属性flex-direction定义主轴方向
- 属性justify-content定义flex子元素如何沿着主轴排列
- 属性align-items定义flex子元素如何沿着交叉轴排列
- 属性align-self覆盖父元素的align-items属性，定义了多带带的flex子元素如何沿着交   叉轴排列

方向 direction

flex容器的主轴起点边缘（main start）、主轴终点边缘（main end）和交叉轴起点边缘（cross start）,交叉轴终点边缘（cross end）为flex子元素排列的起始和结束位置。它们具体取决于由writing-mode（从左到右、从右到左等等）属性建立的向量中的主轴和交叉轴位置。

- 属性order将元素依次分组，并决定谁先出现。
- 属性flex-flow是属性 flex-direction 和 flex-wrap 的简写，用于排列flex子元素。

行

flex子元素根据 flex-wrap 属性控制的侧轴方向（在这个方向上可以建立垂直的新线），既可以是一行也可以是多行排列

尺寸

flex子元素宽高可相应地等价于主尺寸（main size）和交叉尺寸（cross size），它们都分别取决于flex容器的主轴和侧轴。

- min-height和 min-width属性的初始值为新增关键字 auto。
- 属性flex是flex-basis，flex-grow和flex-shrink的缩写，代表flex子元素的伸缩性。

鸣谢

Flexbox布局（CSS3 弹性布局，Flexible Box）之基本概念解析

后话

夜深了，早点休息。——（其实是致自己。）

GPU云服务器云服务器我所知道 flex布局你不知道的我所

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115398.html

我所知道的flex布局-下篇（语法）

摘要：前言嗯，前不久写了一篇我所知道的布局上篇，于是今天来把下篇补上。所以，轴线之间的间隔比轴线与边框的间隔大一倍。负值对该属性无效。默认值为，表示继承父元素的属性，如果没有父元素，则等同于。传送门我所知道的布局上篇布局教程语法篇前言嗯，前不久写了一篇我所知道的flex布局-上篇，于是今天来把下篇补上。容器的属性既然标题括号括住了语法，那么就直入正题直接来说语法了。首先设为Flex...

liuchengxu 2019-08-30 13:20 评论0 收藏0
从零到一，撸一个在线斗地主(上篇)

摘要：原文从零到一，撸一个在线斗地主上篇作者背景朋友来深圳玩，若说到在深圳有什么好玩的，那当然是宅在家里斗地主了可是天算不如人算，扑克牌丢了几张不全大热天的，谁愿意出去买牌啊。原文：从零到一，撸一个在线斗地主(上篇) | AlloyTeam作者：TAT.vorshen 背景：朋友来深圳玩，若说到在深圳有什么好玩的，那当然是宅在家里斗地主了！可是天算不如人算，扑克牌丢了几张不全……大热天的，...

raoyi 2019-08-26 10:27 评论0 收藏0
JavaScript五十问——对比来说CSS的Grid与FlexBox（上篇）

摘要：前言春节假期有幸拜读了张鑫旭大大的关于与的两篇文章见参考文献，很有收获自己在开发的过程中，很多时候都会采用布局，而与这种方式已经很少使用了这次在春假期间学习了，深感的好用与便利。相对于，它多出来一个的属性，代表拉伸默认属性。前言春节假期有幸拜读了张鑫旭大大的关于Flex与Grid的两篇文章（见参考文献），很有收获；自己在开发的过程中，很多时候都会采用Flex布局，而Float与in...

xuhong 2019-08-30 15:55 评论0 收藏0
JavaScript五十问——对比来说CSS的Grid与FlexBox（下篇）

摘要：语法如下是简写属性，也可以分别定义行间隔和列间隔。语法如下属性值得含义同这里不再过多说明，读者可以自行验证。前言在上篇——JavaScript五十问——对比来说CSS的Grid与FlexBox（上篇），我介绍了Flex的属性与使用，今天我们来总结一下Grid的具体使用方法，最后会结合Flex与Grid布局讲一讲二者的联系与不同。需要注意得是，Grid布局与我们之前所熟悉的css布...

Moxmi 2019-08-30 15:55 评论0 收藏0