flex基本概念：
采纳flex布局的元素，称为flex容器，它的子元素则称为flex我的项目，容器默认存在两根轴：程度的主轴和垂直的穿插轴
容器属性
flex-direction // 我的项目的排列方向
flex-wrap //换行取值
flex-flow // 下面两个的简写模式
justify-content //我的项目在主轴上的对齐形式
align-items //我的项目在穿插轴上的对齐形式
align-content // 多根轴线的对齐形式
我的项目属性
order // 我的项目的排列程序，数值越小越靠前
flex-grow //我的项目的放大比例
flex-shrink //我的项目的放大比例
flex-basis //我的项目占据的固定空间
flex // 下面三个的简写，默认initial(0 1 auto)有两个快捷键：auto(1 1 auoto)和none(0 0 auto)
align-self //设置单个我的项目的对齐形式
show you the code
<div className="page"> <div className="layout1"> <div className="left">left</div> <div className="center">center</div> <div className="right">right</div> </div> <div className="layout2"> <div className="up">up</div> <div className="center">center</div> <div className="bottom">bottom</div> </div></div>.page{ .layout1{ height: 50vh; display: flex; .left,.right{ display: flex; align-items: center; width: 50px; background-color: cadetblue; } .center{ flex: auto; display: flex; align-items: center; justify-content: center; background-color: tomato; } margin-bottom: 20px; } .layout2{ height: calc(50vh - 10px); display: flex; flex-direction: column; .up,.bottom{ display: flex; justify-content: center; height: 50px; background-color: cadetblue; } .center{ flex: 1; display: flex; align-items: center; justify-content: center; background-color: tomato; } }}成果
**Q：flex:1 ?== flex:auto?
A: !==**
<div className="page"> <div className="case1"> <div className="ddd">我是一个div</div> <div className="ddd">我是一个话有点多的div</div> <div className="ddd">我是一个话痨div哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦</div> </div> <div className="case2"> <div className="ccc">我是一个div</div> <div className="ccc">我是一个话有点多的div</div> <div className="ccc">我是一个话痨div哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦哔哩吧啦</div> </div></div>.page{ .case1{ display: flex; .ddd{ border: 1px solid palegreen; flex:1 } margin-bottom: 10px; } .case2{ display: flex; .ccc{ border: 1px solid royalblue; flex:auto } }}效果图
能够看进去，这两者并不相等，设置为auto，这三个盒子就会依照本人内容的多少来等比例的放大和放大，而设置为1则是平分元素～