TMaize Blog

flex布局笔记

概念

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。传统的布局,基于盒状模型,依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。于是乎2009年,W3C提出了Flex布局,可以简便、完整、响应式地实现各种页面布局。

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

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

p1

语法

声明为flex布局

.box{
  display: flex;
  /*Webkit 内核的浏览器,必须加上-webkit前缀*/
  display: -webkit-flex;
}
/*也可以设置为行内的flex属性*/
.box{
  display: inline-flex;
}

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

p2

flex容器的属性

上面的属性只是针对一个主轴时,即只有一行,一行的所有元素在交叉轴上的排列时的范围是父元素的高度,当有多行即多个主轴时,按照行分派高度,每行的项目的活动范围是所在行分配到的高度

flex项目的属性

实例

左侧固定宽度,右侧宽度随浏览器宽度自动改变,右侧内部方格大固定,会自动换行

p6

#main{
    border: 1px dashed red;
    width: 100%;
    height: 400px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

#left{
    flex-basis: 100px;
    flex-shrink: 0;
    background: pink;
}

#right{
    flex-grow: 1;
    flex-shrink: 1;
    background-color: #00aa9a;
    display: inline-flex;
    flex-flow: row wrap;
    align-content: flex-start;
}
#right div{
    background-color: #5e6e5e;
    margin: 10px;
    flex-basis: 50px;
    flex-shrink: 0;
    height: 50px;

}

参考

Flex 布局教程:语法篇

Flex 布局教程:实例篇

一劳永逸的搞定 flex 布局