本文目录
概述
在 flex 定制化开发布局模型中，flex 定制化开发容器的子级可以在任何定制化开发方向上布局，并且可以“伸缩”定制化开发它们的大小，定制化开发要么增长以填充未使用的空间，定制化开发要么缩小以避免溢出父级。定制化开发孩子的水平和垂直对齐定制化开发都可以很容易地操作。定制化开发这些框的嵌套（定制化开发水平内垂直，定制化开发或垂直内水平）定制化开发可用于构建二维布局。
定制化开发在真正了解之前，定制化开发我一直使用float进行布局，但了解了Flex布局之后，定制化开发发现它是个超好用的排版工具，定制化开发也是它拯救了我，定制化开发用它来做网页非常容易定制化开发达到响应式，定制化开发因为它有极强大的适应能力，定制化开发可以随着网页缩放去改变比例。
flex 定制化开发布局背后的主要思想是：定制化开发让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间（主要是为了适应各种显示设备和屏幕尺寸）。
Flex 布局表面上类似于块布局、常规布局（基于垂直的块和基于水平的内联）。它缺少许多可用于块布局的更复杂的以文本或文档为中心的属性，例如floats和columns。但似乎最重要的是，与常规布局相反，Flex布局与方向无关。Flex可用于Web 应用程序和复杂的网页，通可以自由分配空间和对齐内容。
但在大型的布局情况下我更推荐Grid网格布局。当然在我们还没学习到的情况下不需要考虑这些
我们可以看到CSDN使用了Flex布局
那么在了解了这么多信息之后，现在我们可以开始正式学习Flex布局了
属性
弹性容器的属性（父级）
display
display:flex 定义了一个弹性容器；内联或块取决于给定的值。它为所有直接子级启用了弹性上下文。
如果你想要flex的布局生效就需要提前给父元素设置 display:flex
.content{ display:flex}- 1
- 2
- 3
我们看一个示例
<style> .content { display: flex; } .box-parent{ width: 100%; border: 1px red solid; margin-bottom: 10px; } .box { width: 200px; height: 100px; background-color: black; margin: 10px; color: aliceblue; } </style> <!-- 添加的情况 --> <div class="box-parent content"> <h1>display: flex</h1> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div> <!-- 正常的情况 --> <div class="box-parent"> <h1>正常情况</h1> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
你能发现区别吗 ?
flex-direction 决定了弹性方向，它建立了主轴，从而定义了弹性项目放置在弹性容器中的方向。
Flex 是一个单向布局概念。将弹性项目视为主要以水平行或垂直列布局。
.content{ flex-direction: row | row-reverse | column | column-reverse;}- 1
- 2
- 3
- row（默认）：从左到右
- row-reverse ：从右到左
- column : 从上到下
- column-reverse : 从下到上
在设置了 flex-direction 之后因为默认是flex-direction:row ，这就是为什么前面的 display:flex 会默认排成一列，从左到右
flex-wrap 用于包装盒子，默认情况下，弹性项目都会自己主动组合成一行。
我们可以更改它并允许使用此属性根据需要的来包装项目。
.container { flex-wrap: nowrap | wrap | wrap-reverse;}- 1
- 2
- 3
- nowrap（默认）：所有弹性项目都将在一行，当宽度不够时则会压缩空间
- wrap : 项目将从上到下包裹成多行，当宽度不够时则会将最右边的项目向下换行
- wrap-reverse : 项目将从下到上换行成多行。当宽度不够时则会将最左边的项目向上换行
flex-flow
flex-flow 用于设置盒子的弹性流动.
这是 flex-directionandflex-wrap 属性的简写，它们共同定义了 flex 容器的主轴和交叉轴。默认值为 row nowrap 。
属性的值的效果和上面的 column 是一样的，该属性将 flex-directionan 与 flex-wrap 进行了组合。
你可以这样使用，将两个值放一起
.content{ flex-flow: nowrap row-reverse;}- 1
- 2
- 3
justify-content
justify-content 定义了沿主轴的对齐方式。
当一行上的所有 flex 项目都不灵活，或者是灵活的但已达到最大大小时，它有助于分配额外的可用空间。
当项目溢出行时，它还会对项目的对齐方式施加一些控制。
.content{ justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;}- 1
- 2
- 3
- flex-start（默认）：从 flex-direction定义的位置的开始。
- flex-end : 从 flex-direction定义的位置末尾开始。
- start : 在方向的开始处 writing-mode。
- end : 方向的尽头处 writing-mode。
- left : 在容器的左边缘，除非特殊的的要求，否则没有意义，就像start一样。
- right : 在容器的右边缘，除非特殊的的要求，否则没有意义，就像end一样。
- center ：项目沿线居中
- space-between ：均匀分布在行中；第一项在起始行，最后一项在结束行
- space-around ：均匀分布在行中，周围空间相等。请注意，视觉上的空间是不相等的，因为所有项目的两边都有相等的空间。第一个项目将在容器边缘有一个空间单位，但下一个项目之间有两个空间单位，因为下一个项目有自己的适用间距。
- space-evenly ：使得任何两个项目之间的间距（以及边缘的空间）相等。
这里穿插一个重要的知识点
- safe : 使用后会变成安全对齐,“安全” 的对齐方式在溢出时改变了对齐模式，以避免数据丢失。
- unsafe: 则关闭安全对其
例如
justify-content: safe center;- 1
但在使用中会有浏览器兼容性问题，所以我们只要在 flex 子元素上应用 margin: auto ; 即可解决问题，不需要用 safe 关键字
align-items
align-items 定义了弹性项目如何沿当前行的交叉轴布局的默认行为。将其视为justify-content横轴（垂直于主轴）的版本。
你可以理解为水平位置
.content { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;}- 1
- 2
- 3
- stretch（默认）：拉伸以填充容器（仍然遵守最小宽度/最大宽度）。
- flex-start、start : 放置在横轴的开始处。
- flex-end、end : 放置在横轴的末端。
- center ：在横轴上居中
- baseline ：对齐，例如基于文字基线对齐
align-content 用于对齐内容，当横轴上有额外空间时，将对齐 flex 容器的线，类似于在 justify-content 主轴内对齐单个项目的方式。
那么 align-content 有什么特点呢？和 align-items 有什么区别呢?
align-content属性只对多行灵的活容器生效，这里flex-wrap设置为wrap)。align-content 在单行灵活容器下（即 whereflex-wrap设置为其默认值no-wrap）不会生效。
也就是说
align-items的设置对象是行内成员;align-content的设置对象是所有行，且只有在多行弹性盒子容器中才生效。
当然
align-content的前提是这一个容器整体定义了一个高度
.content { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;}- 1
- 2
- 3
- normal（默认）：默认位置，就好像没有设置一样。
- flex-start、start ：在容器的开头。
- flex-end、end ：在容器的末端。
- center ：在容器中居中。
- space-between ：均匀分布；第一行在容器的开头，最后一行在结尾。
- space-around ：在每行周围均匀分布。
- space-evenly ：均匀分布，周围空间相等
- stretch : 线条伸展以占用剩余空间
gap, row-gap, column-gap
gap 属性明确控制弹性项目之间的空间。
注意是弹性项目之间的，不影响盒子边缘，和 margin 是有明显区别的。
.content{ display: flex; ... /* 行间距/列边距 统一设置 */ gap: 5px; /* 行间距/列边距 分开设置 */ gap: 5px 10px; /* 行间距/列边距 独立设置 */ row-gap: 5px; column-gap: 10px;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
它不仅适用于 flexbox，gap 适用于网格和多列布局。
弹性项目的属性（子项）
order
默认情况下，弹性项目按原顺序排列。但是，order 属性控制它们在弹性容器中出现的顺序。
.item { order: 2; /* 默认是 0 */}- 1
- 2
- 3
具有相同order 的节点会恢复到原来的排列。
我们可以看下面这个例子，认真思考
<style> .box-parent{ display: flex; width: 100%; border: 1px red solid; margin-bottom: 10px; } .box-parent > div { width: 200px; height: 100px; background-color: black; margin: 10px; color: aliceblue; }</style><div class="box-parent"> <div style="order: 1;">1 <p>order:1</p></div> <div style="order: 1;">2 <p>order:1</p></div> <div style="order: 2;">3 <p>order:2</p></div> <div style="order: -1;">4 <p>order:-1</p></div></div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
flex-grow
flex-grow 定义了弹性项目在必要时扩大/增长的能力。
它适合无单位的项目，它规定了项目应该占用的弹性容器内的可用空间量。
如果所有项目的 flex-grow 都设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个项目的值为2，则该项目将占用其他项目之一的两倍空间（或者至少会尝试）。
.item { flex-grow: 2; /* 默认 0 负数无效。*/}- 1
- 2
- 3
你可以自己试一下下面这个例子
<style> .box-parent{ display: flex; width: 100%; border: 1px red solid; margin-bottom: 10px; } .box { width: 100px; height: 100px; background-color: black; margin: 10px; color: aliceblue; }</style><div class="box-parent"> <div class="box" style="flex-grow: 1;">1</div> <div class="box" style="flex-grow: 4;">2</div> <div class="box">3</div> <div class="box">4</div></div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
flex-shrink
flex-shrink 定义了弹性项目在必要时收缩的能力。
.item { flex-shrink: 3; /* 默认是 1 */}- 1
- 2
- 3
注意区分， flex-grow 用于提高优先增长能力，而 flex-shrink 则是提高优先伸缩能力
flex-basis
flex-basis 定义了在分配剩余空间之前元素的默认大小。它可以是长度（例如 10%、2rem 、100px等）或关键字。
.item { flex-basis: | auto; /* 默认 auto */}- 1
- 2
- 3
flex
flex 是 flex-grow , flex-shrink 和 flex-basis 组合的简写。
第二个和第三个参数 ( flex-shrink 和 flex-basis ) 是可选的。
默认值为 0 1 auto ，但如果使用单个数值，例如 flex: 3 ，它就像设置 flex-grow: 5; flex-shrink: 1; flex-basis: 0% 。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}- 1
- 2
- 3
align-self
align-self 会覆盖已有的 align-items 的值，两者的可取值完全一样。
两者的区别在于：伸缩容器内部某个元素在排列方式需要有所差异，此时就不能使用
align-items ，因为 align-items 作用于整体，我们希望作用于部分，这就是 align-self 的作业。
示例
一个简单的菜单栏示例
<style> * { margin: auto; padding: 0; } header { width: 90%; min-width: 600px; height: 55px; background-color: rgba(0, 0, 0, 0.062); border-radius: 0 0 20px 20px; } .list { display: flex; height: 100%; } .list>li { flex-basis: 80px; text-align: center; list-style: none; } .logo { flex-grow: 0.5; }</style><header> <ul class="list"> <li class="logo"> <div> LOGO </div> </li> <li> <a href="#">Home</a> </li> <li> <a href="#">Page</a> </li> <li> <a href="#">More</a> </li> <li> <a href="#">About</a> </li> </ul></header>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48