Flex布局总结

Dragon Wu

已于 2022-12-16 14:34:05 修改

阅读量5.3k

点赞数 4

分类专栏：前端文章标签： css html css3

于 2022-03-14 20:03:08 首次发布

本文链接：https://blog.csdn.net/qq_50909707/article/details/123483999

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一、基本使用

二、主要的父容器属性

（1）flex-direction设置子元素排列

（2）justify-content设置子元素对齐方式

（3）flex-wrap设置换行

（4）align-items单行时设置子元素位置

（5) align-content多行时设置子元素位置

（6）flex-flow复合属性

三、子项常用属性

（1）flex设置子项的空间大小

（2）align-self单独设置每个子项的位置

（3）order设置item顺序

一、基本使用

父容器与子容器

使用flex布局就是要将父容器设置为flex布局，之后便可控制子元素的布局。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex布局测试</title>
    <style>
        .container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
        }
        .container>span{
            width: 150px;
            height: 100px;
            background: mediumpurple;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

效果：

二、主要的父容器属性

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

主轴默认沿x轴正方向，侧轴默认沿y轴负方向。

（1）flex-direction设置子元素排列

元素按主轴进行排列,默认为row

子元素，按列进行排列，如下：

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            flex-direction: column;
        }

（2）justify-content设置子元素对齐方式

设置子元素在主轴上的排列方式，默认为flex-start

案例，设置右对齐，如下：

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: flex-end;
        }

设置居中对齐，如下：

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: center;
        }

平方剩余空间，如下：

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: space-around;
        }

先两边贴边，再平方空间对齐，如下：

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: space-between;
        }

（3）flex-wrap设置换行

设置子元素是否换行，默认不换行，当子元素过多时即使设置了宽度子元素也会按比例收放排列。

设置五个已超过宽度的小的子元素，效果如下：

<div class="container">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>

设置换行，效果如下：

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: space-between;
            f

（4）align-items单行时设置子元素位置

侧重的子元素位置(单行)

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: space-between;
            align-items: center;
        }

效果:

（5) align-content多行时设置子元素位置

设置侧轴上子元素的排列方式（多行），一般配合换行属性使用该属性

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: space-between;
            align-content: space-between;
            flex-wrap: wrap;
        }

效果：

（6）flex-flow复合属性

相当于同时可以设置flex-direction和flex-wrap。

使用案例，如下：

.container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: space-between;
            align-content: space-between;
            /*flex-direction: column;*/
            /*flex-wrap: wrap;*/
            /*相当于上面两行的效果*/
            flex-flow: column wrap;
        }

效果：

三、子项常用属性

属性	描述
flex	子项目占的份数
align-self	控制子项自己在侧轴的排列方式
order	定义了子项的排列顺序

（1）flex设置子项的空间大小

用来设置子项分配多少份空间，按照剩余的空间来分配。

使用案例如下：

<style>
        .container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: space-between;
            align-content: space-between;
        }
        .container>span:nth-child(1){
            width: 150px;
            height: 100px;
            background: mediumpurple;
            margin-right: 5px;
        }
        .container>span:nth-child(2){
            width: 150px;
            height: 100px;
            background: red;
            margin-right: 5px;
            flex:1;
        }
        .container>span:nth-child(3){
            width: 150px;
            height: 100px;
            background: blue;
            margin-right: 5px;
        }
    </style>

效果：

（2）align-self单独设置每个子项的位置

效果：

（3）order设置item顺序

使用案例：

<style>
        .container{
            display: flex;
            width: 80%;
            height: 300px;
            background: pink;
            justify-content: space-between;
            align-content: space-between;
        }
        .container>span:nth-child(1){
            width: 150px;
            height: 100px;
            background: mediumpurple;
            margin-right: 5px;
            order: 5;
        }
        .container>span:nth-child(2){
            width: 150px;
            height: 100px;
            background: red;
            margin-right: 5px;
            order: 1;
        }
        .container>span:nth-child(3){
            width: 150px;
            height: 100px;
            background: blue;
            margin-right: 5px;
        }
    </style>

效果：

总结完毕，flex布局能用到的就这些！

Dragon Wu

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
Flex布局总结

目录一、基本使用二、主要的父容器属性（1）flex-direction设置子元素排列（2）justify-content设置子元素对齐方式（3）flex-wrap设置换行（4）align-items单行时设置子元素位置(5) align-content多行时设置子元素位置（6）flex-flow复合属性三、子项常用属性（1）flex设置子项的空间大小（2）align-self单独设置每个子项的位置（3）order设置item顺序一、基本使用...
复制链接

扫一扫