Flex布局
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
一、flex弹性盒子概念
弹性盒子是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。
而我们为什么需要使用flex布局呢，相较于position定位布局和float浮动布局，flex布局操作更加的灵活和简便，解决元素居中问题， 自动弹性伸缩，适配不同大小的屏幕，和适配移动端。
二、flex模型
如果一个元素设置了display:flex(即开启了flex布局)，那么它就是这个弹性盒子的flex container,其直接子元素叫做flex items。
当元素表现为flex盒子是，它们沿着两个轴布局：
flex布局是用于按行或按列布局元素当布局方法，其中设定有主轴main axis,交叉轴cross axis(垂直于主轴)，它们代表着flex元素排列的方向，比如为flex盒子设置主轴flex-direction:row(默认值)，即该弹性盒子横向排列，所以主轴为横向的行，交叉轴为纵向的列。
两条轴有起始线(main/cross-start)与结束线（main/cross-end)。
三、flex布局方法
flex-container
html代码结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#flexbox{
display: flex;
background-color: aqua;
width: 600px;
height: 600px;
flex-flow: row wrap;
align-items: center;
}
.item{
width: 120px;
height: 100px;
background-color: antiquewhite;
border: 3px solid black;
margin : 1px;
font-size: 30px;
}
</style>
</head>
<body>
<div id='flexbox'>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>
flex-direction 设置主轴方向
| 参数 | 主轴方向 |
|---|---|
| row(默认值) | 左⇒右 |
| column | 上⇒下 |
| row-reverse | 右⇒左 |
| column-reverse | 下⇒上 |
主轴方向默认为row(从左到右)
设置主轴为column(从上到下)
flex-direction：row-reverse
flex-direction:column-reverse
flex-wrap 主轴 行满是否换行
| 参数 | 操作 |
|---|---|
| nowrap(默认值) | 不换行压缩密度 |
| wrap | 换行 |
| wrap-reverse | 反向换行 |
flex-flow
flex-direction 和 flex-wrap的结合体
flex-low: [flex-direction] [flex-wrap]
justify-content 主轴元素对齐方式
| 参数 | 操作 |
|---|---|
| flex-start(默认值) | 与main-start对齐(一般是左方向) |
| flex-end | 与main-end对齐(一般是右方向) |
| center | 靠着主轴居中对齐(一般就是居中对齐) |
| space-between | 两端对齐，靠着容器壁，剩余空间平分 |
| space-around | 分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配 |
| space-evenly | 平均对齐，不靠着容器壁，剩余空间平分 |
之上所有操作都是只对于主轴,要想达到完全效果，还有接下来的交叉轴元素对齐设置。
align-items item在交叉轴上的对齐方式
| 参数 | 操作 |
|---|---|
| stretch（默认值） | 如果项目未设置高度或设为auto，将占满整个容器的高度 |
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| baseline | item的第一行文字基线对齐 |
align-content 交叉轴行对齐方式 多行
| 参数 | 操作 |
|---|---|
| flex-start(默认) | 靠着cross-start对齐 |
| flex-end | 靠着cross-end对齐 |
| center | 靠着cross线居中对齐 |
| space-between | 两端对齐，靠着容器上下壁，剩余空间平分 |
| space-around | 分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配 |
| strentch | 伸缩，占满整个高度 |
flex-items
flex-grow
| 参数 | 操作 |
|---|---|
| 0默认值 | 不放大,保持初始值 |
| initial | 设置默认值,与0等效 |
| n | 放大因子: 正数 |
flex-shrink
| 1 默认值 | 允许项目收缩 |
|---|---|
| initial | 设置初始默认值,与 1 等效 |
| 0 | 禁止收缩,保持原始尺寸 |
| n | 收缩因子: 正数 |
flex-basis
| 参数 | 操作 |
|---|---|
| auto | item原来大小 |
| 其它大小 | 设置item |
order
| 参数 | 操作 |
|---|---|
| o (默认值) | 顺序不变 |
| 任意数 | 数值越小，排列越前 |
align-self 自定义某个item的对齐方式
| 参数 | 操作 |
|---|---|
| auto默认值 | 继承 align-items 属性值 |
| flex-start | 与交叉轴起始线对齐 |
| flex-end | 与交叉轴终止线对齐 |
| center | 与交叉轴中间线对齐: 居中对齐 |
| stretch | 在交叉轴方向上拉伸 |
| baseline | 与基线对齐(与内容相关用得极少) |
四、总结
相信看到这里，你对flex布局已经了解了不少，本文只是对常用对flex布局对一些属性做了简单对介绍，对于更多flex相关的知识可以移步MDN文档flexBox了解更多！
