flex布局

最新推荐文章于 2024-06-12 09:52:12 发布

๑曦๑

最新推荐文章于 2024-06-12 09:52:12 发布

阅读量286

点赞数 1

文章标签：前端 css3 html5

本文链接：https://blog.csdn.net/2303_77723338/article/details/133913608

版权

flex分为两个轴，主轴和副轴

一、主轴

1、flex-direction 定义主轴上的排列方向，它由4个值

row
row-reverse
column
column-reverse

（1）row （默认值）横向排列，以横坐标为主轴从左往右排 flex-direction: row;

（2）row-reverse 以横坐标为主轴，从右往左排列 flex-direction: row-reverse;

（3）column 以纵坐标为主轴，从上往下排 flex-direction: column;

（4）column-reverse 以纵坐标为主轴，从下往上排 flex-direction: column-reverse;

2、justify-content 用来使元素在主轴方向上对齐常用的属性值有5个

flex-start
flex-end
center
space-around
space-between

（1） flex-start （默认初始值）以主轴为准,元素以主轴的起始点对齐 justify-content:flex-start;

（2）flex-end 以主轴为准,元素以主轴的终点对齐 justify-content:flex-end

（3）center 以主轴为准,元素从在最中心排列 justify-content:center;

(4) space-around 均匀排列每个元素之间的相同空间（取决于主轴） justify-content:space-around;

(5) space-between 均匀分配两个元素两端对齐（取决于主轴） justify-content:space-between;

二、副轴

1、align-items 属性(单行)可以使所有（多个）元素在副轴的方向上对齐它的常用属性值有4个

stretch
flex-start
flex-end
center

（1）stretch (默认初始值) 元素会在副轴上被拉伸 align-items:stretch;

（2）flex-start 可以设置项目开始端对齐align-items:flex-start;

（3）flex-end 可以设置项目的末端对齐align-items:flex-end;

（4）center 可以设置项目居中对齐align-items:center;

2、align-content 属性用于（多行）对齐，只能用于子元素换行的情况下使用，它的常用属性右5个

flex-start
flex-end
center
space-around
space-between

（1）align-content:flex-start; 上对齐

（2）align-content:flex-end; 下对齐

（3）align-content:center; 居中对齐

（4）align-content:space-around; 均匀排列两行元素之间的相同空间

（5）align-content:space-between; 均匀分配上下两行元素的两端对齐

（6）align-content 和 align-items 的区别

align-items 适用于单行的情况下，只有上对齐，下对齐，居中，拉伸
align-content 适用于换行（多行）的情况下（单行无效），可以设置上对齐，下对齐，居中，拉伸以及平均分配剩余空间等属性。

3、align-self 属性用于单个元素对齐

flex-start
flex-end
center
space-around
space-between
stretch

就好比如对第二个元素盒子进行单个拉伸 align-self:stretch;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con {
            width: 500px;
            display: flex;
            height: 500px;
            background-color: antiquewhite;
            align-items: baseline;
        }

        .con>:nth-child(2) {
            align-self: stretch;
        }

        .con div {
            width: 100px;
            background-color: aqua;
            margin: 10px 10px;
        }
    </style>
</head>

<body>
    <div class="con">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

三、换行

flex-wrap 决定子元素是否换行，它有2个属性

（1）nowrap (默认不换行) 例如我们有一个500px宽的父盒子，父盒子里面有六个100px宽的子盒子，默认不换行六个100px宽的盒子就会缩小自己的宽度，放在父盒子的一行上

（2）wrap (换行) 例如我们有一个500px宽的父盒子，父盒子里面有六个100px宽的子盒子，可以设置wrap属性来自动换行

（3）flex-direction 和 flex-wrap 可以组合写成 flex-flow 第一个值指定flex-direction 第二个值指定 flex-wrap的值 flex-flow: row/column wrap/nowrap;

四、flex布局子项常见属性

flex 子项目占的份数
order 属性定义的排列顺序（前后排序）

（1）flex 属性定义子项目（在子盒子里写这个属性）分配剩余空间，用flex来表示占多少份数（默认是0份） flex: 份数; 例如有三个子盒子如果 flex:1; 的话表示给三个盒子平均分配宽度。还可以指定某个子盒子的份数，例如指定第2个盒子所占的份数为6份

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con {
            width: 500px;
            height: 500px;
            display: flex;
            background-color: antiquewhite;
        }

        .con div {
            height: 100px;
            background-color: aqua;
            margin: 10px 10px;
        }


        .con div:first-child {
            flex: 1;
        }

        .con div:nth-child(2) {
            flex: 6;
        }

        .con div:nth-child(3) {
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="con">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

（2）order 定义子盒子的排列顺序（默认是0 ，-1比0小所以在前面） order:-1;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con {
            width: 500px;
            height: 500px;
            display: flex;
            background-color: antiquewhite;
        }

        .con div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 10px 10px;
        }

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

<body>
    <div class="con">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

๑曦๑

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
flex布局

（1）nowrap (默认不换行) 例如我们有一个500px宽的父盒子，父盒子里面有六个100px宽的子盒子，默认不换行六个100px宽的盒子就会缩小自己的宽度，放在父盒子的一行上。（1） flex-start （默认初始值）以主轴为准,元素以主轴的起始点对齐 justify-content:flex-start;（2）flex-end 以主轴为准,元素以主轴的终点对齐 justify-content:flex-end。
复制链接

扫一扫