深度解析 css flexbox布局

就叫王可爱_
342 阅读4分钟

深度解析flexbox 布局

在CSS flexbox布局出现以前，如果要控制HTML元素的布局，要用到很多种奇萌的方式。

在水平方向.上得用f1oat控制左右对齐,稍-不注意，就会有浮动的元素飞来飞去~。

在垂直方向上就更是百家争鸣了:要么手动计算高度然后算出中心点，要么用line- height和height的结合，要么用十之八九不生效的vertica1-align属性等等等等。 自从flex-box出现以后，一切似乎就豁然开朗了，水平垂直各种花式对齐，空间分配由你 做主。

当然，要用好它，用对它也不是一件容易的事，今天就给你说说flex-box布局，看 完之后你也能熟练的运用它!

开启Flexbox布局
假设有下边这么一-个html结构:

<style>
    .flex1,
    .flex2,
    .flex3 {
        background-color: #4fc08d;
    }
</style>

<body>
    <div class="flex">
        <div class="flex1">flex 1</div>
        <div class="flex2">flex 2</div>
        <div class="flex3">flex 3</div>
    </div>
</body>

一个div容器包含了三个div子元素，按照默认的布局方式进行排列。因为div是块级元 素，每个div占了整个一行的空间: 文字替换图片 如果要开启容器的flex 布局，只需要在CSs里边给. f1ex设置display: flex 属性，同! 时为了演示效果，我给它加上了100px的高度:

  .flex{
        display: flex;
        height: 100px;   
    }

文字替换图片 可以看到里边的三个元素自动变成了一-行，因为flex默认是按行进行排列的。Flexbox 布 局是一维布局方式，要么按行排列，要么按列排列。
对齐方式:
Flex布局有-个隐式的坐标空间，水平方向有一条主轴(main-axis)，垂直方向上有一条交 叉轴(cross-axis): 文字替换图片 justify-content
控制主轴(即水平方向)对齐方式使用justi fy-content属性，它有下边几种对齐方式: flex-start
flex-start是默认值，如果是从左到右的文字阅读习惯(LTR),就是靠左对齐。因为默认 的对齐方式，所以跟上边的例子没有什么区别: 文字替换图片 文字替换图片 center
居中对齐，此时整个flex被居中到了页面中间 文字替换图片 flex-end
向右对齐 文字替换图片 space-between
两端对齐，这种方式是第一个和最后一个元素贴边，中间元素平分剩余空间 文字替换图片 space-evenly
分散对齐，所有元素都平分空间 文字替换图片 space-around
跟space-evenly类似，但是左右两边留白为平分空间的1/2 文字替换图片 align-items
控制交叉轴方向(即垂直方向).上的对齐方式使用align-items属性， 有下边几种对齐方 式: stretch
stretch是align- items的默认值，它会自动把子元素拉伸成容器的高度，所以之前的例 子里子元素在垂直方向。上都占满了容器，只要改变容器的a1i gn-i tems的值，它就会变成内 容的高度。stretch 对齐效果如下: 文字替换图片 flex-start
靠上对齐，在交叉轴开始的最上方，可以看到子元素不再占满容器宽度: 文字替换图片 center
居中对齐 文字替换图片 flex-end
靠下对齐 文字替换图片 baseline
基线对齐，如果子元素文字尺寸和行高不同，则子元素会按照文字的基线进行对齐: 文字替换图片 align-content
子元素可以通过设置align-self来控制自己在交叉轴上的对齐方式，例如把. f1ex3子元 素在垂直方向上靠下对齐:

.flex{
display: flex;
align- items: flex-start;
}
.flex3 {
align-self: flex-end;
}

文字替换图片 在水平方向.上控制子元素对齐并没有justify-se1f属性，而是使用margin属性，通过把左 或右边距设置为auto来控制水平对齐，比如把flex3放到最右边:

.flex3 {
    margin-left:auto;
}

文字替换图片 排列方式
flex支持按行排布，也支持按列排布。按列排布时，主轴和交叉轴换了方向，但是align- items和justify-content控制的轴线不变,即ali gn-items还是控制交叉轴，justify- content控制主轴: 文字替换图片 所以说，在水平方向.上对齐变成了使用align-items，垂直方向则用justify-content , 。 要使flex按列排布，只需要设置:

flex-direction: column;

来看几个例子：
水平居中对齐

 .flex{
        display: flex;
        flex-direction: column;
        align-items: center;  
    }

文字替换图片 垂直居中对齐

.flex{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

文字替换图片 另外flex布局也可以支持反向按行和列布局，相当于按容器中心线进行180度翻转:
row-reverse

.flex{
        display: flex;
        flex-direction: row-reverse;  
    }

文字替换图片 列模式下会垂直翻转

  .flex{
        display: flex;
        flex-direction: column-reverse;  
    }

文字替换图片

以上就是对flexbox布局的一个详细演示

注：本文转自极客·Geek社团公众号，如有侵权联系删除

avatar
文章
阅读
粉丝