Flex布局方案很早都提出来了，然后可以简便、完整、响应式地实现各种页面布局。随着浏览器的发展，目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。.
在网页设计过程中，水平垂直居中是很常用的，但是传统的方案使用起来分厂费劲，下面来看flex如何实现
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
display: flex;
width: 100%;
height: 100%;
background: #eee;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 300px;
background: yellowgreen;
}
<body>
<div class="box"></div>
</body>
如此看来这样水平垂直居中是不是很方便的实现了，
意为"弹性盒模型"，用来为盒状模型提供最大的灵活性。Webkit 内核的浏览器，必须加上-webkit前缀。 当父容器设置了display：flex时。子元素自动成为其成员， 容器默认存在两根轴：水平方向的主轴和垂直的交叉轴，项目默认沿主轴排列。
//属性决定主轴的方向（即项目的排列方向）
flex-direction
//默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
flex-wrap
//flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow
//属性定义了项目在主轴上的对齐方式。
justify-content
//属性定义项目在交叉轴上如何对齐。
align-items
//属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content
//定义项目的排列顺序。数值越小，排列越靠前，默认为0。
order
//定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-grow
//flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-shrink
//定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex-basis
//flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
flex
//允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self
css3中的flex布局是很方便布局的，虽然是个新东西，但是浏览器的发展，对其的支持也较好，建议在以后的设计中多去使用，一方面是潮流，另一方面，也是推动技术发展
最新动态
常见问题百宝箱
A2014，有位学妹不顾家人反对，在上海这个国际化大都市谋了一个公众号助理的职位。斗志昂扬地奋斗了 3 年，我眼看着她的内容驾驭能力突飞猛进，内容质量从三流到一流，职位
A文章主要分析了不同的视觉设计元素是如何影响网站用户体验，希望通过文章的解读能够对你的产品设计带来些启发。 也许是因为我在视觉设计上没有太多经验，我发现
A双赢系统建站系统，三网同步，建站推广一步到位双赢系统建站系统，三网同步，建站推广一步到位双赢系统建站系统，三网同步，建站推广一步到位双赢系统建站系统，三网同步，建站推
Copyright 2013-2020 All Rights Reserved 武汉互赢网络科技股份有限公司 鄂ICP备19027860号
