非常教程

CSS参考手册

灵活的框布局 | Flexible Box Layout

使用Flexbox | CSS Flexible Box Layout: Using CSS flexible boxes

CSS3 Flexible BoxFlexbox是一种布局模式,旨在适应不同的屏幕尺寸和不同的显示设备。对于许多应用程序来说,柔性盒模型比块模型更容易,因为它不使用浮动块,也不使用柔性容器的边距来折叠其内容的边距。

许多设计师发现flexboxes比box更容易使用。没有很多的工作,div当设计师不想要他们的时候,经常会跳到页面的顶部 - 例如,将页脚粘贴到页面的底部是很困难的。柔性盒的宽度和高度会根据显示空间的不同而变化,从而将较低的下方元件固定到位。Flexbox逻辑还会询问您是想要div在右侧还是在底部累积。flexbox元素的显示顺序与源代码中的顺序无关。

因此,可以更简单地使用更清晰的代码来实现流行的布局。这种独立性故意仅影响视觉渲染,留下基于线性阅读的HTML源代码的语音顺序和导航。

注意:虽然CSS灵活框布局规范处于候选推荐阶段(请参见最新编辑草案),但并非所有浏览器都实现了Flexbox的所有功能。也就是说,现在flexbox已经有了很好的支持。请参阅每个属性上的兼容性表以了解最新的兼容性状态。

Flexible Boxes概念

柔性布局的定义方面是能够改变其项目的宽度和/或高度以最佳地适应任何显示设备上的可用空间。柔性容器扩展项目以填充可用空间,或缩小它们以防止溢出。

块布局是垂直偏置; 内联布局是水平偏置的。Flexbox布局允许。虽然块布局对于页面来说效果很好,但是对于应用程序组件,应用程序组件会随着用户代理的变化,手机从垂直方向翻转到水平方向等等而改变方向,调整大小,拉伸或缩小,这是不方便的。Flexbox布局擅长小规模布局,而(新兴)网格布局则适用于较大规模的布局。这两者都是CSS工作组的更广泛努力的一部分,以提供具有不同用户代理的Web应用程序的更好的互操作性,不同的书写模式和其他需求。

Flexible Boxes 词汇

flexible box不使用水平(内联)和垂直(块),而是使用主轴和交叉轴。如果flex-directioncolumn,那么垂直将是主轴,水平将是横轴。考虑下面的图表。它示出了具有柔性容器flex-directionrow,这意味着柔性元素在主轴上横向相互跟踪。

使用Flexbox  |  CSS Flexible Box Layout: Using CSS flexible boxes

Flex container包含Flex项目的父元素。柔性容器使用定义的flexinline-flex所述的值displayproperty.Flex项

Flex容器的每个孩子都成为一个Flex项目。直接包含在Flex容器中的文本被包装在匿名Flex项目中。

轴线

每个flexible box 布局都遵循两个轴。主轴是弹性项相互跟随的轴。十字轴是垂直于主轴的轴。

  • flex-direction属性建立主轴。
  • justify-content属性定义在当前行的主轴上如何布局FLEX项。
  • align-items属性定义当前行上沿交叉轴排列FLEX项的默认方式。
  • align-self属性定义单个弹性项目如何在横轴上对齐,并覆盖默认设置的默认项目align-items.

方向

柔性容器的main start/main endcross start/cross end 描述了柔性物品流的起点和终点。它们遵循由writing-mode(从左到右,从右到左等)建立的向量中的柔性容器的主轴和横轴。

  • order属性将元素分配给序号组,并确定首先出现哪些元素。
  • flex-flow特性缩短了flex-direction and flex-wrap

线

根据flex-wrap属性,该属性控制交叉轴的方向和新行的堆叠方向。

维数

弹性物品的不可知的高度和宽度的等价物是主要尺寸横向尺寸,其分别沿着挠性容器的主轴线和横轴线。

  • min-heightmin-width特性的初始值是0。
  • flex属性简化了flex-growflex-shrinkflex-basis属性来建立弹性项目的灵活性。

指定一个 Flexible Box

要使用此样式指定元素的CSS,请按如下所示设置display属性:

display: flex;

display: inline-flex;

这样做将元素定义为弹性容器,将其子元素定义为弹性项目。该flex值使flex容器成为块级元素。该inline-flex值使flex容器成为原子内联级元素。

注意:对旧浏览器使用前缀标记时,请将前缀添加到display属性中,而不是display属性本身。例如display: -webkit-flex

FLEX项目注意事项

直接包含在Flex容器中的文本将自动包装在匿名Flex项目中。但是,只包含空格的匿名Flex项目不会被渲染,就像它被指定一样display: none

一个flex容器的绝对定位子元素被定位,这样他们的静态位置就被确定在他们的flex容器的主启动内容框的角落。

相邻的弹性项目的边距不会折叠。使用auto边距可以吸收垂直或水平方向上的额外空间,并可用于对齐或分隔相邻的柔性项目。有关更多详细信息,请参阅W3C CSS灵活框布局模块规范中的与“自动”边距对齐。

与其他CSS中的居中方法不同,Flexbox的对齐属性“真正”居中。这意味着Flex项目将保持居中,即使它们溢出Flex容器。但是,如果它们溢出页面的顶部边缘或左​​边缘(像英语这样的LTR语言;问题出现在像阿拉伯语这样的RTL语言的右边缘),有时会出现问题,因为您无法滚动到那个地方,即使那里有内容!在将来的版本中,对齐属性将被扩展为具有“安全”选项。现在,如果这是一个问题,你可以使用利润来实现中心,因为他们会以“安全”的方式做出反应,如果溢出则停止对中。而不是使用align-属性,只需在您希望居中的弹性项目上放置自动边距即可。而不是justify-属性,在柔性容器中的第一个和最后一个Flex项目的外边缘上放置自动边距。自动边距将“弯曲”并呈现剩余空间,当有剩余空间时将弯曲项目居中,并在没有剩余空间时切换到正常对齐。但是,如果您尝试justify-content在多行柔性盒中使用基于边距的居中取代,则可能不是很好,因为您需要将边距放在每行的第一个和最后一个柔性项目上。除非您可以提前预测哪些项目将在哪条线上结束,否则无法可靠地在主轴上使用基于边界的居中替换justify-content属性。

回想一下,虽然元素的显示顺序与源代码中的顺序无关,但这种独立性仅影响视觉渲染,留下基于源顺序的语音顺序和导航。即使是order财产不影响语音或导航顺序。因此,开发人员必须注意在源代码中正确排列元素,以免损坏文档的可访问性。

Flexible Box属性

属性不影响flexible boxes

由于flexible box使用不同的布局算法,因此在FLEX容器上有些属性没有意义:

  • column-*属性的多列模块对弹性物品没有影响。
  • clear对弹性项没有影响。
  • float使display元素的属性计算为block
  • vertical-align对弹性项的对齐没有影响。

实例

基本FLEX示例

这个基本的例子展示了如何将“灵活性”应用于一个元素,以及兄弟元素如何在一个灵活的状态下运行。

​<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
    .flex {
        /* basic styling */
        width: 350px;
        height: 200px;
        border: 1px solid #555;
        font: 14px Arial;

        /* flexbox setup */
        display: flex;
        flex-direction: row;
    }

    .flex > div {
        flex: 1 1 auto;
        width: 30px; /* To make the transition work nicely. (Transitions to/from
                        "width:auto" are buggy in Gecko and Webkit, at least.
                        See http://bugzil.la/731886 for more info.) */
        transition: width 0.7s ease-out;
    }

    /* colors */
    .flex > div:nth-child(1){ background: #009246; }
    .flex > div:nth-child(2){ background: #F1F2F1; }
    .flex > div:nth-child(3){ background: #CE2B37; }

    .flex > div:hover {
        width: 200px;
    }
   
    </style> 
  </head>
  <body>
    <p>Flexbox nuovo</p>
    <div class="flex">
      <div>uno</div>
      <div>due</div>
      <div>tre</div>
    </div>
  </body>
</html>

圣杯布局示例

此示例演示flexbox如何提供动态更改不同屏幕分辨率的布局的功能。下图说明了转换。

使用Flexbox  |  CSS Flexible Box Layout: Using CSS flexible boxes

这里举例说明了适合于浏览器窗口的页面布局必须针对智能电话窗口进行优化的情况。这些元素不仅要减小尺寸,而且要按顺序改变。Flexbox使这非常简单。

​<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
    body {
        font: 24px Helvetica;
        background: #999999;
    }

    #main {
        min-height: 800px;
        margin: 0;
        padding: 0;
        display: flex;
        flex-flow: row;
    }
 
    #main > article {
        margin: 4px;
        padding: 5px;
        border: 1px solid #cccc33;
        border-radius: 7pt;
        background: #dddd88;
        flex: 3 1 60%;
        order: 2;
    }

    #main > nav {
        margin: 4px;
        padding: 5px;
        border: 1px solid #8888bb;
        border-radius: 7pt;
        background: #ccccff;
        flex: 1 6 20%;
        order: 1;
    }
  
    #main > aside {
        margin: 4px;
        padding: 5px;
        border: 1px solid #8888bb;
        border-radius: 7pt;
        background: #ccccff;
        flex: 1 6 20%;
        order: 3;
    }
 
    header, footer {
        display: block;
        margin: 4px;
        padding: 5px;
        min-height: 100px;
        border: 1px solid #eebb55;
        border-radius: 7pt;
        background: #ffeebb;
    }
 
    /* Too narrow to support three columns */
    @media all and (max-width: 640px) {
        #main, #page {
            flex-direction: column;
        }

        #main > article, #main > nav, #main > aside {
        /* Return them to document order */
            order: 0;
        }
  
        #main > nav, #main > aside, header, footer {
            min-height: 50px;
            max-height: 50px;
        }
    }
    </style>
  </head>
  <body>
    <header>header</header>
    <div id='main'>
      <article>article</article>
      <nav>nav</nav>
      <aside>aside</aside>
    </div>
    <footer>footer</footer>
  </body>
</html>

实际操作

有几个flexbox 实验可供在线试用:

  • Flexbox游乐场
  • Flexy Boxes

  • Flexbox特性演示
  • Flexbox Froggy

要记住的事情

描述灵活项目布局的算法有时会非常棘手。这里有一些事情要考虑,比如:设计使用灵活的盒子。

灵活的盒子按照书写模式进行布局,即根据开始结束的位置布置主开始主结束

交叉开始交叉结束依赖于开始之前取决于值的位置的定义direction

只要break-属性允许,分页符可以在弹性盒子布局中使用。CSS3 break-afterbreak-beforebreak-inside以及CSS 2.1 page-break-beforepage-break-after以及page-break-inside性能上被接受的柔性容器,柔性项目,内弯曲的物品。

浏览器兼容性

Feature

Firefox (Gecko)

Chrome

Internet Explorer

Opera

Safari

Basic support (single-line flexbox)

18.0 (18.0)6-moz2 22.0 (22.0)

21.0-webkit 29.0

113

12.10-webkit5

6.1-webkit1

Multi-line flexbox

28.0 (28.0)

21.0-webkit 29.0

113

12.105 15 -webkit

6.1-webkit1

Feature

Firefox Mobile (Gecko)

Firefox OS

Android

IE Phone

Opera Mobile

Safari Mobile

Basic support (single-line flexbox)

18.0 (18.0)-moz2 22.0 (22.0)

1.0-moz2 1.1

2.1-webkit4 4.4

11

12.105 15-webkit

7-webkit1

Multi-line flexbox

28.0 (28.0)

1.3

2.1-webkit4 4.4

11

12.105 15-webkit

7-webkit1

CSS

层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS目录

1.动画和转换 | Animations & Transitions
2.背景和边框 | Backgrounds & Borders
3.基本框模型 | Basic Box Model
4.基本用户界面 | Basic User Interface
5.框对齐 | Box Alignment
6. 级联和继承 | Cascading & Inheritance
7.颜色 | Color
8. 合成与混合 | Compositing & Blending
9.条件和规则 | Conditional Rules
10.计数器样式 | Counter Styles
11.设备适配 | Device Adaptation
12.扩展 | Extensions
13.滤镜效果 | Filter Effects
14.灵活的框布局 | Flexible Box Layout
15.字体 | Fonts
16.片段模块 | Fragmentation
17.全屏 API | Fullscreen API
18. 生成内容 | Generated Content
19.网格布局 | Grid Layout
20.图像值 | Image Values
21.初始线格局 | Inline Layout
22.列表和计数器 | Lists & Counters
23.逻辑属性 | Logical Properties
24.面具 | Masking
25.媒体查询 | Media Queries
26.杂项 | Miscellaneous
27.Miscellaneous Level 1
28.Miscellaneous Level 2
29.运动路径 | Motion Path
30. 多列布局 | Multi-column Layout
31.命名空间 | Namespaces
32.项目模型 | Object Model View
33.网页媒体 | Paged Media
34.定位布局 | Positioned Layout
35.伪元素 | Pseudo-
36.节奏大小 | Rhythmic Sizing
37. Ruby布局 | Ruby Layout
38.可缩放矢量图形 | Scalable Vector Graphics
39.滚动快照 | Scroll Snap
40.选择 | Selectors
41.形状 | Shapes
42.文本 | Text
43.文字装饰 | Text Decoration
44.变换 | Transforms
45.值和单位 | Values & Units
46.变量 | Variables
47.写入模型 | Writing Modes
48.CSS 教程
49.CSS 创建
50.CSS Id 和 Class选择器
51.CSS 简介
52.CSS 盒子模型
53.CSS Table(表格)
54.CSS 列表样式(ul)
55.CSS 链接(link)
56.CSS Fonts(字体)
57.CSS Text(文本)
58.CSS Backgrounds(背景)
59.CSS Display(显示) 与 Visibility(可见性)
60.CSS 尺寸 (Dimension)
61.CSS 分组和嵌套
62.CSS 轮廓(outline)属性
63.CSS Border(边框)
64.CSS 图像透明/不透明
65.CSS 导航栏
66.CSS 伪元素
67.CSS 伪类
68.CSS Float(浮动)
69.CSS Position(定位)
70.CSS 总结
71.CSS 属性选择器
72.CSS 媒体类型
73.CSS 图像拼合技术
74.CSS 实例
75.CSS 组合选择符
76.响应式 Web 设计 – 框架
77.响应式 Web 设计 – 视频(Video)
78.CSS 提示工具(Tooltip)
79.CSS 布局 Overflow
80.CSS 计数器
81.CSS 表单