Flex布局介绍

booster 发布于2019-04-23 13:06 / 856人阅读

摘要：本文来源地，一个非常好的内容及前端资讯的网站弹性布局任意容器都可以指定成布局行内元素设为布局后，子元素的将失效称采用布局的元素为容器，它的所有子元素自动成为容器成员，称为项目。若项目只有一根轴线则不生效。

传统的布局解决方案--盒状模型--diplay + position + float

缺陷：对于一些特殊布局（垂直居中）和网格式布局（几行几列）不易实现

09年W3C颁布的--flex布局--使用简单、API完整丰富、响应式动态地实现各种页面布局（一些常见的布局思想）

当然针对Gekco30+以下，最好的布局选择就是flex了，更新式的Grid布局它不支持。

本文来源地：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ，一个非常好的CSS内容及前端资讯的网站

Flex

Flexible Box弹性布局

任意容器都可以指定成flex布局：

.box {
  display: flex;
}

.box {
  display: inline-flex;
}

设为flex布局后，子元素的float、clear、vertical-align将失效

称采用Flex布局的元素为Flex容器（flex container），它的所有子元素自动成为容器成员，称为Flex项目(flex item)。

两根轴：
水平主轴 main axis
- 主轴与边框的左右交叉点 main start/main end
垂直交叉轴 cross axis
- 交叉轴与边框的上下交叉点 cross start/cross end
项目（flex item）默认沿主轴排列，单项目占据的主轴空间/交叉轴空间 main size/cross size

flex容器属性

flex-direction 决定主轴方向=项目排列方向
flex-wrap 定义如何换行
flex-flow 它是flex-direction和flex-wrap的简写形式，语法糖
justify-content 定义项目在主轴上的对齐方式
align-items 定义项目在交叉轴上的对齐方式
align-content 定义多根轴线的对齐方式。若项目只有一根轴线则不生效。

1.flex-direction值：

row(默认值) 主轴为水平方向，起点在左端
row-reverse 主轴为水平方向，起点在右端
column 主轴为垂直方向，起点在左端
column-reverse 主轴为垂直方向，起点在右端

2.flex-wrap值：

nowrap(默认) 不换行

wrap 换行，第一行在上方

wrap-reverse 换行，第一行在下方

默认情况，所有flex项目会排在一条线上，不会自动换行

3.flex-flow默认值：row nowrap

.box {
  flex-flow:  ;
}

4.justify-content值：

flex-start(默认值) 左对齐

flex-end 右对齐

center 居中

space-between 两端对其，项目间间隔相等

space-around 单个项目两侧的间隔相等，故项目间间隔相比项目与边框间间隔多一倍

5.align-items值：

strech(默认值) 如果flex项目未设置高度或设置高度为auto，将占满整个容器的高度

flex-start 交叉轴起点处对齐

flex-end 交叉轴终点处对齐

center 交叉轴中点处对齐

baseline 项目第一行文字的基线对齐

6.align-content值：

strech(默认值)

flex-start

flex-end

center

space-between 与交叉轴两端对齐，轴线间间隔平均分布

space-around 单轴线两侧间隔相等。轴线间间隔比轴边间隔大一倍

flex项目属性

order 定义项目排列顺序。数值越小，排列越靠前，默认为0

.item {
  order: ;
}

flex-grow 定义项目放大比例，默认为0

如果所有项目flex-grow属性为1，它们将等分剩余空间。以此类推

flex-shrink 定义项目缩小比例，默认为1

如果所有项目flex-shrink属性为1，当空间不足时等比例缩小。
如果有一个项目flex-shrink为0，其他项目都为1，空间不足时前者不缩小

flex-basis 定义在分配多余空间前，项目占据的主轴空间(main size)

浏览器据此计算主轴是否有多余空间，默认值为auto即项目本来的大小

.item {
  flex-basis:  | auto;
}

flex 是flex-grow,flex-shink,flex-basis的简写，语法糖，默认值0,1,auto，后两者可选

.item {
  flex: none | [  ? || ]
}

有两个快捷值：

auto： 1 1 auto

none： 0 0 auto

建议优先使用此属性代替多带带写3个分离的属性，因为浏览器会推算相关值。

align-self 允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性

默认值auto，表示继承父元素的align-items，如果没有父元素则等同于strech

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

GPU云服务器云服务器 flex布局 flex flex40 flex 教程

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

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

GitBook《拥抱未来的CSS布局方式：flex与grid布局》全教程

摘要：拥抱未来的布局方式与布局全教程本书系列文章为对中布局与布局的详细介绍，已在同步更新，如您在阅读过程中发现描述有误或错别字的情况，您可以向本项目提出或。主要是对于标准里的布局方式草案中的布局方式进行一些总结。 GitBook《拥抱未来的CSS布局方式：flex与grid布局》全教程本书（系列文章）为对CSS中flex布局与grid布局的详细介绍，已在GitHub同步更新，如您在阅读过程...

zebrayoung 2019-08-30 15:52 评论0 收藏0
写给 Android 开发的小程序布局指南，Flex 布局！

摘要：不过在小程序中，这就不是我们需要考虑的了，微信已经帮我们处理好了。而在新手阶段，暂时只需要关注两个参数指定一个块级布局，它其内的元素，总是起一个新行来显示，而微信小程序的很多视图容器组件，默认的就是，例如等。 showImg(https://segmentfault.com/img/remote/1460000015285633?w=750&h=562); 一、序 Hi，大家好，我是承...

Salamander 2019-08-29 15:43 评论0 收藏0
前端入门5-CSS弹性布局flex

摘要：总之有了基础，理解弹性布局蛮容易的。语法格式当容器的设置了溢出换行属性，且当前在交叉轴方向上存在多行的情况下，该属性才会生效。本篇文章已授权微信公众号 dasu_Android（大苏）独家发布声明本系列文章内容全部梳理自以下四个来源：《HTML5权威指南》《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白，入门跟...

王晗 2019-04-23 13:14 评论0 收藏0
重温 Flex 布局

摘要：而通过实现则简单多了源码原因解释中间一栏为核心，所以需要优先渲染，结构也就放在了前面，主要是使用属性将放置到前方。源码的列数每列的个数函数原因解释实现瀑布流还是比较简单的。介绍这是关于 Flex 布局的实践，原想还水一点字数来介绍 Flex 相关属性，想想还是算了，阮一峰大佬的两篇文章推上： Flex 布局教程：语法篇 Flex 布局教程：实例篇如何用 CSS 来增进对 Fl...

binta 2019-08-30 15:43 评论0 收藏0