<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
<style>
.div1{
flex-flow: column wrap;
/* 等于下面*/
/* flex-direction: column;
flex-wrap: wrap; */
}
</style>
</head>
<body>
<div class="div1">justify-content 子元素水平排列方式</div>
<div class="div2">flex-start（默认） center flex-end space-beteen space-arround</div>
<div class="div1">align-items子元素竖直排列方式</div>
<div class="div2">flex-start（默认） center flex-end 在盒子上中下</div>
<div class="div1">flex-direction排列方向</div>
<div class="div2">row（默认）row-reverse column column-reverse 纵向排布</div>
<div class="div1">flex-wrap 包裹子元素是在一行显示</div>
<div class="div2">wrap换行（默认）nowrap不换行 </div>
<div class="div1">align-content多行元素垂直排列</div>
<div class="div2">flex-start（默认） center flex-end 在盒子上中下</div>
<div class="div1">子集的属性</div>
<div class="div2">flex：1（评分父级宽度） center flex-end 在盒子上中下</div>
<div>记得加上一级 box-sizing border-box</div>
</body>
</html>
636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
