css中flex弹性布局的步骤讲解（附代码）

互联网 18-10-18

本篇文章给大家带来的内容是关于css中flex弹性布局的步骤讲解（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

html：

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <meta name="viewport" content="width=device-width, initial-scale=1">         <title></title>         <style type="text/css">             *{                 margin: 0;                 padding: 0;                 box-sizing: border-box;             }             .wrap{                 width: 300px;                 height: 300px;                 display: flex;                 flex-direction: row; /*默认主轴方向水平向右*/                 flex-direction: row-reverse;  /*可选主轴方向水平向左*/                  /* flex-direction: column; */  /*可选主轴方向垂直向下*/                 /* flex-direction: column-reverse; */ /*可选主轴方向垂直向上*/                                  flex-wrap: wrap;  /*默认侧轴方向与主轴垂直方向向下或者右*/                 /* flex-wrap: wrap-reverse; */ /*可选侧轴方向与主轴垂直方向向上或者左*/             }             .wrap div{                 background: skyblue;                 text-align: center;                 line-height: 100px;                 width: 100px;                 height: 100px;                 border: bisque 1px solid;             }         </style>     </head>     <body>         <div class='wrap'>             <div"order: 1;">0</div>             <div>1</div>             <div>2</div>             <div>3</div>             <div>4</div>             <div>5</div>             <div>6</div>             <div>7</div>             <div>8</div>         </div>     </body> </html>

步骤一：先给父级容器设置 display: flex;，代表采用 flex 弹性布局

步骤二：设置主轴方向①flex-direction: row；（默认参数）主轴方向水平向右，结果如图：