.flex{
display: flex;
display: -webkit-flex; /* Safari */
border: none;
}
<div class="flex">
<div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div>
</div>
效果如下:
note: 设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
/*水平从左至右排列*/
.flex-direction.row{
flex-direction: row;
}
<div class="flex flex-direction row">
<div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div>
</div>
效果如下:
/*效果类似于float:right, 但是row-reverse不是浮动,而元素的排列也不一样,原来左边的排列在右边*/
.flex-direction.row-reverse{
flex-direction: row-reverse;
}
<div class="flex flex-direction row-reverse">
<div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div>
</div>
效果如下:
/*垂直向下排列*/
.flex-direction.column{
flex-direction: column;
width: 100px;
}
<div class="flex flex-direction column">
<div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div>
</div>
效果如下:
/*垂直向下排列,原来在上边的排列在下边,下边排列在上边*/
.flex-direction.column-reverse{
flex-direction: column-reverse;
width: 100px;
}
<div class="flex flex-direction column-reverse">
<div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div>
</div>
效果如下: