timg.jpg
说到flex布局，在我之前的影响中，只知道这是一种较传统布局较方便的布局，这种布局对我来说是全新的。在flex布局出现之前，我们使用的传统布局主要有以下几种：
- normal flow 文档流、正常流
- float + clear 清除浮动
- position relative + absolute 相对 + 绝对定位
- display inline-block 横向布局
- 负 margin 扩大宽度、产生位移
这些传统的布局方式虽然可以满足我们的很多需求，但是也并不方便，比如实现垂直居中。而现在我们就要开始接触flex布局这种新的布局方式了。flex也可称为“弹性布局”，flex布局有以下几个特点：
- 块级布局侧重垂直方向，行内布局侧重水平方向。flex布局与方向无关
- flex布局可以实现空间自动分配，自动对齐
- flex布局适用于简单的线性布局，复杂的布局则可以使用grid布局
接下来就将对flex布局的几个重要知识点进行归纳。
flex布局的基本概念
采用flex布局的元素，称为flex容器（flex container）。它的所有子元素自动成为容器成员，称为flex项目（flex item）。
png1.png
如上图所示，该flex容器在纵横有两根轴，其中横向的称为主轴（main axis），纵向的称为侧轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。子元素默认是沿主轴排列的。子元素在主轴方向的宽度叫做main size，在侧轴方向的高度叫做cross size。
flex container 的属性
flex container（flex容器）有如下六个属性：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction 方向
该属性主要有以下值：
- row：将所有子元素排列在一行，不会换行（默认值）
- row-reverse：将所有子元素从右至左排列在一行
- column：将所有子元素从上往下排列
- column-reverse：将所有子元素从下往上排列
flex-wrap 换行
该属性主要有以下值：
- wrap：换行
- nowrap：不换行（默认值）
- wrap-reverse：换行，但是第一行在下方，即反转 wrap 排列。
flex-flow 上面两个属性的缩写
默认值为row nowrap，可以以如下方法设定该属性：
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content 主轴方向的对齐方式
该属性主要有以下值：
- space-between：将各子元素排列在一行，并将行内的空间均分在元素之间
- space-around： 将各子元素排列在一行，并将行内的空间分配在元素两侧
- flex-start：子元素由主轴起点开始排列（默认值）
- flex-end：子元素由主轴终点开始排列
- center：在主轴方向居中
align-items 侧轴方向的对齐方式
该属性主要有以下值：
- stretch：将所有子元素伸展至最大高度，如果子元素未设置高度或设为auto，将占满整个容器的高度。（默认值）
- flex-start：子元素由侧轴起点开始排列
- flex-end：子元素由侧轴终点开始排列
- center：在侧轴方向居中
- baseline: 子元素的第一行文字的基线对齐。效果如下图所示：
png2.png
align-content 多行多列的对齐方式
该属性主要有以下值：
- space-between：将侧轴方向的空间均分在行距中
- space-around：将侧轴方向的空间分配在每行上下两侧
- flex-start：以侧轴起点对齐
- flex-end：以侧轴终点对齐
- stretch：子元素平均分配侧轴方向的空间，伸展排列（默认值）
flex item 的属性
flex item（子元素）有如下六个属性：
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
flex-grow 空间足够时的扩张比例
该属性默认值为0。
如果所有子元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个子元素的flex-grow属性为2，其他子元素都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shink 空间不足时的收缩比例
该属性默认值为1。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-basis 子元素的默认宽度
flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来宽度。
flex 上面三条属性的缩写
默认值为0 1 auto。可以以如下方式设定该属性：
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
order 子元素排序权重
数值越小，排列越靠前，默认为0。
align-self 自身的排序方式
即不使用父元素决定的对齐方式，自身设定一个对齐方式。可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
使用flex布局的几个技巧
flex 布局可以简便、完整、响应式地实现各种页面布局。下面就简要地记录几个flex布局的技巧
- 实现手机布局
如果内容被修剪，需要浏览器显示滚动条，以便查看剩余内容，可以使用 over-flow:auto;
实现手机上中下布局：
.content{height:100vh;display:flex;flex-direction:column;}
- 实现电脑左中右布局
.content>aside{width:120px;}
.content>main{height:400px;flex:1}
.content>nav{width:100px;}
- 完美居中
.parent{
display:flex;
justify-content:center;
align-items:center;
}
以上就是我此次关于flex学习的一些记录。可以看出，这次学习是围绕着阮一峰的一篇关于flex的博客展开的，他的博客对我此次学习flex布局以及此次的flex博客编写起到了一定的帮助。除此之外，我在这里推荐两个关于flex学习的小游戏，寓教于乐，十分有趣。
网友评论