flex布局

 一、flex基础属性:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

1、display:flex;

     行内元素:display:inline-flex

     webkit内核:display:-webkit-flex;

                          display:flex;

 

   **设为flex后,子元素的float、clear、vertical-align将失效

2、基本概念

   方向: flex-direction: row | row-reverse | column | column-reverse;、

  是否换行:flex-wrap: nowrap | wrap | wrap-reverse;

   flex-flow:<flex-direction?>||<flex-wrap>

   justify-content:flex-start|felx-end|center|space-between|space-around;

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

   align-content:flex-start|flex-end|center|space-between|space-around|stretch;

3、项目属性

   order:排列顺序、数值越小、排列越靠前、默认0

   flex-grow:放大比例、默认0,如果存在剩余空间、也不放大

   flex-grow:<number>

   flex-shrink:缩小比例

    flex-basis

    align-self:auto|flex-start|flex-end|center|baseline|stretch;//润需单个与其他的不一样

  二、flex简单布局:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

   1、单个项目

       水平方向上:

       display:flex

 

       display:flex;

       justify-content:center;

     

       display:flex;

       justify-content:end;

 

       一个元素,垂直居中

       dispaly:flex;

       justify-content:center;

       align-items:center;

 

       display:flex;

       justify-content:center;

       align-items:end;

       

       display:flex;

       justify-content:flex-end;

       align-items:flex-end;

  

      2、双项目

        display:flex;

        justify-content:space-between;

 

        display:flex;

        flex-direction:column;

        justify-content:space-between;

  

        display:flex;

        flex-direction:column;

        justify-content:space-between;

        align-items:center;

 

        display:flex;

        flex-direction:column;

        justify-content:space-between;

        align-items:flex-end;

    

.box {
  display: flex;
}

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

 

  

 

.box {
  display: flex;
  justify-content: space-between;
}

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


.box {
  display: flex;
}

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

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


.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: space-between;
}

 

      

       

 

 

 

          

 

   

 

posted @ 2018-04-19 17:57  豆豆飞  阅读(111)  评论(0编辑  收藏  举报