-
设置方式
在style中或css中设置display为flex。 -
基本概念
主轴(main axis)，交叉轴/十字轴(cross axis)，起止点(start/end)，flex元素(flex-items)
image
-
默认值
align-items为stretch，即高度方向上拉伸。若各个元素高度不一致，则为配置height属性的元素会自动拉伸至最高元素的高度。若各个元素都配置了自定义height属性，则stretch无效：
由于三个div都设置了自己的height，则不会进行高度拉伸。
css:
.box {
display: flex;
flex-direction: row ;
}
html:
<div class="box">
<div style="height:50px">One</div>
<div style="height:30px">Two</div>
<div style="height:10px">Three</div>
</div>
第二个div由于未配置height，则会拉伸至最高即50px高度。
css:
.box {
display: flex;
flex-direction: row ;
}
html:
<div class="box">
<div style="height:50px">One</div>
<div">Two</div>
<div style="height:10px">Three</div>
</div>
而宽度方向会自性调整，如上述例子中，three就会比two要宽。
-
方向(direction)
通过配置flex-direction配置元素的排列方向。
- columns：从左向右横向排列
- columns-reverse：从右向左横向排序
- row:从上到下纵向排序
- row-reverse：从下到上纵向排序
注：实际使用中一般不说左右上下，而是以start、end的位置来定义和描述排列展示方向
-
换行问题(wrap)
flex-wrap属性默认为no-wrap，即不自动换行。也就意味着一行如果元素过多导致溢出，则默认不会换行显示数据，而是会把超出长度的数据自动删除掉。
注：flex布局下，已经对最大宽度进行了限制(限制为屏幕最大宽度)。
无flex时，可以设置img宽度超过屏幕宽度：
<html><img style="width:4000px" src="xxx"><html>
当设置为flex时，img宽度最多只能为屏幕大小，超出后自动缩放至原始图片大小：
<html><img style="display:flex width:4000px" src="xxx"><html>
以下几张图的宽度均配置为8000px
无flex的img标签：
无flex的img.png
设置img(行内元素)为flex布局:
flex布局的img标签.png
设置div(块级元素)为flex布局：
flex布局的div标签.png
可以设置flex-wrap的值为wrap，则会将超长的数据换行显示。
<html>
<head>
<style type="text/css">
.box {
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<div class="box">
<div style="width:500px">One</div>
<div style="width:600px">Two</div>
<div style="width:700px">Three</div>
</div>
</html
若设置为nowarp(flex-warp的默认值)，由于默认值flax-basis为auto，因此会对元素进行缩放操作，即缩放至适应盒子的尺寸。
而若某个元素无法缩放(例如设置了宽度)则会将溢出。
如果项目的子元素无法缩小，使用nowrap会导致溢出，或者缩小程度还不够小。
-
flex-direction和flex-wrap的缩写
flex-flow的用法为flex-direction flex-wrap -
flex-grow,flex-shrink,flex-basis
image
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属性的简写
通常将flex三个缩放属性进行缩写：flex-grow flex-shrink flex-basis -
常用初始值
- flex: initial 即flex: 0 1 auto，不进行拉伸，但会进行缩放防止溢出
- flex: auto 即flex: 1 1 auto，自动进行均匀拉伸和缩放
- flex: none 即flex: 0 0 auto，元素既不能拉伸或者收缩，但是元素会 按具有 flex-basis: auto 属性的flexbox进行布局。
- flex: <positive-number> 例如flex: 1，相当于flex: 1 1 0。
-
flex的对齐方式
flex的对齐主要是指在cross轴上的对齐方式(主轴或者说main轴可以通过定义宽度、flex-grow flex-shrink flex-basis等进行自定义对齐)。
这个属性的初始值为stretch，这就是为什么flex元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满flex容器 —— 最高的元素定义了容器的高度。
你也可以设置align-items的值为flex-start，使flex元素按flex容器的顶部对齐, flex-end 使它们按flex容器的下部对齐, 或者center使它们居中对齐.
- stretch
- flex-start
- flex-end
- center
-
flex主轴上的对齐
justify-content 属性定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。")属性用来使元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向。初始值是flex-start，元素从容器的起始线排列。但是你也可以把值设置为flex-end，从终止线开始排列，或者center，在中间排列.
你也可以把值设置为space-between，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等。或者使用space-around，使每个元素的左右空间相等。
在实例中尝试下列justify-content属性的值：
- stretch
- flex-start
- flex-end
- center
- space-around
- space-between
网友评论