文章目录加载中

Flex快速上手

# 容器的属性和常用值

容器可以通过设置display属性为flex / inline-flex（行内 flex）来指定其为 flex 布局。

下面，将记录一下容器的属性和常用值，基本可以囊括大多数应用场景。

属性	含义	值	常用值
flex-direction	项目排列方向	row(默认)、row-reverse、column、column-reverse	row / column
flex-wrap	项目是否换行	nowrap(默认)、wrap、wrap-reverse	wrap（允许换行）
justify-content	水平对齐方向	flex-start(默认)、flex-end、center、space-between、space-around	center(水平居中)/ space-around(等间距布局)
align-items	垂直对齐方向	flex-start、flex-end、center、baseline、stretch(默认: 占满整个容器的高度)	center(垂直居中)

# 项目的属性和常用值

首先来看下项目元素上常用的 2 个属性，order和flex-grow：

属性	含义	值	常用值
order	项目本身的排列顺序	整数，默认为 0。越小越靠前	整数
flex-grow	项目的放大比例	≥0 的整数，默认为 0	1

其中，order很好理解，下面通过一个例子来展示flex-grow属性的妙用：

<html>
    <head>
        <style>
            div {
                display: flex;
            }
            span:nth-child(1) {
                flex-grow: 1;
            }
        </style>
    </head>
    <body>
        <div>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
    </body>
</html>

可以在浏览器中看到，第一个<span>标签由于设置了flex-grow: 1，它自动占据了父容器除了剩下两个<span>标签外的所有空间！

本文来自心谭博客：xin-tan.com，经常更新web和算法的文章笔记，前往github查看目录归纳：github.com/dongyuanxin/blog

容器的属性和常用值

项目的属性和常用值