介绍 & lt; ! DOCTYPE html>
& lt; html>
,,,& lt; head>
,,,,,,,& lt; meta charset=皍tf-8",/比;
,,,,,,,& lt; meta name=皏iewport",内容=翱矶?设备宽度,初始=1,比;
,,,,,,,& lt; title> & lt;/title>
,,,,,,,& lt; style 类型=拔谋?css"比;
,,,,,,,,,,,* {
,,,,,,,,,,,,,,,保证金:,0;
,,,,,,,,,,,,,,,填充:,0;
,,,,,,,,,,,,,,,box-sizing:, border-box;
,,,,,,,,,,,}
,,,,,,,,,,,.wrap {
,,,,,,,,,,,,,,,宽度:,300 px;
,,,,,,,,,,,,,,,身高:,300 px;
,,,,,,,,,,,,,,,显示:,flex;
,,,,,,,,,,,,,,,flex-direction:,行,,/*默认主轴方向水平向右*/,,,,,,,,,,,,,,,flex-direction:, row-reverse;,,/*可选主轴方向水平向左*/,
,,,,,,,,,,,,,,,/*,flex-direction:,列;,*/,,/*可选主轴方向垂直向下*/,,,,,,,,,,,,,,,/*,flex-direction:, column-reverse;, */,/*可选主轴方向垂直向上*/,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,flex-wrap:,包装,,,/*默认侧轴方向与主轴垂直方向向下或者右*/,,,,,,,,,,,,,,,/*,flex-wrap:, wrap-reverse;, */,/*可选侧轴方向与主轴垂直方向向上或者左*/,,,,,,,,,,,}
,,,,,,,,,,,.wrap div {
,,,,,,,,,,,,,,,背景:,天蓝色;
,,,,,,,,,,,,,,,text-align:,中心;
,,,,,,,,,,,,,,,行高:,100 px;
,,,,,,,,,,,,,,,宽度:,100 px;
,,,,,,,,,,,,,,,身高:,100 px;
,,,,,,,,,,,,,,,边界:,bisque 1 px 固体;
,,,,,,,,,,,}
,,,,,,,& lt;/style>
,,,& lt;/head>
,,,& lt; body>
,,,,,,,& lt; div 类=& # 39;包# 39;比;
,,,,,,,,,,,& lt; div"顺序:,1;“在0 & lt;/div>
,,,,,,,,,,,& lt; div> 1 & lt;/div>
,,,,,,,,,,,& lt; div> 2 & lt;/div>
,,,,,,,,,,,& lt; div> 3 & lt;/div>
,,,,,,,,,,,& lt; div> 4 & lt;/div>
,,,,,,,,,,,& lt; div> 5 & lt;/div>
,,,,,,,,,,,& lt; div> 6 & lt;/div>
,,,,,,,,,,,& lt; div> 7 & lt;/div>
,,,,,,,,,,,& lt; div> 8 & lt;/div>
,,,,,,,& lt;/div>
,,,& lt;/body>
null
这篇文章主要介绍flex css中弹性布局的使用示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! html:
