Flex布局学习笔记

Flex总结

1. 基本概念

给div这类块状元素元素设置display:flex或者给span这类内联元素设置display:inline-flex，flex布局即创建！其中，直接设置display:flex或者display:inline-flex的元素称为flex容器，里面的子元素称为flex子项。
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

• flex容器(flex container): 采用Flex布局的元素
  • 轴: flex容器中默认存在两条轴
    • 水平主轴(main axis)
      • main start: 主轴起点与边框的交叉点(并不重要)
      • main end: 主轴终点与边框的交叉点(并不重要)
    • 交叉轴(与水平主轴垂直, cross axis)
      • cross start: 交叉轴起点与边框的交叉点(并不重要)
      • cross end: 交叉轴终点与边框的交叉点(并不重要)
  • flex子项目(flex item): 采用Flex布局的元素的所有子元素自动成为容器成员,即flex子项目
    • main-size: 单个子项目占据的主轴空间(不是宽度的含义! 取决于主轴方向)
    • cross-size: 单个子项目占据的交叉轴控件(不是高度的含义! 取决于主轴方向)
• flex属性

作用在flex容器上	作用在flex子项目上
- flex-direction	- order
- flex-wrap	- flex-grow
- flex-flow	- flex-shrink
- justify-content	- flex-basis
- align-items	- flex
- align-content	- align-self

2. 作用于容器的属性

2.1. flex-direction

决定主轴的方向(即子项目的排列方向)

flex-direction用来决定主轴的方向进而控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。语法如下:

flex-direction: row | row-reverse | column | column-reverse;

• row 主轴为水平方向，起点在右端
• row-reverse 主轴为水平方向，起点在左端
• column 主轴为竖直方向，起点在顶部
• column-reverse 主轴为竖直方向，起点在底部

2.2. flex-wrap

决定容器内flex子项目是否可换行
默认情况下，子项目都排在主轴线上，使用 flex-wrap 可实现子项目的换行。语法如下:

flex-wrap: nowrap | wrap | wrap-reverse;

• nowrap 默认不换行, 当主轴尺寸固定时，当空间不足时，子项目尺寸会随之调整而并不会挤到下一行(元素可能会溢出)
• wrap 子项目主轴总尺寸超出容器时换行，第一行在顶部(左端)
• wrap-reverse 子项目主轴总尺寸超出容器时换行，第一行在底部(右端)

2.3. flex-flow

flex-direction 和 flex-wrap的缩写, 不推荐使用

flex-flow: < flex-direction > || < flex-wrap >;

2.4. justify-content

定义容器内flex子项目在主轴的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

• flex-start 默认值, 表现为左(上)对齐
• flex-end 表现为右(下)对齐
• center 表现为居中对齐
• space-between 表现为两端对齐,flex子项目之间的间隔相等,多余的空白间距只在元素中间区域分配
• space-around 每个flex子项目两侧的间隔相等,每个flex子项目两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半
• space-evenly 每个flex子项目两侧空白间距完全相等

2.5. align-items

定义了子项目在交叉轴上的对齐方式
align-items指的就是flex子项目们相对于flex容器在垂直方向上的对齐方式，大家是一起顶部对齐呢，底部对齐呢，还是拉伸对齐

align-items: stretch | flex-start | flex-end | center | baseline;

• stretch 默认值。flex子项目拉伸,如果flex子项目设置了高度，则按照设置的高度值渲染，而非拉伸。
• flex-start 顶部(左端)对齐
• flex-end 底部(右端)对齐
• center 垂直居中对齐
• baseline 表现为所有flex子项都相对于flex容器的基线(子项目的第一行文字的基线对齐)对齐

2.6. align-content

定义了多根轴线的对齐方式,如果子项目只有一根轴线,那么该属性将不起作用

当flex-wrap设置为 nowrap 的时候，容器仅存在一根轴线，因为子项目不会换行，就不会产生多条轴线。
当flex-wrap 设置为 wrap 的时候，容器可能会出现多条轴线，这时候就需要去设置多条轴线之间的对齐方式了。语法如下:

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• stretch 默认值。每一行(列)flex子元素都等比例拉伸
• flex-start 顶部(左端)堆砌
• flex-end 底部(右端)堆放
• center 表现为整体垂直居中对齐
• space-between 表现为上下两行(左右两列)两端对齐,剩下每一行(列)元素等分剩余空间
• space-around 每一行(列)元素上下(左右)都享有独立不重叠的空白空间
• space-evenly 每一行(列)元素都完全上下等分

3. 作用于子项目的属性

3.1. order

定义flex子项目在容器中的排列顺序,数值越小,排列越靠前,默认值为 0

order: ; /* 整数值，默认值是 0 */

3.2. flex-grow

定义子项目的放大比例

flex-grow: ;

flex-grow不支持负值,默认值是0,表示不占用剩余的空白间隙扩展自己的宽度,如果flex-grow大于0,则flex容器剩余空间的分配就会发生,具体规则如下:

• 所有剩余空间总量是1
  • 如果只有一个flex子项设置了flex-grow属性值
    • 如果flex-grow值小于1，则扩展的空间就总剩余空间和这个比例的计算值
    • 如果flex-grow值大于1，则独享所有剩余空间
  • 如果有多个flex设置了flex-grow属性值
    • 如果flex-grow值总和小于1,则每个子项扩展的空间就总剩余空间和当前元素设置的flex-grow比例的计算值
    • 如果flex-grow值总和大于1,则所有剩余空间被利用,分配比例就是flex-grow属性值的比例,例如所有的flex子项都设置flex-grow:1，则表示剩余空白间隙大家等分

3.3. flex-shrink

定义了子项目的缩小比例

flex-shrink: ;
flex-shrink不支持负值,默认值是1,也就是默认所有的flex子项都会收缩,如果设置为0,则表示不收缩,保持原始的fit-content宽度

• flex子项目不换行,且容器空间不足,不足的空间就是完全收缩的尺寸
  • 如果只有一个flex子项目设置了flex-shrink
    • flex-shrink值小于1,则收缩的尺寸不完全,会有一部分内容溢出flex容器
    • flex-shrink值大于等于1,则收缩完全,正好填满flex容器
  • 如果多个flex子项目设置了flex-shrink
    • flex-shrink值的总和小于1,则收缩的尺寸不完全,每个元素收缩尺寸占完全收缩的尺寸的比例就是设置的flex-shrink的值
    • flex-shrink值的总和大于1,则收缩完全,每个元素收缩尺寸的比例和flex-shrink值的比例一样

3.4. flex-basis

定义了在分配多余空间之前,子项目占据的主轴空间,浏览器根据这个属性,计算主轴是否有多余空间

flex-basis: | auto;

• 默认值是auto,有设置width则占据空间就是width,没有设置就按内容宽度来
• 如果同时设置width和flex-basis,就渲染表现来看,会忽略width
• flex顾名思义就是弹性的意思,因此,实际上不建议对flex子项使用width属性,因为不够弹性
• 当剩余空间不足的时候,flex子项的实际宽度并通常不是设置的flex-basis尺寸,因为flex布局剩余空间不足的时候默认会收缩

3.5. flex

flex-grow,flex-shrink 和 flex-basis的简写

flex: none | auto | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

• flex默认值等同于flex:0 1 auto
• flex:none等同于flex:0 0 auto
• flex:auto等同于flex:1 1 auto

3.6. align-self

允许单个子项目有与其他子项目不一样的对齐方式

align-self: auto | flex-start | flex-end | center | baseline | stretch;

和作用在容器上的属性align-items基本上一样,只是多了个auto（默认值）,表示继承自flex容器的align-items属性值

4. Flex布局实例

圣杯布局

代码

<body class="HolyGrail">
  <header>header</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">content</main>
    <nav class="HolyGrail-nav">nav</nav>
    <aside class="HolyGrail-ads">ads</aside>
  </div>
  <footer>footer</footer>
</body>

.HolyGrail{
  display: flex;
  margin: 0;
  min-height: 100vh;
  flex-direction: column;
}
header{
  background: red;
  flex: 0 0 3em;
}
.HolyGrail-body{
 display: flex;
 flex: 1;
}
footer{
  background: green;
  flex: 0 0 3em;
}
.HolyGrail-nav{
  order: -1;
  flex: 0 0 12em;
  background: gray;
}

.HolyGrail-ads{
  flex: 0 0 12em;
  background: yellow;
}
.HolyGrail-content{
  flex: 1;
  background: pink;
}

参考资料

• Flex 布局教程：语法篇
• Flex 布局教程：实例篇
• 写给自己看的display: flex布局教程