flex相关知识点1

1--flex布局基本概念

    弹性布局，为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局，当设置为flex布局之后，子元素的float、clear、vertical-align属性都将不再起作用。

    .box{ 
       display:flex; 
       display:-webkit-flex; 
    } 
   .box{ 
     display:inline-flex; 
    }

使用flex布局的元素，称为flex容器。其内的所有子元素自动成为容器成员，称为flex项目，简称项目。

容器存在两条轴，即水平的主轴与垂直的纵轴。项目默认沿水平的主轴排列。

 

2—容器的属性

flex-direction：决定主轴的方向，即容器内项目的排列方向。

    flex-direction:row|row-reverse|column|column-reverse;其中，row为水平方向，从左往右；row-reverse为水平方向，从右往左；column为垂直方向，从上往下；column-reverse为垂直方向，从下往上。

flex-wrap：当容器内的项目在一行显示不完时，剩下的排列方式。

    flex-wrap:nowrap|wrap|wrap-reverse; 其中，nowrap（默认），不换行；wrap为换行，且第一行在上面；wrap-reverse为换行，第一行在下面。

flex-flow：为flex-direction与flex-wrap相结合的简写，默认值为row nowrap

flex-row:<flex-direction>||<flex-wrap>;

justify-content：定义了项目在水平主轴上的对齐方式

    justify-content:flex-start|flex-end|center|space-between|space-around;其中，flex-start（默认），左对齐；flex-end为右对齐；center为居中；space-between为两端对齐，项目之间的间隔都相等；space-around为每个项目两侧的间隔相等，则项目间的间隔比项目与边框的间隔大一倍。

align-items：定义项目在垂直纵轴上的对齐方式。

    align-items:flex-start|flex-end|center|baseline|stretch;其中flex-start为纵轴的起点对齐； flex-end为纵轴的终点对齐； center为纵轴的中点对齐； baseline为项目的第一行文字的基线对齐； stretch（默认值），如果项目未设高度或者为auto，将占满整个容器的高度。

align-content：定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。

   align-content:flex-start|flex-end|center|space-between|space-around|stretch;其中，flex-start表示与纵轴的起点对齐； flex-end表示与纵轴的终点对齐； center表示与纵轴的中点对齐； space-between表示与纵轴的两端对齐，轴线之间的间隔平均分布； space-around表示每根轴线两侧的间隔都相等，则轴线之间的间隔比轴线与边框的间隔大一倍； stretch（默认），表示轴线占满整个纵轴。

 

3—项目的属性

order：定义项目的排列顺序，数值越小，排列越靠前，默认为0。

   order:<interger>;

flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。若所有项目该属性值都为1，则它们将等分剩余空间；若其中一个项目的该属性值为2，其他项目为1，则前者占据的剩余空间将比其他项多一倍。

   flex-grow:<number>;

flex-shrink：定义了项目的缩放比例，默认为1.若所有项目的该属性值都为1，当空间不足时，将按等比例缩小；若其中一个项目属性为0，其他项目都为1，则空间不足时，前者不缩小。

   flex- shrink:<number>;

flex-basis：定义了在分配多余空间时，项目占据的水平主轴空间，默认值为auto，即项目的本身大小。

   flex-basis:<length>|auto;

flex：该属性为flex-grow，flex-shrink、flex-basis的简写，默认为0 1 auto，后两个属性可选。该属性有两个快捷键值：auto(1 1 auto)、none(0 0 auto)

   flex:none|[<'flex-grow'<'flex-shrink'>?||<'flex-basis'>];

align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，若没有父元素，则等价于stretch。

  align-items:auto|flex-start|flex-end|center|baseline|stretch;

 

4—实例

容器内只有一个项目的情况：

（1）

    body{ 
       background-color: black; 
    } 
    .box{ 
       display:flex; 
       width:200px; 
       height:200px; 
       background-color: white; 
       border-radius: 6%; 
       box-shadow:8px 8px white; 
    } 
    .item{ 
       width:50px; 
       height:50px; 
       background-color: black; 
       border-radius:50%; 
       box-shadow: 0px 4px #333333; 
   } 
  <div class="box"> 
     <span class="item"></span> 
  </div>

    

（2）在（1）的基础上为box添加样式：justify-content:center;

 

（3）在（1）的基础上为box添加样式：justify-content:flex-end;

 

（4）在（1）的基础上为box添加样式：align-items: center;

 

（5）在（1）的基础上为box添加样式：justify-content:center; align-items: center;

 

（6）在（1）的基础上为box添加样式：justify-content:center; align-items: flex-end;

 

（7）在（1）的基础上为box添加样式：justify-content:flex-end; align-items: flex-end;

 

容器中有两个项目的情况：

（1）

     body{ 
        background-color: lightpink; 
        } 
    .box{ 
        display:flex; 
        width:200px; 
        height:200px; 
        margin:0 auto; 
        background-color: white; 
        border-radius: 6%; 
        box-shadow:8px 8px white; 
        justify-content:space-between; 
        } 
     .item{ 
        width:50px; 
        height:50px; 
        background-color: dodgerblue; 
        border-radius:50%; 
        box-shadow: 0px 4px #333333; 
  } 
  <div class="box"> 
     <span class="item"></span> 
     <span class="item"></span> 
  </div>

 

（2）在（1）的基础上为box添加样式：flex-direction: column;

 

（3）在（2）的基础上为box添加样式：align-items: center;

 

（4）在（2）的基础上为box添加样式：align-items: flex-end;

 

（5）在（1）的基础上添加样式：

.item:nth-child(2){ 
     align-self: center; 
  }

 

（6）在（1）的基础上添加样式：

.item:nth-child(2){ 
    align-self: flex-end; 
  }

 

容器中有三个项目的情况：

（1）

   body{ 
      background-color: lightpink; 
    } 
   .box{ 
      display:flex; 
      width:200px; 
      height:200px; 
      margin:0 auto; 
      background-color: white; 
      border-radius: 6%; 
      box-shadow:8px 8px white; 
      flex-direction: column; 
      justify-content:space-between; 
   } 
   .item{ 
      width:50px; 
      height:50px; 
      background-color: dodgerblue; 
      border-radius:50%; 
      box-shadow: 0px 4px #333333; 
   } 
    .item:nth-child(2){ 
      align-self:center; 
   } 
    .item:nth-child(3){ 
       align-self: flex-end; 
   } 
  <div class="box"> 
     <span class="item"></span> 
     <span class="item"></span> 
     <span class="item"></span> 
  </div>

 

容器内有六个项目的情况：

（1）

    body{ 
      background-color: lightpink; 
        } 
   .box{ 
      display:flex; 
      width:200px; 
      height:200px; 
      margin:0 auto; 
      background-color: white; 
      border-radius: 6%; 
      box-shadow:8px 8px white; 
      flex-wrap: wrap; 
      align-content: space-between; 
     } 
    .row{ 
       flex-basis: 100%; 
       display: flex; 
        justify-content:space-between; 
      } 
    .item{ 
        width:50px; 
        height:50px; 
        background-color: dodgerblue; 
        border-radius:50%; 
        box-shadow: 0px 4px #333333; 
    } 
  <div class="box"> 
     <div class="row"> 
         <span class="item"></span> 
         <span class="item"></span> 
         <span class="item"></span> 
     </div> 
      <div class="row"> 
          <span class="item"></span> 
          <span class="item"></span> 
          <span class="item"></span> 
      </div> 
  </div>

 

（2）

        body{ 
            background-color: lightpink; 
        } 
        .box{ 
            display:flex; 
            flex-direction: column; 
            flex-wrap: wrap; 
            align-content: space-between; 
            width:200px; 
            height:200px; 
            margin:0 auto; 
            background-color: white; 
            border-radius: 6%; 
            box-shadow:8px 8px white; 
 
        } 
        .row{ 
            flex-basis: 100%; 
            display: flex; 
            justify-content:space-between; 
            flex-direction: column; 
        } 
        .item{ 
            width:50px; 
            height:50px; 
            background-color: dodgerblue; 
            border-radius:50%; 
            box-shadow: 0px 4px #333333; 
        } 
  <div class="box"> 
     <div class="row"> 
         <span class="item"></span> 
         <span class="item"></span> 
         <span class="item"></span> 
     </div> 
      <div class="row"> 
          <span class="item"></span> 
          <span class="item"></span> 
          <span class="item"></span> 
      </div> 
  </div>

 

（3）

<style type="text/css"> 
        body{ 
            background-color: lightpink; 
        } 
        .box{ 
            display:flex; 
            flex-wrap: wrap; 
            align-content: space-between; 
            width:200px; 
            height:200px; 
            margin:0 auto; 
            background-color: white; 
            border-radius: 6%; 
            box-shadow:8px 8px white; 
        } 
        .row{ 
            flex-basis: 100%; 
            display: flex; 
            justify-content:space-between; 
      } 
        .item{ 
            width:50px; 
            height:50px; 
            background-color: dodgerblue; 
            border-radius:50%; 
            box-shadow: 0px 4px #333333; 
        } 
         .row:nth-child(2){ 
             justify-content:center; 
         } 
         .row:nth-child(3){ 
             justify-content:space-between; 
         } 
    </style> 
<div class="box"> 
  <div class="row"> 
    <span class="item"></span> 
    <span class="item"></span> 
    <span class="item"></span> 
  </div> 
  <div class="row"> 
        <span class="item"></span> 
  </div> 
  <div class="row"> 
        <span class="item"></span> 
        <span class="item"></span> 
  </div> 
</div>

 

容器内含有九个项目的情况：

  <style type="text/css"> 
        body{ 
            background-color: lightpink; 
        } 
        .box{ 
            display:flex; 
            flex-wrap: wrap; 
            align-content: space-between; 
            width:200px; 
            height:200px; 
            margin:0 auto; 
            background-color: white; 
            border-radius: 6%; 
            box-shadow:8px 8px white; 
 
        } 
        .row{ 
            flex-basis: 100%; 
            display: flex; 
            justify-content:space-between; 
         } 
        .item{ 
            width:50px; 
            height:50px; 
            background-color: dodgerblue; 
            border-radius:50%; 
            box-shadow: 0px 4px #333333; 
        } 
    </style> 
<div class="box"> 
    <div class="row"> 
        <span class="item"></span> 
        <span class="item"></span> 
        <span class="item"></span> 
    </div> 
    <div class="row"> 
        <span class="item"></span> 
        <span class="item"></span> 
        <span class="item"></span> 
    </div> 
    <div class="row"> 
        <span class="item"></span> 
        <span class="item"></span> 
        <span class="item"></span> 
    </div> 
</div> 

弹性布局：三栏布局，右边固定，左边、中间按比例自适应
  <style type="text/css">
        .main{
            display:flex;
            width:100%;
            height:260px;
            background: #74DEF8;
        }
        .one{
            flex:2;
            background: #D66464;
        }
        .two{
            flex:1;
            background: #CCCCCC;
        }
        .three{
            width:100px;
            background: #B373DA;
        }
    </style>
<div class="main">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

未完待续==>

参考：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html