【flexbox弹性布局学习指南】CSS热门布局方案

简介: 我们的 CSS flexbox 布局综合指南。这份完整的指南解释了有关 flexbox 的所有内容,重点介绍了父元素(flex 容器)和子元素(flex 项)的所有不同可能属性。它还包括历史、演示、模式和浏览器支持图表。

一、弹性布局的诞生背景

(Flexbox LayoutFlexible Box)模块(截至 2017 年 10 月的 W3C 候选推荐)旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间,即使它们的大小未知和 / 或动态(因此词 “弯曲”)。


flex 布局背后的主要思想是让容器能够改变其项目的宽度 / 高度(和顺序)以最好地填充可用空间(主要是为了适应各种显示设备和屏幕尺寸)。弹性容器扩展项目以填充可用的可用空间或缩小它们以防止溢出。


最重要的是,与常规布局(基于垂直地块和基于水平的内联)相比,flexbox 布局与方向无关。虽然这些适用于页面,但它们缺乏灵活性(不是双关语)来支持大型或复杂的应用程序(尤其是在涉及方向更改、调整大小、拉伸、收缩等方面)。


注意: Flexbox 布局最适合应用程序的组件和小规模布局,而 Grid 布局适用于更大规模的布局。

二、基础知识和术语

由于 flexbox 是一个完整的模块而不是单个属性,它涉及到很多东西,包括它的整个属性集。其中一些是要设置在容器上(父元素,称为 “flex container”),而其他是要设置在子级(称为 “flex items”)上。


如果 “常规” 布局基于块流方向和内联流方向,则弹性布局基于 “弹性流方向”。请看一下规范中的这张图,解释了 flex 布局背后的主要思想。


解释 flexbox 术语的图表。 穿过 flexbox 主轴的尺寸称为主尺寸,另一个方向是横向尺寸。 这些尺寸有一个主开始、主结束、交叉开始和交叉结束。


项目将按照 main axis(from main-startto main-end) 或横轴 (from cross-startto cross-end) 排列。


  • 主轴 —— 弹性容器的主轴是弹性项目沿其布置的主轴。请注意,它不一定是水平的;这取决于 flex-direction 属性(见下文)。
  • 主启动 | main-end – 弹性项目放置在容器内,从 main-start 开始到 main-end。
  • 主尺寸 —— 一个弹性项目的宽度或高度,无论是在主尺寸,还是项目的主要尺寸。弹性项目的主要尺寸属性是 “宽度” 或 “高度” 属性,以主要尺寸中的为准。
  • 交叉轴 —— 垂直于主轴的轴称为交叉轴。它的方向取决于主轴的方向。
    交叉启动 | cross-end – 弹性线填充了项目,并从弹性容器的交叉开始侧开始放置到容器中,并朝向交叉端侧。
  • cross size – 弹性项目的宽度或高度,以交叉维度为准,是项目的交叉大小。横向尺寸属性是横向尺寸中的 “宽度” 或 “高度” 中的任何一个。

三、弹性盒属性

3.1 父级 (弹性容器)的属性

3.1.1 展示

这定义了一个弹性容器;内联或块取决于给定的值。它为其所有直接子级启用了弹性上下文。

.container {
  display: flex; /* or inline-flex */
}

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

3.2 弹性方向

这建立了主轴,从而定义了弹性项目放置在弹性容器中的方向。Flexbox 是(除了可选的包装)一个单向布局的概念。将弹性项目视为主要以水平行或垂直列布局。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row(默认):从左到右 ltr;从右到左 rtl
  • row-reverse:从右到左 ltr;从左到右 rtl
  • column: 相同,row 但从上到下
  • column-reverse: 相同,row-reverse 但从下到上

3.3 弹性包装

默认情况下,弹性项目都将尝试适合一行。您可以更改它并允许使用此属性根据需要包装项目。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap(默认):所有弹性项目都将在一行
  • wrap: flex 项目将从上到下包裹到多行。
  • wrap-reverse: flex 项目将从下到上换行成多行。

3.4 弹性流动

这是 flex-directionandflex-wrap 属性的简写,它们共同定义了 flex 容器的主轴和交叉轴。默认值为 row nowrap

.container {
  flex-flow: column wrap;
}

3.5 证明内容

这定义了沿主轴的对齐方式。当一行上的所有 flex 项目都不灵活,或者是灵活的但已达到最大大小时,它有助于分配额外的可用空间。当项目出行时,它还会对项目的对齐方式施加一些控制。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
  • flex-start(默认):项目被打包朝向 flex-direction 的开始。
  • flex-end: 项目被打包到 flex-direction 的末尾。
  • start: 物品被包装在方向的开始处 writing-mode。
  • end: 物品被包装到方向的尽头 writing-mode。
  • left: 物品被包装在容器的左边缘,除非这对。没有意义,否则 flex-direction 它的行为就像 start.
  • right: 物品被包装在容器的右边缘,除非这对。没有意义,否则 flex
  • direction 它的行为就像 end.
  • center:项目沿线居中
  • space-between:物品均匀分布在行中;第一项在起始行,最后一项在结束行
  • space-around:项目均匀分布在行中,周围空间相等。请注意,视觉上的空间是不相等的,因为所有项目的两边都有相等的空间。第一个项目将在容器边缘有一个空间单位,但下一个项目之间有两个空间单位,因为下一个项目有自己的适用间距。
  • space-evenly:项目分布使得任何两个项目之间的间距(以及边缘的空间)相等。


注意:浏览器对这些值的支持是有细微差别的。例如,space-between 某些版本的 Edge 从未获得过支持,并且 Chrome 还没有开始 / 结束 / 左 / 右。MDN 有详细的图表。最安全的值是 flex-start、flex-end 和 center。


还有两个额外的关键字可以与这些值配对:safe 和 unsafe. 使用 safe 确保无论您如何进行这种类型的定位,您都不能推动一个元素,使其呈现在屏幕外(例如,离开顶部),这样内容也不能滚动(称为 “数据丢失”)

3.6 对齐项目

这定义了弹性项目如何沿当前行的交叉轴布局的默认行为。将其视为 justify-content 横轴(垂直于主轴)的版本。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
  • stretch(默认):拉伸以填充容器(仍然尊重最小宽度 / 最大宽度)
  • flex-start// start:self-start 项目放置在横轴的开始处。这些之间的区别是微妙的,是关于尊重 flex-direction 规则或 writing-mode 规则的。
  • flex-end// end:self-end 项目放置在横轴的末端。区别又是微妙的,是关于尊重 flex-direction 规则与 writing-mode 规则的。
  • center:项目在横轴上居中
  • baseline:项目对齐,例如它们的基线对齐


和修饰符关键字可以与所有其他关键字一起使用(尽管注意 safe 浏览器支持),并帮助您防止对齐元素以使内容变得不可访问。

3.7 对齐内容

当横轴上有额外空间时,这将对齐 flex 容器的线,类似于在 justify-content 主轴内对齐单个项目的方式。


注意:该属性只对多行灵活容器生效,这里 flex-wrap 设置为 wrap 或 wrap-reverse)。单行灵活容器(即

whereflex-wrap 设置为其默认值 no-wrap)不会反映 align-content.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
  • normal(默认):项目被打包在它们的默认位置,就好像没有设置值一样。
  • flex-start/ start:包装到容器开头的物品。(更受支持的)flex-start 尊重,flex-direction 而 start 尊重 writing-mode 方向。
  • flex-end/ end:包装到容器末端的物品。(更多支持)flex-end 尊重,flex-direction 而端尊重 writing-mode 方向。
  • center:在容器中居中的项目
  • space-between:项目均匀分布;第一行在容器的开头,最后一行在结尾
  • space-around:项目在每行周围均匀分布
  • space-evenly:项目均匀分布,周围空间相等
  • stretch: 线条伸展以占用剩余空间


和修饰符关键字可以与所有其他关键字一起使用(尽管注意 safe 浏览器支持),并帮助您防止对齐元素以使内容变得不可访问。

四、间隙、行间隙、列间隙

gap 属性明确控制弹性项目之间的空间。它仅在不在外边缘的项目之间应用该间距。

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

该行为可以被认为是最小排水沟,就好像排水沟以某种方式更大(因为类似 justify-content: space-between;),那么只有当该空间最终变得更小时,差距才会生效。

它不仅适用于 flexbox,也 gap 适用于网格和多列布局。

五、子项的属性 (弹性项目)

5.1 命令

默认情况下,弹性项目按源顺序排列。但是,该 order 属性控制它们在弹性容器中出现的顺序。

.item {
  order: 5; /* default is 0 */
}

具有相同的项目 order 恢复到源订单。

5.2 弹性成长

这定义了弹性项目在必要时增长的能力。它接受用作比例的无单位值。它规定了项目应该占用的弹性容器内的可用空间量。

如果所有项目都 flex-grow 设置为 1,则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为

2,则该孩子将占用其他孩子之一的两倍空间(或者至少会尝试)。

.item {
  flex-grow: 4; /* default 0 */
}

负数无效。

5.3 弹性收缩

这定义了弹性项目在必要时收缩的能力。

.item {
  flex-shrink: 3; /* default 1 */
}

负数无效。

5.4 弹性基础

这定义了在分配剩余空间之前元素的默认大小。它可以是长度(例如 20%、5rem 等)或关键字。关键字的 auto 意思是 “看看我的宽度或高度属性”(这是由 main-size 关键字临时完成的,直到被弃用)。关键字的 content 意思是 “根据项目的内容调整大小”—— 这个关键字还没有得到很好的支持,所以很难测试,也很难知道它的兄弟 max-content、、min-content 和 fit-content 做什么。

.item {
  flex-basis:  | auto; /* default auto */
}

如果设置为 0,则不考虑内容周围的额外空间。如果设置为 auto,则根据其 flex-grow 值分配额外空间。

5.5 柔性

这是 flex-grow, flex-shrink 和 flex-basis 组合的简写。第二个和第三个参数 (flex-shrink 和 flex-basis) 是可选的。默认值为 0 1 auto,但如果您使用单个数值设置它,例如 flex: 5;,则会将 更改 flex-basis 为 0%,所以它就像设置 flex-grow: 5; flex-shrink: 1; flex-basis: 0%;。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

建议您使用此速记属性,而不是设置单个属性。速记智能地设置其他值。

5.6 对齐自我

align-items 这允许为单个弹性项目覆盖默认对齐方式(或由 指定的对齐方式)。

请参阅 align-items 说明以了解可用值。

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

请注意 float,clear 和 vertical-align 对弹性项目没有影响。

5.7 为 Flexbox 添加前缀

Flexbox 需要一些供应商前缀来支持尽可能多的浏览器。它不仅包括带有供应商前缀的属性,而且实际上还有完全不同的属性和值名称。这是因为 Flexbox 规范随着时间的推移发生了变化,创建了 “旧”、“补间” 和 “新” 版本。


也许处理这个问题的最好方法是编写新的(也是最终的)语法并通过 Autoprefixer 运行你的 CSS ,它可以很好地处理回退。


或者,这里有一个 Sass@mixin 来帮助处理一些前缀,它也让你知道需要做什么样的事情:

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}
@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}
.wrapper {
  @include flexbox();
}
.item {
  @include flex(1 200px);
  @include order(2);
}

六、例子

让我们从一个非常简单的例子开始,解决一个几乎每天都会遇到的问题:完美居中。如果你使用 flexbox,它再简单不过了。

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}
.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

这依赖于 auto 弹性容器中设置的边距吸收额外空间的事实。因此,设置边距 auto 将使项目在两个轴上完美居中。


现在让我们使用更多的属性。考虑一个包含 6 个项目的列表,所有项目都具有固定尺寸,但可以自动调整大小。我们希望它们在水平轴上均匀分布,这样当我们调整浏览器大小时,一切都可以很好地缩放,并且没有媒体查询。

.flex-container {
  /* We first create a flex layout context */
  display: flex;
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

完毕。其他一切都只是一些造型问题。

让我们试试别的。想象一下,我们网站顶部有一个右对齐的导航元素,但我们希望它在中型屏幕上居中,在小型设备上为单列。很容易。

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}
/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}
/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}
让我们通过玩弹性项目的灵活性来尝试更好的东西!带有全宽页眉和页脚的移动优先 3 列布局怎么样?并且独立于源顺序。
.wrapper {
  display: flex;
  flex-flow: row wrap;
}
/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
  flex: 1 100%;
}
/* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 */
/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}
/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

七、浏览器支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器支持该版本及更高版本的功能。

八、错误

Flexbox 当然也不是没有缺陷。我见过的最好的集合是 Philip Walton 和 Greg Whitworth 的 Flexbugs。这是一个跟踪所有这些的开源地方,所以我认为最好只链接到它。


相关实践学习
深入解析Docker容器化技术
Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。Docker是世界领先的软件容器平台。开发人员利用Docker可以消除协作编码时“在我的机器上可正常工作”的问题。运维人员利用Docker可以在隔离容器中并行运行和管理应用,获得更好的计算密度。企业利用Docker可以构建敏捷的软件交付管道,以更快的速度、更高的安全性和可靠的信誉为Linux和Windows Server应用发布新功能。 在本套课程中,我们将全面的讲解Docker技术栈,从环境安装到容器、镜像操作以及生产环境如何部署开发的微服务应用。本课程由黑马程序员提供。 &nbsp; &nbsp; 相关的阿里云产品:容器服务 ACK 容器服务 Kubernetes 版(简称 ACK)提供高性能可伸缩的容器应用管理能力,支持企业级容器化应用的全生命周期管理。整合阿里云虚拟化、存储、网络和安全能力,打造云端最佳容器化应用运行环境。 了解产品详情: https://www.aliyun.com/product/kubernetes
相关文章
|
10天前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
35 1
|
10天前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
91 1
|
10天前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
42 1
|
10天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
128 1
|
1月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day03-作业
本教程通过多个实例讲解JavaScript中for循环的常见用法,包括遍历数组、元素加1、求最大值/最小值、计算平均值、过滤偶数及字符串拼接等操作,并附有代码示例和运行结果图。
33 3
|
1月前
|
前端开发 JavaScript 算法
HTML/CSS/JavaScript基础学习day03-作业
本内容包含多个 JavaScript 编程示例,涵盖数组遍历、条件筛选、字符串处理、数值计算等常见操作,适合练习基础算法与逻辑思维。
32 5
|
1月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day02-作业
本教程介绍了JavaScript基础编程练习,包括使用for循环打印数字、判断奇偶数、计算总和以及用if语句判断正数的方法。每部分均配有示例代码和运行结果图,帮助初学者理解循环与条件判断的应用。最后通过思维导图回顾所学内容,强化知识点记忆。
38 2
|
1月前
|
前端开发 JavaScript 索引
HTML/CSS/JavaScript基础学习day04
阿铭学习JavaScript函数与对象的基础知识,包括函数定义、调用方式及参数使用,以及Array和String对象的常用操作。
38 0
|
1月前
|
JavaScript 前端开发 Java
HTML/CSS/JavaScript基础学习day03
本内容为阿铭学习JavaScript的第三天笔记,涵盖JavaScript基础概念、引入方式、基础语法、变量声明、数据类型、运算符、类型转换及流程控制语句等内容,适合初学者了解JavaScript编程语言的核心知识点。
49 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 3
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式