大概了解了flexbox

原创

diligenceday 2023-01-13 15:56:34 博主文章分类：html和css相关 ©著作权

©著作权归作者所有：来自51CTO博客作者diligenceday的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FLEX</title>
</head>
<body>
<style>
footer{
  display:flex;
  flex-flow:row wrap;
  align-items: stretch;
  /*
  justify-content : flex-end;
  主轴排列方式
  */
  /*
  justify-content : flex-start;
  */
  justify-content : center;
  /*
  justify-content : space-between;
  */
  
  align-content : flex-start;
  /*
  侧轴排列方式
  flex-end ： 开头
  center 中心
  space-between 均匀排列
  space-around 另一种均匀排列
  stretch 伸缩排列
  */
}
div{
  /*
  flex: 1 0 7rem;
  width:15%;
  */
}
div:nth-child(1){
  /*flex和在sencha里面的flex一样的
  flex-grow flex-shrink flex-basis;
  */
  flex : 1; 
}
div:nth-child(2){
  /*
  在不改变结构的情况下，更改页面排列方式
  */
  order :  1;
  flex : 2
}
</style>
<!--
神奇的flex布局..
-->
<footer>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</footer>
</body>
</html>