完美

[学习|工作|博客|交流平台|完美起航]
 详情

flex弹性布局(一)

时间:[2018-06-20 16:56:27] 作者:[ zyw327 ] 点击:[ 161 ]

flex弹性布局

  • Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
  • 任何一个容器都可以指定为Flex布局。
.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>

效果如下:

image.png

note: 设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

flex-direction

  • row (默认值):主轴为水平方向,起点在左端。
/*水平从左至右排列*/
.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>

效果如下:

image.png

  • row-reverse 主轴为水平方向,起点在右端。
/*效果类似于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>

效果如下:

image.png

  • column 主轴为垂直方向,起点在上沿。
/*垂直向下排列*/
.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>

效果如下:

image.png

  • column-reverse 主轴为垂直方向,起点在下沿。
/*垂直向下排列,原来在上边的排列在下边,下边排列在上边*/
.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>

效果如下:

image.png

 2   0
标签:  flex css 弹性布局
 相关评论