前端学习 CSS flex布局

HMS Howe

已于 2022-05-09 15:52:04 修改

阅读量240

点赞数

分类专栏：前端开发文章标签：前端学习 css

于 2022-05-09 11:54:08 首次发布

本文链接：https://blog.csdn.net/Winchester_Y/article/details/124663162

版权

前端开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

3.1 常见父项属性

属性	功能
flex-direction	设置主轴的方向
justify-content	设置主轴上的子元素排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上的子元素的排列方式（多行）
align-items	设置侧轴上的子元素的排列方式（单行）
flex-flow	复合属性，相当于同时设置了flex-direction和flex-wrap

3.2 flex-direction 设置主轴的方向

3.2.1 主轴与侧轴

默认主轴方向为x轴方向，水平向右

默认侧轴方向为y轴方向，水平向下

元素按主轴排列

3.2.2 属性值

属性值	功能
flex-direction: row（默认）	主轴方向为x轴方向，水平向右
flex-direction: row-reverse	主轴方向为x轴方向，水平向左
flex-direction: column	主轴方向为y轴方向，水平向下
flex-direction: column-reverse	主轴方向为y轴方向，水平向上

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: blueviolet;
            flex-direction: column;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: darkcyan;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

3.3 justify-content 设置主轴上的子元素排列方式

属性值	说明
flex-start（默认）	从头部开始排列
flex-end	从尾部开始排列
center	在主轴居中对齐
space-around	平分剩余空间
space-between（重要）	先两边贴边，再平分空间

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: blueviolet;
            flex-direction: row;
            justify-content: space-between;
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: darkcyan;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

</html>

3.4 flex-wrap 设置子元素是否换行

flex默认子元素不换行，如果不够会缩小子元素

属性值	说明
nowrap（默认）	不换行
wrap	换行

3.5 align-items 设置侧轴上的子元素的排列方式（单行）

属性值	说明
flex-start（默认）	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸

stretch在不给子元素高度时生效

3.6 align-content 设置侧轴上的子元素的排列方式（多行）

只能用于子项出现换行的情况

属性值	说明
flex-start（默认）	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	拉伸到平分空间

3.7 flex-flow

把设置主轴方向和是否换行合并

flex-flow: row wrap;

4 常见子项属性

4.1 flex 属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

.item {
	flex: <number>; /* default 0 */
}

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }

        section div:nth-child(2) {
            flex: 1;
            background-color: gray;
        }

        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }

        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }

        p span {
            flex: 1;
        }

        p span:nth-child(2) {
            flex: 2;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>

</html>

4.2 align-self 控制子项自己在侧轴上的排列方式

可覆盖align-items属性

默认auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: blueviolet;
            /* align-items: flex-end; */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: darkcyan;
        }

        div span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>

4.3 order 属性定义项目的排列顺序

默认是0，-1比0小所以在前面

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: blueviolet;
            /* align-items: flex-end; */
        }

        div span {
            width: 150px;
            height: 100px;
            background-color: darkcyan;
        }

        div span:nth-child(2) {
            order: -1;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

</html>