flex盒子布局

Posted 2021-03-23 tommymarc

Flex布局语法教程

网页布局(layout)是css的一个重点应用

布局的传统解决方案：基于盒状模型，依赖display+position+float属性。它对于那些特殊布局非常不便，比如，垂直剧中就不易实现

//传统解决垂直居中
<div class = "content"></div>
<style>
    .content{
        width:300px;
        height:300px;
        background-color:orange;
        margin:0 auto; //水平居中
        position:relative;
        top:50%;
        margin-top:-150px;
        /* transform:translateY(-50%); */

    }
    //实现垂直居中需要在大容器中设置宽高
    //如果不设置margin,padding 那么页面会出现滚动条
    html,body{
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }
</style>

通过position设置为不是static的其他值，如relative,absolute,fixed等。然后，就可以通过top,botton,right,left等属性使它在文档中发生位置便宜(注意，relative是不会使元素脱离文档流的，absolute和fixed则会。也就是说,relative会占据着移动之前的位置，但是absolute和fixed就不会)。

使用flex布局实现垂直居中：

//flex布局实现垂直水平居中

<div class = "content"></div>
<style>
    .content{
        width:300px;
        height:300px;
        background-color:orange;
    }
    //实现垂直居中需要在大容器中设置宽高
    //如果不设置margin,padding 那么页面会出现滚动条
    html,body{
        width:100%;
        height:100%;
        margin:0;
        padding:0;
    }

    body{
        display:flex;
        align-items:center; //定义body的元素垂直居中
        justify-content:center; //定义body里的元素水平居中
    }
</style>

 

Flex布局可以简便、完整、响应式

一.Flex布局是什么 ？

flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

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

.box{
     display:flex;
}

行内元素也可以用Flex布局

.box{
     display:inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀

.box{
     display:-webkit-flex;/* Safari*/
     display:flex;
}

注意：设为Flex布局之后，子元素的float、clear和vertical-align属性将失效

 

二.基本概念

采用Flex布局的元素，成为Flex容器(flex container)，简称容器。它的所有子元素自动成为容器成员，成为Flex项目(flex item),简称为项目

容器默认存在两根轴：

水平的主轴(main axis)和垂直的交叉轴(cross axis)。

主轴的开始位置(与边框的交叉点)叫main start，结束位置叫做main end；

交叉轴的开始位置叫做cross start，结束位置叫做cross end

 

三.容器的属性

以下6个属性设置在容器上

flex-direction               //决定主轴的方向
flex-wrap                    //项目排放轴线
flex-flow                     //flex-direction  flex-wrap简写
justify-content            //项目在主轴(水平)上的对齐方式
align-items                 //项目在交叉轴(垂直)上的对齐方式
align-content              //多根轴线的对齐方式(若一根轴线，可忽略)

• flex-direction
  • 决定主轴的方向　

• .box{ flex-direction:row | row-reverse | column | column-reverse; } //row（默认值） 从左至右，主轴为水平方向，起点在左端 //row-reverse 从右至左，主轴为水平方向，起点在右端 //column 从上至下，主轴为垂直方向，起点在上沿 //column-reverse 从下至上，主轴为垂直方向，起点为下沿

• flex-wrap
  • 默认情况下，项目都排在一条线(轴线)上。flex-wrap属性定义，如果一条轴线排不下，如何换行

.box{
    flex-wrap:nowrap | wrap | wrap-reverse;    
}

nowrap(默认)                     //不换行
wrap                            //换行，第一行在上方
wrap-reverse                    //换行，第一行在最下方

• flex-flow
  • flex-direction属性和flex-wrap属性的简写形式，默认是 row nowrap

.box{
     flex-flow:<flex-direction> <flex-wrap>;
}

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

.box{
     justify-content:flex-start | flex-end | center | space-between | space-around;
}

flex-start（默认值）                  //左对齐
flex-end                            //右对齐
center                              //居中
space-between                       //两端对齐，项目之间的间隔都相等
space-around                        //每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

• align-items
  
  • 定义项目在交叉轴上如何对齐

.box{
     align-items:flex-start | flex-end | center | baseline | stretch;
}

flex-start                     //交叉轴的起点对齐（顶部对齐）
flex-end                       //交叉轴的终点对齐 （底部对齐）
center                         //交叉中的中点对齐（居中）
baseline                       //项目的第一行文字的基线对齐
stretch（默认值）                //如果项目未设置高度或设为auto，将占满整个容器

• align-content
  • 定义了多根轴线的对齐方式。如果项目只有一根轴线，可忽略

.box{
     align-content:flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start                         //与交叉轴起点对齐
flex-end                           //与交叉轴中点对齐
center                             //与交叉轴中点对齐
space-between                      //与交叉轴两端对齐，轴线之间的间隔平均分布
space-around                       //每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch （默认值）                   //轴线占满整个交叉轴

 

四.项目的属性

以下的6个属性设置在项目上

order                                      //项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow                                  //项目的放大比例，默认为0
flex-shrink                                //项目的缩小比例，默认为1
flex-basis                                 //分配多余空间，默认auto
flex                                       //flex-grow，flex-shrink，flex0basis的简写，默认为0 1 auto
align-self                                 //允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items，默认为auto

• order
  • 定义项目的排列顺序。树枝越小，排列越靠前，默认为0　　

.item{
     order:<integer>;
}
//1  1  1  1  2  3  3  4  5  7 
//-1  2  5  6  7  
//2  2  99

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

.item{
     flex-grow:<number>; /* default 0*/
}

•  flex-shrink
  • 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小　　
  • 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
  • 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小，负值对该属性无效

.item{
     flex-shrink:<number>; /*default 1 */
}

•  flex-basis
  • 定义了在分配多余空间之前，项目占据的主轴空间(main size). 浏览器根据这个属性，计算主轴是否有多余空间。
  • 默认值auto，即项目本来的大小
  • 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

.item{
     flex-basis:<length | auto>; /*default auto*/
}

•  flex
  • flex-grow，flex-shrink，flex-basis的简写，默认为0 1 auto。后两个属性可选　　
  • 该属性有两个快捷值:auto(1 1 auto) 和 none(0 0 auto)
  • 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

.item{
     flex:none | [ <‘flex-grow‘> <‘flex-shrink‘> ? || <‘flex-basis‘>];
}

•  align-self
  • align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
  • 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
  • 该属性可能取6个值，除了auto，其他都与align-items属性完全一致

.item{
     align-self:auto | flex-start | flex-end | center | baseline | stretch;  
}