关键词：
前言：
flex最常用的就是justify-content和align-items了，这里把这两个属性介绍下，大家更多关于flex布局可以查看阮一峰的日志，写的非常清楚！
阮一峰flex布局的日志：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
1、justify-content（在父元素设置）
设置弹性盒子元素在主轴（横轴）的对齐方式。
取值：
- justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start: 弹性盒子元素将向行起始位置对齐。第一个元素与左起始边界对齐，后面的元素接着第一个元素进行排列。
flex-end: 弹性盒子元素将向行结束位置对齐。整体靠着行结束的位置排列。
center：整体居中显示。
space-between: 弹性盒子元素均匀分布。第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
space-around: 弹性盒子元素均匀分布。两端保留子元素与子元素之间间距大小的一半。
2、align-items, align-self
设置弹性盒子元素在垂直方向上（纵轴）的对齐方式。其中align-items属性用于弹性容器，而align-self用于弹性项目。
- align-items: flex-start | flex-end | center | baseline | stretch;
- align-self: auto | flex-start | flex-end | center | baseline | stretch;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>flex布局justify-content属性</title> <style rel="text/stylesheet"> .box display: -webkit-flex; display: flex; width: 400px; height: 100px; margin: 0; padding: 0; border-radius: 5px; list-style: none; background-color: #eee; .box li margin: 5px; padding: 10px; border-radius: 5px; background: #aaa; text-align: center; #box -webkit-justify-content: flex-start; justify-content: flex-start; #box2 -webkit-justify-content: flex-end; justify-content: flex-end; #box3 -webkit-justify-content: center; justify-content: center; #box4 -webkit-justify-content: space-between; justify-content: space-between; #box5 -webkit-justify-content: space-around; justify-content: space-around; </style> </head> <body> <h2>justify-content: flex-start</h2> <ul id="box" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>justify-content: flex-end</h2> <ul id="box2" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>justify-content: center</h2> <ul id="box3" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>justify-content: space-between</h2> <ul id="box4" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>justify-content: space-around</h2> <ul id="box5" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> </body> </html>
3、flex的兼容性
兼容性检测网址：www.caniuse.com
- 兼容IE10以上，但是要加前缀 -ms-
- Edge全部支持
- firfox 版本28以上，低版本要加 -moz-
- chrome 21以上，低版本要加 -webkit-
微信小程序中经常使用flex布局非常方便：
弹性盒子布局：
1、 首先找到使用弹性盒子布局的容器元素view,首先将他变成一个flex
a) display:flex; //设置完后默认的每个元素都是从左往右放置的
b) 目标一：每个元素独占一行，自上而下放置
flex-direction: column;
c) 目标二：自上而下放置时在垂直方向上均匀分布；元素在垂直方向上间隔一致，而且第一个和最后一个元素离顶部和底部都有一定的间距；
justify-content: space-around;
d) 目标三：元素在水平方向上居中
align-items: center;
弹性盒子布局优点：
.container background-color: #eee; height: 100vh; // 下面是弹性盒子布局 display: flex; flex-direction: column; // 纵向排列 justify-content: space-around; align-items: center; // flex-wrap: wrap; // 一行显示不了可以换行,用于pc端多个item排列时
- 就算下面再增加几个text，依然会自动垂直，水平居中
- 比较直观，只需要在容器中设置，一目了然
- 非常高效，灵活的应对页面结构的变化
flex弹性布局彻底掌握
...属性时：flex-direction：row-reverseflex-direction：column-reverse1.2justify-content属性justify-content属性表示flexitems在mainaxis上的对齐方式，其值有center、flex-start、flex-end、space-between、space-around。justify-content：centerjustify-content：flex-endjustify-conten... 查看详情
web移动端开发-flex布局父项常见属性超详解（附图解）(代码片段)
...-reverse; flex-direction: column; flex-direction: column-reverse;二、justify-content1.属性2.演示justify-content:flex-start;justify-content:flex-end;justify-content:center;justify-content:space-around;justify-content:space-between;三、flex-wrap1.属性2.演示flex-wrap:wrap;flex-wrap:nowr... 查看详情
关于手机端的flex布局
...。使用flex布局首先要设置父容器display:flex，然后再设置justify-content:center实现水平居中，最后设置align-items:center实现垂直居中。ex：运行结果：justify-content和align-items是啥？哪里可以看出横向、竖向的语义？是的，flex的确没有那... 查看详情
flex布局(代码片段)
...属性3.1常见父项属性3.2flex-direction设置主轴的方向 3.3justify-content设置主轴上的子元素排列方式 justify-content属性定义了项目在主轴上的对齐方式注意:使用这个属性之前一定要确定 查看详情
flex弹性布局属性详解！
...(排列不下时)；flex-flow是：flex-direction和flex-wrap的简写；justify-content元素在主轴上的对齐方式；align-items元素在交叉轴的对齐方式；flex元素属性详解：flex-grow当有多余空间时，元素的放大比例；flex-shi 查看详情
flex布局
...m），简称"项目"。容器的6个属性flex-directionflex-wrapflex-flowjustify-contentaign-itemsalign-contentflex-direction属性决定主轴的方向（即项目的排列方向）flex-wrap属性 默认情况下，项目都排在一条线上（又称为“轴线”）。flex-w... 查看详情
flex布局部分属性困惑解析
...main-axis方向相应也不同。既然有方向这个概念，这个时候justify-content属性（justify-content主要负责调整main-axis上元素的布局），在取值为flex-start和flex-end时就要注意了。而cross-axis是垂直于main-axis的。当flex-direction取值为row或者row-re... 查看详情
微信小程序flex布局
...默认值为rownowrapflex-flow:<flex-direction>||<flex-wrap>;4.justify-content属性：定义item在主轴上的对齐方式justify-content:flex- 查看详情
flex布局：flex布局
...，子元素就会跟着作为主轴的来排列布局。设置侧轴排列justify-content属性定义了项目在主轴上的对齐方式，使用前提必须确定好谁是主轴.默认情况下，子元素都排在一条线上（主轴），flex-wrap属性定义，flex布局中默认是不换行... 查看详情
display:flex布局(代码片段)
...么三个子元素都会被排列为一条线。此时，我们可以使用justify-content和align-items等属性来分别设置水平和垂直方向上的对齐方式。例如，我们可以使用以下样式将子元素在水平方向居中，垂直方向顶部对齐：css.containerdisplay:flex;ju... 查看详情
flex布局
...性 1）flex-direction 2）flex-wrap 3）flex-flow 4）justify-content 5）align-items 6）align-content 下面再来分别的介绍这些属性 1）flex-direction 决定了元素 查看详情
flex常用布局自我记录(代码片段)
常用知识点display:flex;父容器：justify-content属性用于定义如何沿着主轴方向排列子容器。justify-content:flex-start：起始端对齐左对齐justify-content:flex-end：末尾段对齐右对齐justify-content:center：居中对齐左右justify-content:space-around：子容... 查看详情
flex常用布局自我记录(代码片段)
常用知识点display:flex;父容器：justify-content属性用于定义如何沿着主轴方向排列子容器。justify-content:flex-start：起始端对齐左对齐justify-content:flex-end：末尾段对齐右对齐justify-content:center：居中对齐左右justify-content:space-around：子容... 查看详情
微信小程序view的布局
参考技术A横向布局or竖向布局=>设置属性flex-direction设置元素在横向上的布局方向，需要设置justify-content属性设置元素在纵向上的布局方向，需要设置align-items属性用于控制子View是否换行=>设置flex-wrap属性 查看详情
flex布局，看完这篇都懂了
...iner上的css属性应用在flexitems上的css属性flexcontainer的属性:justify-content:决定了flexitems在主轴(mainaxis)上的对齐方式flex-start(默认值):与mainstart对齐flex-end:与mainend对齐center:居中对齐space-between:flexitems之间的距离相等.与mainstart,mianend两... 查看详情
03flex布局(代码片段)
...row-reverse 从右到左column 从上到下column-reverse 从下到上justify-content:设置主轴上子元素的排列方式，需要确认主轴是哪个属性 说明flex-start 默认值从头部开始如果主轴是x轴则从左到右flex-end 从尾部开始排列center 从主轴居中... 查看详情
弹性布局(代码片段)
/*pages/flex/flex.wxss*/.outterwidth:100%;display:flex;/*justify-content:flex-start;左对齐*//*justify-content:flex-end;右对齐*//*justify-content:center;居中对齐*//*justify-content:space-around;延主轴均匀分布元素中间的距离是最 查看详情
flex布局轻松上手(代码片段)
...布局原理父项属性主轴与侧轴flex-direction--设置主轴方向justify-content--主轴上的子元素排列flex-wrap--子元素是否换行align-items--侧轴-单align-items--侧轴-多flex-flow子项属性align-selforderflexflex-growflex-shrinkflex-basis布局原理弹性布局，任... 查看详情