Flex布局小记

2016-10-08 本文已影响897人 Tiny_z

前端时间在项目中使用了一下Flex布局，闲来无事记录一下

兼容

首先以一个骰子做介绍

默认样式布局

默认是靠左对齐

骰子居中

居中

  .box{
            display: flex;
            justify-content: center;
        }

骰子靠右

  .box{
            display: flex;
            justify-content: flex-end;
        }

设置交叉轴对齐(垂直方向)

  .box{
            display: flex;
            align-items:center;
        }

主轴和交叉轴同时居中

  .box{
            display: flex;
            align-items:center;
                        justify-content:center;
        }

 .box{
            display: flex;
            align-items:flex-end;
                        justify-content:center;
        }

 .box{
            display: flex;
            align-items:flex-end;
                        justify-content:flex-end;
        }

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

flex-start
flex-end
center
baseline
stretch

两个子元素

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

justify-content定义了子项目在主轴上的对齐方式(对齐方式与轴的方向有关)

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

flex-direction 属性决定主轴的方向(即项目的排列方向)

row(默认值) 主轴水平方向,起点在左端
row-reverse 主轴为水平方向,起点在右端
column 主轴为垂直方向,起点在顶部
column-reverse 主轴为垂直方向，起点在底部

主轴方向为垂直，然后两端对齐，垂直方向居中

  .box{
            display: flex;
            justify-content: space-between;
            flex-direction: column; 
            align-items: center;
        }

主轴方向垂直，两端对齐，交叉轴为底对齐（主轴改变了方向，现在交叉轴的底部为右边）

   .box{
            display: flex;
            justify-content: space-between;
            flex-direction: column; 
            align-items: flex-end;
        }

align-self 属性允许单个项目与其他项目有不一样的的对齐方式(交叉轴方向),可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

auto
flex-start
flex-end
center
baseline
stretch
这6个属性值，除了auto，其他都与align-items属性完全一致

首先主轴方向设置两端对齐,然后子项目的align-self设置为flex-end

  .box{display:flex;justify-content:space-between;}
  .item:nth-child(2){align-self:flex-end;}

三个子项目

主轴方向为默认，然后第二个子项目设置为center，第三个子项目设置为flex-end

.box{display:flex;justify-content:space-around;} 
.item:nth-child(2){align-self:center;}
.item:nth-child(3){align-self:flex-end;}

四个子项目

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

首先把主轴的对齐方式设置为flex-end,然后设置换行,然后定义多根轴线的对齐方式space-between交叉轴两端对齐

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

nowrap 默认不换行
wrap 换行，第一行在上方
wrap-reverse 换行,第一行在下方

align-content 定义多根轴线的对齐方式,如果项目只有一根轴线,那这个属性就不起作用

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

页面结构

<div class="box">
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

样式

.box{
            width: 100px;
            height: 100px;
            border:1px solid black;
            margin: 50px auto;
            border-radius: 8px;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
        }
        .item{
            width: 28px;
            height: 28px;
            background:#000;
            border-radius: 50%;
            margin-right: 5px;
        }
        .column{
            display: flex;
            flex-basis: 100%;
            justify-content: space-between;
        }

这里主要是用了两个子项目（column）做换行，并且把column的大小设置为主轴的100%，然后把column里面的子项设置为两端对齐
flex-basis 定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。默认值为auto，即项目的本来大小（被子元素撑开的大小）如下图(auto的情况)

网格布局

说明：每个cell平分父元素
结构

  <div class="grid">
        <div class="grid-cell">1</div>
        <div class="grid-cell">2</div>
        <div class="grid-cell">3</div>
        <div class="grid-cell">4</div>
    </div>


> `flex`属性是`flex-grow`，`flex-shrink`,`flex-basis`的简写，默认值为`0 1 auto`。后面两个属性可选(两个快捷值:`auto`->1 1 auto   `none`->0 0 auto),建议优先使用这个属性
  * `flex-grow` 定义项目的放大比例,默认为0，即如果存在剩余空间，也不放大。如果所有项目的`flex-grow`属性都为1，则它们将等分剩余空间。如果一个项目的`flex-grow`属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
![](https://img.haomeiwen.com/i215275/35db0e393c7ce260.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  * `flex-shrink`属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。





# 参考资料
[flex布局教程-语法](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
[flex布局教程-实例](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)