一、简介
flex布局（也叫弹性布局）是比传统方式更加灵活的布局模式。
随着IE浏览器的逐渐消失，PC端也迎来了对flex的全面支持，flex布局注定会成为更为流行的布局方案。
内容上下左右居中，是我们常见的一个布局需求。
但是使用传统布局方式却很难实现，而使用flex布局可以轻松实现。
上下左右居中示例
样式：
.container {
display: flex; /*开启容器的flex布局*/
justify-content :center;/*主轴居中*/
align-items:center;/*纵轴居中*/
}效果：
flex布局是uni-app框架官方推荐布局模式。
二、布局结构
flex布局主要有外层元素和直接子元素构成。
- 外层元素叫 flex container（容器）
- 直接子元素叫 flex items （项目）
注意，以下样式截图中，容器设置了padding，故项目没有完全靠边。
三、如何使用
直接在样式中设置display值为flex或inline-flex即可。
- flex (块级原素)
- inline-flex (行内元素)
四、布局模型
从左上角开始，x轴叫main axis （主轴），y轴叫cross axis（侧轴/纵轴）。
元素的宽称为main size;高称为cross size。
五、容器的属性
1、flex-direction
控制项目排列方向。
- row：横向，从左到又（
默认）。 - row-reverse ：横向反向，及从右到左。
- column：纵向，及从上到下。
- column-reverse：纵向反向，及从下到上。
2、flex-wrap
控制项目换行。
- nowrap：不换行（
默认）。
内容超过容器宽度时会压缩项目宽度。 - wrap：换行。
- wrap-reverse：换行反向。
第一行会到底部。
3、flex-flow
是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列且不换行。
4、justify-content
控制项目在主轴的对齐方式。
- flex-start：主轴开始位置及对齐（默认）
- center：居中对齐
- flex-end：主轴结束位置对齐
- space-between：左右两端对齐
- space-evenly：项目之间间距为左右两侧项目到容器间距的2倍
- space-around：项目之间间距与项目与容器间距相等
5、align-items
控制项目在纵轴排列方式。
- stretch：目没设置高度，或高度为auto，则占满整个容器（默认）。
- flex-start：项目在纵轴紧贴容器顶部。
- center：项目在纵轴居中。
- flex-end：项目在纵轴紧贴容器底部。
- baseline：项目以第一行文字的基线为参照进行排列。
6、align-content
控制多行项目的对齐方式。
- stretch：项目没设置高度，或高度为auto情况下让项目填满整个容器（默认）。
- flex-start：项目在纵轴紧贴容器顶部。
- center：项目纵轴居中。
- flex-end：项目在纵轴紧贴容器底部。
- space-between：上下两侧项目紧贴容器。
- space-around：项目之间间距为上下两端项目与容器间距两倍。
- space-evenly：项目之间间距与项目到容器之间间距相等。
六、元素的属性
1、order
项目排序，值越小越靠前；默认值为0。
x1(x2)==>x1为固有顺序，x2为order值。
2、flex-grow
项目在有剩余空间的情况下是否放大，值越大放大越多；默认值为0及不放大。
3、flex-shrink
项目在空间不足时是否缩小，值越大缩小越多;默认值为1，值为0时及不缩小。
4、flex-basis
设置项目宽度，覆盖widtn属性；默认auto。
5、flex
是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度；默认0 1 auto。
6、align-self
继承父容器的align-items属性，如果没父元素，则默认stretch。
.container {
display: flex; /*开启容器的flex布局*/
flex-direction: column;/*纵向排列*/
align-items: flex-start;/*主轴方向居中*/
}
.2{
align-self:flex-start;/*第二个靠左*/
}
.3{
align-self:flex-end;/*第三个靠右*/
}
示例代码
- 源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.container {
/*容器的基础样式*/
width: 500px;
height: 500px;
background-color: #f3f4f6;
padding: 20px;
margin: 20px;
border-radius: 20px;
/*flex布局*/
display: flex;
justify-content :center;/*主轴居中*/
align-items:center;/*纵轴居中*/
}
.items {
/*元素的基础样式*/
text-align: center;
border-radius: 10px;
width: 100px;
height: 100px;
line-height: 100px;
}
</style>
<body>
<div class="container">
<div class="items" style="background-color: #2b85e4;align-self:flex-start;">1</div>
<div class="items" style="background-color: #a0cfff;">2</div>
<div class="items" style="background-color: #ecf5ff;align-self:flex-end">3</div>
</div>
</body>
</html>- 布局效果
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
