HTML笔记 ·

flex弹性布局

网页布局在前端开发中是一个很重要的点,在传统布局解决方案中,一般是基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现,当然也是可以实现的,比如说table布局或者说是使用绝对定位的方式,但是相对于下面要说到的弹性布局来说就复杂多了。

09年的时候,W3C提出了flex布局,相比于现在已经过去将近10年的时间了,使用上应该可以放心,但是如果你面对的是需要解决万恶的IE问题就需要考虑一下了,下面来看一下它目前的兼容情况
flex弹性布局

flex概念

在说用法之前先说一下具体的概念,flex全称是flexbox(Flexible Box),即弹性盒子,这一模块目的是在提供一个更加有效的的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的,即弹性的。

flex布局的主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至是循序),以最佳的方式来填充keys空间(其主旨是适应所有类型的显示设备)。

那么,什么是容器,什么又是项目。很简单,包围在外面的即容器,内部的即为项目。也就是说采用flex布局的元素就是flex容器(display:flex或inline-flex),他的所有子元素(注意是子元素,而不包含后代节点)称为flex项目

在Flexbox布局中有水平的主轴(Main Axis)和垂直的侧轴/交叉轴(Cross Axis)两个概念:
flex弹性布局
主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

flex容器属性

flex容器有以下几种属性:flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content

1.flex-direction属性介绍
该属性决定主轴的方向(即项目的排列方向)。

属性名 说明
row(默认值) 主轴为水平方向,起点在左端。
row-reverse 主轴为水平方向,起点在右端。
column 主轴为垂直方向,起点在上沿。
column-reverse 主轴为垂直方向,起点在下沿

在这里说一下row-reverse,它的效果并不是简单的右对齐,假设如下代码

<div class="box">
<div class="box-child">1</div>
<div class="box-child">2</div>
<div class="box-child">3</div>
<div class="box-child">4</div>
</div>

假设有如上布局,如果设置为

flex-direction:row

,则显示的效果为:1234从左至顺序不再多说,如果是设置为

flex-direction:row-reverse

,则会显示为4321靠右对齐的效果
flex弹性布局
垂直方向同理,以至于后续属性当中只要是涉及到reverse则是会先将其内容倒置,这种方式是为了方便一些国家阅读方式是从右向左的方式,比如中国的古文。

2.flex-wrap属性介绍
该属性定义的是,如果一条轴线排不下,如何换行
| 属性名 | 说明 |
| ------------ | ------------ |
| nowrap(默认值) | 不换行,项目元素会按照自身宽度的百分比进行宽度缩放。 |
| wrap | 项目元素宽度不变化,单行遇剩余宽度不够则换行,第一行在上方。 |
| wrap-reverse | 项目元素宽度不变化,单行遇剩余宽度不够则换行,第一行在下方。属于倒着的状态 |
flex弹性布局
形成这么个效果

3.flex-flow属性介绍
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。将上面两个属性结合在了一起,不在赘述。

4.justify-content属性
该属性定义了项目在主轴也就是水平轴上的对齐方式。
| 属性名 | 说明 |
| ------------ | ------------ |
| flex-start(默认值) | 左对齐 |
| center | 居中对齐。 |
| flex-end | 右对齐 |
| space-between |两端对齐,项目之间的间隔都相等。 |
| space-around |每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 |
下面两个属性的区别在于space-between首末两个元素的左侧和右侧是没有间距,而space-around两侧是有间距的,如下图所示为space-around的效果
flex弹性布局

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

属性名 说明
flex-start 交叉轴的起点对齐,即居顶对齐
center 交叉轴居中对齐。
flex-end 交叉轴居底对齐
baseline 项目的第一行文字的基线对齐。假设N个项目的字体大小不同,那么字体所占用的空间也不一样,该属性会令N个项目的第一行文字顶部对齐
stretch(默认值) 如果项目未设置高度或设为auto,将占满整个容器的高度。

该属性的前三个值有点类似于vertical-align效果,居顶居中居底对齐。不再多说,来看一下baseline的具体效果:
flex弹性布局
看效果我们可以看出项目1的上边框和项目2的文字顶部也就是“2”的最顶部是对齐的

6.align-content属性介绍
该属性定义了多根轴线(多行)的对齐方式。如果项目只有一根轴线,该属性不起作用。

属性名 说明
flex-start 交叉轴的起点对齐,即居顶对齐
center 交叉轴居中对齐。
flex-end 交叉轴居底对齐
space-between 与交叉轴两端对齐,轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值) 轴线占满整个交叉轴。

具体效果如下图
flex弹性布局

flex项目属性

项目上的属性包含6个:order、flex-grow、flex-shrink、flex-basis、flex、align-self

1.order属性
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0

<div class="box" style="display:flex">
<div class="box-child" style="order:1">1</div>
<div class="box-child" style="order:3">2</div>
<div class="box-child" style="order:2">3</div>
<div class="box-child" style="order:0">4</div>
</div>

如上方式,显示的顺序将变为4132

2.flex-grow属性
该属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。如果一个项目的flex-grow属性为1,其他项目都为0的话,那么这个项目将会把剩余空间全部占满(可用于左右两端布局,左侧固定宽度,右侧自适应

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

4.flex-basis属性
该属性定义了在分配多余空间之前,项目占据的主轴上的大小。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小,该属性会替换掉width属性,也就是说有了这个属性以后width属性将会失效。当主轴上没有多余的空间之后,这个值再大也不会使该项目的宽度变大。效果有点类似于max-width,即使width设置的再大也不会超过max-width的值

5.flex属性
该属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。不在赘述

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

<style>
    .box{
        background-color: white;
        margin: 0 0 55px;
        display: flex;
        height:400px;
    }
    .box-child{
    width: 200px;
    height: 200px;
    line-height: 200px;
    vertical-align: middle;
    margin: 5px;
    background-color: #ffd200;
    font-size: 100px;
    color: white;
    text-align: center;
    align-self:flex-start;
    }
</style>
<div class="box">
<div class="box-child">1</div>
<div class="box-child" style="align-self:center">2</div>
<div class="box-child" style="align-self:flex-end">3</div>
<div class="box-child">4</div>
</div>

flex弹性布局

以上各属性我们可以通过两张图来看具体的效果

特别声明,下面示意图截取于grid.malven.co,作者@Malven Co著作权归作者所有。

flex弹性布局


flex弹性布局


flex弹性布局

参与评论