Question

flex布局

Answer 1

注：实际使用中一般不说左右上下，而是以start、end的位置来定义和描述排列展示方向

无flex的img标签：

设置img(行内元素)为flex布局:

若设置为nowarp(flex-warp的默认值)，由于默认值flax-basis为auto，因此会对元素进行缩放操作，即缩放至适应盒子的尺寸。
而若某个元素无法缩放(例如设置了宽度)则会将溢出。
如果项目的子元素无法缩小，使用nowrap会导致溢出，或者缩小程度还不够小。

basis定义了该元素的布局空白（available space）的基准值。若设定为auto，则会检测该元素(一个felx-item)的宽度并作为basis的值，若未设定宽度，则使用内部元素(如文字、图片等)的宽度作为basis的值。
确定各个basis后，则会得出空白部分的大小，如上图中总宽度为500px，各个basis均为100px，则空白大小为200px。而对这200px的使用，会通过flex-grow定义。
flex-grow定义了元素的放大(沿主轴方向增长尺寸)情况。flex为0则不进行拉伸，flex为其余正整数，则会通过计算权重将空白部分摊分给各个元素，如第一个元素为2，其余为1，则会将200*2/4=100px摊分给a，50px摊分给b，50px摊分给c，试的三个字母各自进行拉伸(只是所处盒子的大小进行拉伸，字母本身不会拉伸变形)。
flex-shrink则定义了元素的缩放情况。那么可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。在计算flex元素收缩的大小时，它的最小尺寸也会被考虑进去，就是说实际上flex-shrink属性可能会和flex-grow属性表现的不一致。

flex的对齐主要是指在cross轴上的对齐方式(主轴或者说main轴可以通过定义宽度、flex-grow flex-shrink flex-basis等进行自定义对齐)。
这个属性的初始值为stretch，这就是为什么flex元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满flex容器 —— 最高的元素定义了容器的高度。
你也可以设置align-items的值为flex-start，使flex元素按flex容器的顶部对齐, flex-end 使它们按flex容器的下部对齐, 或者center使它们居中对齐.

justify-content 属性定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。")属性用来使元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向。初始值是flex-start，元素从容器的起始线排列。但是你也可以把值设置为flex-end，从终止线开始排列，或者center，在中间排列.

你也可以把值设置为space-between，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等。或者使用space-around，使每个元素的左右空间相等。

在实例中尝试下列justify-content属性的值：