《我当设计师 – CSS Flex 布局》
"我当设计师"模块，是从作者的角度，即把自己当作某类技术工具的创始人的角度去考虑功能的设计还有思想，因为从自我的角度出发，可以更好的了解作者开发这门技术工具用到的一些精妙之处，也能更好的掌握这个技术工具。
目录
一.开发目的及实现思想
开发目的：
Flexbox 布局也叫 Flex 布局，弹性盒子布局。它的目标是提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙。
主要思想：
主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。设定为flex布局的元素能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。
基于以上，我们可以确定的是，我们的开发对象分为父元素和子元素，其中需要完成的基本目标是：
- 父元素能够调整子元素的排列方式，水平还是垂直
- 父元素能够调节子元素的对齐方式，居中，居左（上），居右（下），元素之间的间隔
- 父元素能够根据可用空间，动态调整子元素宽度和高度
二.基本开发设计
注意：我们这里只会讲到主要的内容，会有一些细节忽略，文章最后会推荐大佬文章，可以跳转查看更多内容
在完成任务前，我们需要先加入我们的标识，即display: flex;确定布局方式，为我们正要开发使用的flex布局方式。
抵达任务1：父元素能够调整子元素的排列方式，水平还是垂直
这里我们就直接设置一个属性
flex-direction: row | row-reverse | column | column-reverse;
当设置为row时代表子元素都水平排布，column时都垂直排布，加个-reserve就是反方向的意思。
抵达任务2：父元素能够调节子元素的对齐方式
我们知道对齐方式就是水平的时候，居中，居左，居右，然后垂直的时候，居中，居上，居下，也就是属性的值有6个取值，所以，我们设置属性为
justify-content: flex-start | flex-end | center | space-between | space-around;
当我们的子元素排列方向是水平时，flex-start代表居左，flex-end代表居右，而当排列方式是垂直时，flex-start代表居上，flex-end代表居下，而space-between和space-around是指排列的元素之间的间隔是如何规定的。
但同时有时候我们也需要在水平的时候设置元素的居上还是距下（同理在垂直的时候也需要设置居左还是居右），也就需要属性
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
其中前面5个与上面类似，而stretch表示默认值、如果元素未设置高度或设为auto，将占满整个容器的高度。假设容器高度设置为 100px，而项目没有设置高度，则项目的高度也为 100px。
抵达任务3：父元素能够根据可用空间，动态调整子元素宽度和高度
首先我们需要明确的是什么是可用空间，父元素的总空间，假设是水平排布，设置宽度为屏幕宽度，那么减去我们子元素的宽度，剩余的宽度即是我们的可用空间，而在实际开发上，子元素中不确定大小的元素是不确定的，因为有些可能固定大小，有些内容动态变化，所以由父元素统一子元素的放大缩小属性是不明智的。
因此我们需要设置属性
flex-shrink: 数字;//元素缩小
flex-grow: 数字;//元素放大
其中我们将设置0为不管父元素的剩余可用空间为多少，都不缩小或放大，也就是关闭了放大缩小功能，而为1的话就是启用缩小放大功能。
但是如果我们要放大或者缩小一个元素，那么肯定需要有一个前提是它的原先宽度（高度）不为0，
也就是我们需要设置它的初始宽度（高度），也就是需要属性
flex-basis: 长度| auto;
因为我们很多时候是直接写宽度高度的嘛，所以需要auto属性去设置它根据尺寸的设定值来设置大小，并且设置为默认值。
同时我们很多时候需要设置子元素所占的比例，比如有三个子元素，我希望它以1：2：1的方式去占居剩余空间，这时候我们就需要多设置一个属性，但是考虑到这是在放大缩小的时候做的，而且它们的值我们是用数字表示的，那么我们可以设置不同的数字，代表不同的放大倍速，比如flex-grow为2的子元素的空间大小是flex-grow为1的子元素的空间大小的两倍。这里的话就可以将数字看作权重。
三.基于基本开发的额外开发设计
基于任务一的额外设计：
当我们设置排列方式是水平排列，同时当你的子元素的宽度总和超过你的父元素是，它便会默认缩小子元素的空间，以适配空间，但是我们有时候也希望它是直接换行而不是缩小元素，这个时候就需要添加属性：
flex-wrap: nowrap | wrap | wrap-reverse;
默认我们设置不换行nowrap，当需要换行的时候就可以设置wrap进行换行，-reverse就是反方向。
同时，当我们设置了这个换行之后，我们的父元素内就不只一行元素了，那么有时候也需要对垂直方向的选择做一些操作，这个时候我们就可以设置属性（垂直分布类似）
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
这里的属性和上面的对齐方式类似，直接抄
其他的额外设计：
因为有时候需要对子元素进行排序，所以设置了属性:
order: 数字;
根据子元素的order属性的数值的大小进行排序，从小到大
又有时候有些子元素和其他元素的排列方式不一样，如头像居右这样的，那么就可以设置属性
align-self: auto | flex-start | flex-end | center | baseline | stretch;
缩写：
很多时候我们会设置元素的排列方式同时设置是否换行，那就可以设置属性
flex-flow: flex-direction flex-wrap;
不过用处不大，分开写更直观一些。
同时设置，flex属性是flex-grow, flex-shrink 和 flex-basis的简写，因为后面两个大多数情况使用默认值就可以，所以后两个属性可选。默认值为：flex:0 1 auto。即不方法，等比例缩小，空间和子元素空间一致。
flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
四.示例小试
没有例子总觉得单调，所以来个小例子好了，建议大家自己试试，下面是结果和代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
.flex-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
height: 400px;
width: 400px;
background-color: #ffffff;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
margin: auto;
margin-top: 50px;
}
.line {
border-bottom: 1px solid #000000;
width: 20px;
height: 40px;
position: relative;
background-color: #FFFFFF;
}
.line_name {
position: absolute;
left: -40px;
bottom: -11px;
text-align: right;
}
.context {
/* flex-grow: 1; */
height: 31px;
background-color: gold;
margin: 25px 0;
margin-left: 6px;
}
.context-one {
margin-top: 74px;
}
.nobottomline {
border-bottom: none;
}
.line-first {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="flex-container">
<!-- 坐标刻度线 -->
<div class="line line-first">
<div class="line_name">早餐</div>
</div>
<div class="line nobottomline"></div>
<div class="line">
<div class="line_name">午餐</div>
</div>
<div class="line nobottomline"></div>
<div class="line">
<div class="line_name">晚餐</div>
</div>
<div class="line nobottomline"></div>
<div class="line">
<div class="line_name">宵夜</div>
</div>
<div class="line nobottomline"></div>
<div class="context context-one" style="width: 10%;"></div>
<div class="context" style="width: 50%;"></div>
<div class="context" style="width: 30%;"></div>
<div class="context" style="width: 60%;"></div>
</div>
</body>
</html>
五.结语
总结一下使用Flex布局的基本步骤就是：
1.设置父元素布局方式display: flex;
2.设置父元素排列方式flex-direction，是否换行flex-wrap
3.设置父元素对齐方式justify-content，align-content
4.设置子元素需要放大的元素以及放大比例
以上就是全部内容了，可能会忽略一些细节，大家可以在大佬的文章中去查看更多细节
这里是附带的大佬的文章链接
801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
