今天看啥
    热点:

      天发国际娱乐官网:欧洲央行执委会成员劳腾施莱格(SabineLautenschlager)3月27日接受美国CNBC采访时表示,随着通货膨率开始达到目标,欧洲央行应该准备好改变货币政策,暗示欧洲央行已经可以适时退出QE。

      css3弹性盒模型flex快速入门与上手1,css3flex


      一、什么是flex?

      flex是css3中引入的一种布局方式,可以非常灵活高效控制元素的排列与对齐方式,大多数人称之为弹性布局.

      二、怎么使用flex?

      任何一个容器都可以指定为flex布局

      1 #box {
      2     display:flex;
      3 }

      三、flex的基本术语

      • 采用flex布局的元素被称为flex容器 (flex container), 它的子元素即为flex元素 (flex item).
      • flex容器中包含两个相互垂直的轴, 即主轴 (main axis)副轴 (cross axis).
      • flex元素沿主轴从主轴起点 (main start)主轴终点 (main end)依次排布.
      • 如果flex容器包含多行flex元素, 则flex行 (flex lines)沿副轴从副轴起点 (cross start)副轴终点 (cross end)依次排布.
      • 单个flex元素占据的主轴空间叫做主轴长度 (main size), 占据的副轴空间叫做副轴长度 (cross size).

      四、有六个属性设置在父容器上,来控制子元素的显示方式:

      属性含义
      flex-direction 主轴方向
      flex-wrap 换行样式
      flex-flow 前两个的简写形式
      justify-content 主轴对齐方式
      align-items 单行的副轴对齐方式
      align-content 多行的副轴对齐方式

      五、flex-direction,设置主轴的对齐方向,有四个值:

      • row(默认值):主轴为水平方向,起点在左端。   
      • row-reverse:主轴为水平方向,起点在右端。
      • column:主轴为垂直方向,起点在上沿。
      • column-reverse:主轴为垂直方向,起点在下沿。
       1 <!DOCTYPE html>
       2 <html lang="en">
       3 
       4 <head>
       5     <meta charset="UTF-8">
       6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
       7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
       8     <title>flex布局 - by ghostwu</title>
       9     <style>
      10         #box {
      11             display: flex;
      12             flex-direction: row;
      13         }
      14         #box div {
      15             width: 100px;
      16             height: 100px;
      17             background: #09f;
      18             margin: 10px;
      19         }
      20     </style>
      21 </head>
      22 
      23 <body>
      24     <div id="box">
      25         <div>1</div>
      26         <div>2</div>
      27         <div>3</div>
      28         <div>4</div>
      29         <div>5</div>
      30         <div>6</div>
      31         <div>7</div>
      32         <div>8</div>
      33         <div>9</div>
      34         <div>10</div>
      35         <div>11</div>
      36         <div>12</div>
      37         <div>13</div>
      38         <div>14</div>
      39     </div>
      40 </body>
      41 
      42 </html>

      flex-direction设置为row:

      flex-direction设置为row-reverse:

      flex-direction设置为column,下面的示意图我只截取了前面5个div,后面如果截取的话,图片占的位置太多了,影响体验.

      flex-direction设置为column-reverse:

      六、flex-wrap :定义子元素超过一行,如何换行,常用属性值:

      • nowrap(默认值):默认不换行。   
      • wrap:换行,第二行在第一行下面,从左到右
      • wrap-reverse:换行,第二行在第一行上面,从左到右
      1 #box {
      2     display: flex;
      3     flex-direction: row;
      4     flex-wrap: nowrap;
      5 }

      flex-wrap:nowrap;

      flex-wrap: wrap;

      flex-wrap: wrap-reverse;

       

      七、flex-flow:是flex-direction 和flex-wrap的简写形式,默认是 row  nowrap

      1 #box {
      2     display:flex;
      3     /* flex-flow: row nowrap; */
      4     /* flex-flow: row wrap; */
      5     /* flex-flow: row wrap-reverse; */
      6     /* flex-flow: row-reverse wrap-reverse; */
      7     flex-flow: column wrap;
      8 }

      八、 justify-content:  子元素在主轴对齐方式

      • flex-start(默认值):左对齐
      • flex-end:右对齐
      • center: 居中
      • space-between:两端对齐,项目之间的间隔都相等。
      • space-around:每个项目两侧的间隔相等。
      1 #box {
      2     display:flex;
      3     flex-flow: row wrap;
      4     /* justify-content: flex-start; */
      5     /* justify-content: flex-end; */
      6     /* justify-content: center; */
      7     /* justify-content: space-between; */
      8     justify-content: space-around;
      9 }
      这里主要搞清楚space-between和space-around的区别 justify-content: space-between;

       

      justify-content: space-around;

       

       

      www.1click-soft.comtruehttp://www.1click-soft.com/Javascript/1229072.htmlTechArticlecss3弹性盒模型flex快速入门与上手1,css3flex 一、什么是flex? flex是css3中引入的一种布局方式,可以非常灵活高效控制元素的排列与对齐方式...

      相关文章

        暂无相关文章
      相关搜索:

      帮客评论

      视觉看点
      百度 360 搜狗