flex布局：

最新推荐文章于 2024-07-08 10:37:02 发布

七堇年~

最新推荐文章于 2024-07-08 10:37:02 发布

阅读量912

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/l_3188868137/article/details/123743417

版权

flex布局：

步骤：

设置div变成flex盒子弹性flex、
```
display：flex；
```

div的子元素发生一些改变

设置flex的盒子称之为父项
盒子里的子元素称之为子项

具体变化：

不再区分块级行内快行内元素，全都可以设置宽高度
子项默认的宽高度：宽度由内容撑开高度等于父项的高
子项

使用浮动没有效果无效

使用定位、margin、transform都有效

4.默认情况下子项总宽度大于父项的宽也不会换行！！！

flex不会换行只会压缩自身的宽度而已

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

<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>
        .box {
            margin: 50px auto;
            display: flex;
            width: 600px;
            height: 600px;
            border: 1px solid red;
            justify-content: center;
        }
        span {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>
            1
        </span>
    </div>
</body>

</html>

对齐方式：水平对齐 justify-content:

左对齐：flex-start
右对齐：flex-end
居中对齐：flex-center
先两侧对齐，后间隔均匀分开：space-between sb
间隔存放，两侧控件小于中间：space-around sd
绝对平均：space-evenly sv

对齐方式：垂直对齐

1.单行 align-items：

align-items：flex-start 上对齐
align-items：flex-end 下对齐
align-items：center 垂直居中

2.多行 align-content：

align-content：flex-start 上对齐
align-content：flex-end 下对齐
align-content：center 垂直居中
align-content：space-between sb 上下拉满剩余空格平分
align-content：space-around sd 左右小间隔中间大间隔
align-content：space-evenly sv 空格均匀平分

换行 flex-wrap：

flex-wrap：nowrap（默认值）不会换行，排满压缩

flex-wrap：wrap 一行排满自动换行

转换主轴 x y flex-direction：

1.主轴为x轴：

row 默认值左到右
row-reverse 右到左

2.主轴为y轴：

columu 常用上到下
columu-reverse 下到上

子项

特点

默认的宽度等于内容撑开
默认的高度等于父项的高
flex：1 设置子项的宽度
align-self 设置子项在侧轴上的对齐
主轴方向改了 column

**flex ** 设置子项占父项的宽（高度）的比例例：flex：1;

align-self 设置子项自己在侧轴的对齐方式

flex-start 左（上）对齐
flex-end 右（下）对齐
center 中间对齐

七堇年~

关注

0
点赞
踩
0

收藏

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

flex布局：步骤：设置div变成flex盒子弹性flex、display：flex；div的子元素发生一些改变设置flex的盒子称之为父项盒子里的子元素称之为子项具体变化：不再区分块级行内快行内元素，全都可以设置宽高度子项默认的宽高度：宽度由内容撑开高度等于父项的高子项使用浮动没有效果无效使用定位、margin、transform都有效4.默认情况下子项总宽度大于父项的宽也不会换行！！！flex
复制链接

扫一扫