flex布局

标签：pac   www   space   eve   dir   child   self   失效   nbsp   

 一、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;
}

flex布局

标签：pac   www   space   eve   dir   child   self   失效   nbsp   

原文地址：https://www.cnblogs.com/lmxxlm-123/p/8884780.html