弹性布局示例

qqlcbb 发布于2019-08-29 15:08 / 2327人阅读

摘要：弹性布局背景模块目前为旨在提供一种更有效的方式来布置，对齐和分配容器中的项目之间的空间，即使其尺寸未知和或动态因此单词。主轴弹性容器的主轴是弹性项目布局的主要轴子项目默认按照主轴排列。判断哪个是起始点，主要看弹性布局的流动方向。

原文章地址
https://css-tricks.com/snippe...
根据原文章翻译并添加自己的理解，有不对的欢迎指正。

弹性布局-背景

Flexbox Layout（Flexible Box）模块（目前为W3C Last Call Working Draft）旨在提供一种更有效的方式来布置，对齐和分配容器中的项目之间的空间，即使其尺寸未知和/或动态（因此单词“flex”）。

Flex布局背后的主要思想是赋予容器更改其项目的宽度/高度（和顺序）以最好地填充可用空间（主要适应各种显示设备和屏幕大小）的能力。弹性容器可扩展项目以填充可用空间，或缩小它们以防止溢出。

最重要的是，flexbox布局与方向无关，而不是常规布局（基于垂直方向的块和基于水平方向的内联块）。虽然这些工作对于页面很有效，但它们缺乏灵活性（无双关语）来支持大型或复杂应用程序（尤其是在改变方向，调整大小，拉伸，缩小等方面）。
注意：Flexbox布局最适合应用程序的组件和小型布局，而网格布局适用于大型布局。

基础知识和术语

由于flexbox是一个完整的模块，而不是一个多带带的属性。是一个属性集合，是用于设置容器和容器内各个子项目的属性集合。其中一些是为了在容器上设置（父元素，称为“flex容器”），而其他的则是为了在子item上设置（称为“flex items”）。

如果常规布局基于块流向和内联流向，则布局基于“弹性流动方向”。请从规范中查看这个数字，解释flex布局背后的主要思想。

基本上，项目将按照main axis（从main start 到 main end）或cross axis（从cross start 到 cross end）布置。

交叉轴是与主轴垂直的那条轴线，之所以不称之为横轴|纵轴，是因为主轴不一定是水平的，有水平和垂直两种，而交叉轴则是与主轴总是垂直的关系。

main axis（主轴）:

弹性容器的主轴是弹性项目布局的主要轴,子项目默认按照主轴排列。当心，它不一定是水平的;它取决于弹性方向属性flex-direction（见下文）。

main-start | main-end:

主轴与容器的有两个交叉点，一个是起始点一个是结束点。判断哪个是起始点，主要看弹性布局的流动方向。e.g. 如果flex-direction: row; 那么main start就是主轴与容器交叉的左侧的点，那么main end就是主轴与容器交叉的右侧的点，弹性布局中共子项是按照从起始点到结束点的方向排列的。

main size:

弹性容器的宽度或高度，以main size为准，是container的主尺寸。 Flex项目的main size 属性是“宽度”或“高度”属性，以主维度中的哪一个为准。

cross axis:

垂直于main axis的轴称为交叉轴。它的方向取决于main axis的方向。

cross-start | cross-end:

交叉轴与容器有也有两个交点，如果flex-direction：row; 那么顶部的点就是cross-start,底部的点就是cross-end

cross size:

弹性容器的宽度或高度，以为cross size为准，是item的交叉尺寸。cross size属性是交叉维度中的“宽度”或“高度”中的任何一个。

容器的属性： display

diplay定义了一个flex容器;内联或块取决于给定的值。它为所有直接的子项目提供了一个弹性环境。

display: flex; /* inline-flex */

请注意，CSS列对flex容器没有影响。

flex-direction 弹性布局的流动方向

容器内子项目的排列方式。四个取值 row（默认）、column、row-reverse、column-reverse
row：横向
column：纵向
row-reverse：横向倒序
column-reverse：纵向倒序

flex-wrap 是否换行

默认子项目排列为一行，此属性规定是否要换行，如何换行。三个取值 nowrap（默认）、wrap、wrap-reverse
nowrap：不换行从 main-start 排到 main-end 不换行，并且容器可能溢出
wrap：换行项目排序从 main-start 排到 main-end
wrap-reverse：换行、从 main-end 排到 main-start

flex-flow

该属性是一个复合属性，取值为两个值，第一个值是flex-direction, 第二个值是flex-wrap。
默认是flex-flow：row nowrap；

justify-content

items在主轴（main axis）上的对齐方式。取值有flex-start（默认）、 flex-end、center、space-between、 space-around。
flex-start：主轴的start方向对齐，即 main-start方向对齐
flex-end：主轴的end方向对齐，即 main-end 方向对齐
center: 主轴方向居中对齐
space-between: 主轴方向两端对齐,items之间间隔相等
space-around：item之间的间隔是item距离容器边框（main-start、main-end）之间的两倍。
space-evenly: items之间、item距离容器边框之间间距都相等。

align-items

items在交叉轴上的对齐方式。取值：flex-start、flex-end、 center、baseline、stretch（默认）。
flex-start: cross-start方向对齐
flex-end: cross-end方向对齐
center: 交叉轴中点对齐
baseline: items中第一行文字的基线
stretch: 默认填充items的高度为容器高度，与cross size一致。但是如果items有设置高度，则按照items的高度处理。

align-content

内容对齐方式,内容有多行（多条线）的情况下，交叉轴上的对齐方式。对于内容只有一行的，该属性不起作用,即flex-wrap的属性不能是nowrap。取值为：flex-start、flex-end、 center、space-between、space-around、stretch。
flex-start: 交叉轴start方向对齐。
flex-end: 交叉轴end方向对齐
center：交叉轴中点对齐
space-between: 两端对齐（start和end）。items之间间距相等
space-around: items之间的间距是到item到边框（start或end）的两倍。
stretch：items占据所有空间

项目的属性 order

定义item的排序，取值是interger类型的数据。取值越小，越靠前。默认值为0.可以取负值。

html

css

    .item0
        order 0
    .item1
        order 1
    .item2
        order -1
    .item3
        order -2

flex-grow

放大属性。item占据container的比例。默认值为0，不可以取负值。
如果所有item的flex-grow都被设置为1，那么所有子项将平分container的空间。如果有一个item的flex-grow设置为2，那么它占据的空间将是其余item的两倍。这种划分是基于主轴的。当主轴是横向时，是将宽度按照比例划分。当主轴是纵轴时，是将高度按照比例划分。

flex-shrink

缩小属性，默认值为1，不可以取负值。如果container下每个item都是flex-shrink：1；则当空间不足时等比例缩小。如果有以下flex-shrink属性取0；则其余item不缩小。

flex-basis

取值: | auto（默认值）

这将在分配剩余空间之前定义元素的默认大小。它可以是一个长度（例如20％，5rem等）或关键字。 auto关键字的意思是“查看我的宽度或高度属性”（暂时由main-size关键字完成，直到弃用）。内容关键字的意思是“根据项目的内容来确定它的大小” - 这个关键字还没有得到很好的支持，所以很难去测试并且很难知道它的最大内容，最小内容和适合内容的含义。

flex

是flex-grow、 flex-shrink 和 flex-basis属性的复合写法。默认取值 0 1 auto。推荐使用这种写法。

align-self

给某个子项（item）重写对齐方式。取值auto（默认）、flex-start、 flex-end、center、baseline、stretch. 每个取值含义align-item类似，只不过这个属性是给特定的item的。align-items是给容器下所有item的。

超融合服务器专线服务配置示例使用示例简明示例脚本示例

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

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

弹性布局示例

摘要：弹性布局背景模块目前为旨在提供一种更有效的方式来布置，对齐和分配容器中的项目之间的空间，即使其尺寸未知和或动态因此单词。主轴弹性容器的主轴是弹性项目布局的主要轴子项目默认按照主轴排列。判断哪个是起始点，主要看弹性布局的流动方向。原文章地址https://css-tricks.com/snippe...根据原文章翻译并添加自己的理解，有不对的欢迎指正。弹性布局-背景 Flexbox ...

piglei 2019-08-02 10:15 评论0 收藏0
前端入门5-CSS弹性布局flex

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

王晗 2019-04-23 13:14 评论0 收藏0
弹性布局flex 兼容写法

摘要：设置在弹性项目上的属性属性定义项目的排列顺序。属性定义了项目的缩小比例，默认为，即如果空间不足，该项目将缩小。属性允许单个项目有与其他项目不一样的对齐方式，可覆盖属性。兼容浏览器版本 Chrome 21+ Opera 12.1+ Firefox 22+ Safari 6.1+ IE 10+ 浏览器对最新flexbox规范的支持情况： Chrome 29+ Firefox 28+...

shiweifu 2019-08-30 11:21 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

garfileo 2019-08-30 11:25 评论0 收藏0
CSS 常用布局在小程序中的应用

摘要：常用布局在小程序中的应用所有布局的根本都是个基本概念定位浮动外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。具体实现，可以使用微信小程序的单位，以及使用定位浮动布局来实现。 CSS 常用布局在小程序中的应用所有css布局的根本都是3个基本概念：定位、浮动、外边距操纵我们其他的布局实现方式，都是基于正常的文档流来进行的。所以我们先来看看什么是正常的文档流。正常文...

CoderDock 2019-08-30 15:44 评论0 收藏0