【H2O2|全栈】关于CSS（11）flex——更加优雅的布局

目录

CSS3入门

前言

准备工作

布局优化

如何使用flex布局

容器与成员

概念

轴线

容器的属性

成员的属性

预告和回顾

后话

---

CSS3入门

前言

本系列博客主要介绍CSS有关知识点，当前章节讲述CSS3相关内容。

本章节讲述flex布局的相关知识。

部分内容仅代表个人观点，仅供参考，希望能帮助到您。 

准备工作

软件：【参考版本】Visual Studio Code

插件（扩展包）：Open in browser, Live Preview, Live Server

浏览器版本：Chrome

系统版本： Win10/11/其他非Windows版本

*我的电脑是Win10的版本，仅供参考*

布局优化

在之前，我们想对一个元素的位置进行调整时，常常使用大量的内外边距、浮动、定位等操作来完成。特别是在使用浮动和定位时，还需要考虑脱离文档流带来的影响。

有时，我们设置好一些浮动的盒子，这些盒子的宽度刚刚好占满整个外层容器的宽，在缩放页面或者处于某些特殊比例的屏幕的时候，这些盒子由于不能自适应就可能被“挤下去”。

遇到上述这些情况的时候，我们在调整样式时可能会为了兼容性和美观花费大量时间。

好在CSS3的flex布局为我们的布局提供了一种全新的思路，让我们的布局操作变得更加简单快捷。

CSS3的弹性盒子(Flexible Box 或 FlexBox)，是一种当页面需要适应不同屏幕大小及设备类型时，确保元素拥有恰当的行为的布局方式。

引入弹性盒子布局模式的目的时提供一种更加有效的方式对一个容器中的子元素进行排列，对齐，和分配空白空间。

如何使用flex布局

对于html的任何标签来说，我们都可以使用以下两种常见的方式来指定其作为容器的flex布局方式：

• display：flex
• display：inline-flex

其中第二种方式是对行内元素进行使用的。

需要注意的是，如果设置了父元素的flex布局方式，那么子元素里的float，clear，vertical-align将失效。 

容器与成员

概念

采用Flex布局的元素，称为Flex容器（大盒子 flex container），简称“容器”。它的所有子元素自动成为容器的成员，称为Flex成员（小盒子 flex item），简称“成员”（或“项目”）。

轴线

容器默认有两条相互垂直的轴线——主轴（main axis）和交叉轴（cross axis）。

在不设置轴线方向时，主轴的方向为水平方向，成员默认沿主轴方向分布。

容器的属性

容器常见的属性有下面6种：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

定义主轴的方向（成员排列的方向），包含以下四种常见属性：

1. row：主轴为水平方向，起点在左侧  默认
2. row-reverse：主轴为水平方向，起点在右侧
3. column：主轴为垂直方向，起点在上侧  默认
4. column-reverse：主轴为垂直方向，起点在下侧

flex-wrap

定义子元素超出容器时是否换行，包含以下三种常见属性：

1. nowrap：不换行  默认情况下项目都排在轴线上
2. wrap：换行  第一行在前面
3. wrap-reverse：换行  第一行在后面

flex-flow

简写flex-direction和flex-wrap属性。默认值为row nowrap。

justify-content

定义项目在主轴上的对齐方式，包含以下六中常见属性：

1. flex-start：默认 向主轴开始的位置对齐
2. flex-end：向主轴结束的位置对齐
3. center：主轴方向居中对齐
4. space-around：剩余空间主轴方向上以环绕的方式平均分配给项目
5. space-between：剩余空间主轴方向上项目之间平均分配
6. space-evenly：剩余空间主轴方向上平均分配

后三种方式看着有一些抽象，我们先按照顺序放出三种的效果：

 

aroud实质上等于是在元素沿主轴方向的两侧加上了相同的margin，比如1、2之间的距离就是1到容器左侧的距离的两倍。 

between实质上就是两侧的元素紧靠容器边界，中间的成员等间隔。

evenly实质上就是所有的主轴上的剩余空间间距都相同，包括成员与成员之间的以及成员与边界之间的。

align-items

定义项目在交叉轴上的对齐方式，包含以下五种常见属性：

1. stretch：默认值 如果项目未设置高度或设为auto，将沾满容器的高度
2. flex-start：向交叉轴轴开始的位置对齐
3. flex-end：向交叉轴结束的位置对齐
4. center：交叉轴方向居中对齐
5. baseline：项目的第一行文字的基线对齐

这个文字基线对齐和vertical-align是一致的。

align-content

定义多根轴线的对齐方式，这个属性只有在换行之后才会生效，即主轴数量超出一根时生效。常见的属性值有以下七种;

1. flex-start：向交叉轴轴开始的位置对齐
2. flex-end：向交叉轴结束的位置对齐
3. center：交叉轴方向居中对齐
4. space-around：剩余空间交叉轴方向上以环绕的方式平均分配给项目
5. space-between：剩余空间交叉轴方向上项目之间平均分配
6. space-evenly：剩余空间交叉轴方向上平均分配
7. stretch：默认值  轴线占满整个交叉轴 

成员的属性

成员常见的属性有以下6种：

• order 
• flex-grow
• flex-shrink 
• flex-basis
• flex
• align-self

order

排序， 定义成员的排列顺序，数值越小，成员越靠前排列。

默认值为0，可以是负值 。

flex-grow

扩大，定义项目的放大比例。

默认为0，即如果有剩余空间也不放大。

在不为0时，设置了该属性的成员在主轴方向上将会扩大指定倍数。

flex-shrink

缩小，定义成员的缩小比例。

默认为1，即如果空间不足，该成员不缩小。

不可为负值，设置大于1的值为缩小的倍数。

flex-basis

定义了在分配多余空间之前，成员占据的主轴空间。

浏览器根据这个属性，己算主轴是否有空间。

默认值为auto，即成员的本来大小。

flex

简写flex-grow，flex-shrink，flex-basis属性。

默认值为 0 1 auto。

align-self

允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性。

默认值为auto，继承容器的对齐方式。

1. stretch：默认值 如果项目未设置高度或设为auto，将沾满容器的高度
2. flex-start：向交叉轴轴开始的位置对齐
3. flex-end：向交叉轴结束的位置对齐
4. center：交叉轴方向居中对齐
5. baseline：项目的第一行文字的基线对齐

预告和回顾

对网页布局和制作感兴趣的朋友，可以看下面的CSS专栏，里面有很多讲解详尽的案例，当前为第九期：

专栏 | CSS入门http://t.csdnimg.cn/4bvCJ当然，也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。

后话

在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。

==期待与你在下一期博客中再次相遇==

——浓度骤降的【H2O2】