网页布局之flex布局的使用
1.引言
Flex布局方案很早都提出来了，然后可以简便、完整、响应式地实现各种页面布局。随着浏览器的发展，目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。.
2.网页布局方案
在网页设计过程中，水平垂直居中是很常用的，但是传统的方案使用起来分厂费劲，下面来看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>
如此看来这样水平垂直居中是不是很方便的实现了，
3.什么是flex布局？
意为"弹性盒模型"，用来为盒状模型提供最大的灵活性。Webkit 内核的浏览器，必须加上-webkit前缀。 当父容器设置了display：flex时。子元素自动成为其成员， 容器默认存在两根轴：水平方向的主轴和垂直的交叉轴，项目默认沿主轴排列。
3.1flex容器(父容器)的一些属性：
//属性决定主轴的方向（即项目的排列方向）
flex-direction
//默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
flex-wrap
//flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow
//属性定义了项目在主轴上的对齐方式。
justify-content
//属性定义项目在交叉轴上如何对齐。
align-items
//属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content3.2flex项目(子元素)的一些属性
//定义项目的排列顺序。数值越小，排列越靠前，默认为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-self4.总结
css3中的flex布局是很方便布局的，虽然是个新东西，但是浏览器的发展，对其的支持也较好，建议在以后的设计中多去使用，一方面是潮流，另一方面，也是推动技术发展
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.07.20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读