flex布局(弹性布局)初阶

最新推荐文章于 2023-09-07 11:45:16 发布

VIP文章前端六和四

最新推荐文章于 2023-09-07 11:45:16 发布

阅读量529

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_66156767/article/details/124772851

版权

flex布局

flex布局极大的提高了我们布局的效率，更简单、灵活。

使用flex布局

使用的步骤比较简单：

1、给需要使用弹性盒子布局的亲父元素设置：display: flex; 弹性布局我们一般称呼父元素为：弹性容器，子元素为弹性盒子。

2、布局所设置的元素也基本都写在父级。

使用弹性布局时一定要注意：display: flex; 一定要给亲父级添加并且它只影响它的亲儿子元素，孙子级完全无影响！

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 {
           width: 800px;
            height: 300px;
            margin: 100px auto;
            /* 弹性容器 */
            display: flex;
            /* 主轴对齐方式

最低0.47元/天解锁文章

前端六和四

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex布局(弹性布局)初阶

flex布局flex布局极大的提高了我们布局的效率，更简单、灵活。使用flex布局使用的步骤比较简单：1、给需要使用弹性盒子布局的亲父元素设置：display: flex;弹性布局我们一般称呼父元素为：弹性容器，子元素为弹性盒子。2、布局所设置的元素也基本都写在父级。使用弹性布局时一定要注意：display: flex; 一定要给亲父级添加并且它只影响它的亲儿子元素，孙子级完全无影响！flex属性值代码有：<!DOCTYPE ...
复制链接

扫一扫