上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

Flex布局

[复制链接]
  • TA的每日心情

    前天 22:44
  • 签到天数: 416 天

    [LV.9]以坛为家II

    148

    主题

    423

    回帖

    1133

    积分

    版主

    积分
    1133

    油中2周年生态建设者

    发表于 2021-3-1 18:55:18 | 显示全部楼层 | 阅读模式

    本帖最后由 小陈 于 2021-3-1 18:56 编辑

    Flex 布局是什么

    Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

    任何一个容器都可以指定为 Flex 布局。

    image.png

    行内元素也可以使用 Flex 布局。

    image.png

    注意,设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

    基本概念

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

    容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end

    项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

    容器的属性

    image.png

    首先我们说一下flex-direction,这一属性决定的主轴的方向

    image.png

    image.png

    flex-wrap

    默认情况下,项目都排在一条线(又称"轴线")上。

    那么如果一条轴线排不下,如何换行。

    image.png

    nowrap(默认):不换行。

    wrap:换行,第一行在上方。

    wrap-reverse:换行,第一行在下方。

    flex-flow

    flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

    image.png

    justify-content

    justify-content属性定义了项目在主轴上的对齐方式。

    image.png

    image.png

    align-items

    align-items属性定义项目在交叉轴上如何对齐。

    image.png

    image.png

    align-content

    align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

    image.png

    image.png

    常见布局的Flex写法

    http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

    I don't hate programming but the fucking world.
  • TA的每日心情

    前天 22:44
  • 签到天数: 416 天

    [LV.9]以坛为家II

    148

    主题

    423

    回帖

    1133

    积分

    版主

    积分
    1133

    油中2周年生态建设者

    发表于 2021-3-1 19:03:33 | 显示全部楼层
    I don't hate programming but the fucking world.
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表