【超赞弹性布局】

最新推荐文章于 2024-07-19 23:42:48 发布

粉色水杯

最新推荐文章于 2024-07-19 23:42:48 发布

阅读量82

点赞数 2

文章标签： html5

本文链接：https://blog.csdn.net/linxuanasd/article/details/123679012

版权

超赞弹性布局上

- 自我感受-前言
- 弹性布局

自我感受-前言

以前都是使用top\left进行排布，遇到多数目的，就不太便捷，遇到了需要实现下面这样的一个排布，感叹使用弹性布局的便利。下面来总结一下弹性布局吧！！！
在这里插入图片描述

 flexDirection: 'row', //React Native 
 justifyContent: 'center', 
 alignItems: 'flex-start'

弹性布局

简单设置几个盒子

 <style>
        #pink{
            width: 600px;
            /* display: flex; */
        }
        #pink_1{
            width: 100px;
            height: 100px;
            border: 10px solid palevioletred;
            background-color: rgb(211, 167, 167);
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="pink">
        <div id="pink_1">粉色水杯</div>
        <div id="pink_1">粉色水杯</div>
        <div id="pink_1">粉色水杯</div>
        <div id="pink_1">粉色水杯</div>
    </div>
</body>

在这里插入图片描述

弹性布局的开启，需要你在最外层的容器上设置
给id为pink的div开启弹性布局

 #pink{
            width: 600px;
            display: flex;
        }

我加一个数字便于区分，1234，开启弹性布局后，会从左向右排列成一行
在这里插入图片描述

简单给最外层容器加个边框，方面下边进行

justify-content: center;
进行横轴水平居中

#pink{
            width: 600px;
            height: 400px;
            display: flex;
            justify-content: center;
            border: 1px solid rebeccapurple;
        }

在这里插入图片描述

 justify-content:space-between;

左右两端对齐，间距相等
在这里插入图片描述

justify-content:space-around;
// justify-content:space-evenly;间距相等

项目间距是容器到项目的2倍
在这里插入图片描述

align-items: center;
交叉轴居中排列

#pink{
            width: 600px;
            height: 400px;
            display: flex;
            justify-content:space-evenly;
            align-items: center;
            border: 1px solid rebeccapurple;
        }

在这里插入图片描述
也有其他，默认起始位置，最下方

 /* align-items:flex-start; */
            align-items: flex-start;

水平垂直居中

			justify-content:center;
            align-items: center;

在这里插入图片描述

粉色水杯

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【超赞弹性布局】

超赞弹性布局上自我感受-前言弹性布局自我感受-前言以前都是使用top\left进行排布，遇到多数目的，就不太便捷，遇到了需要实现下面这样的一个排布，感叹使用弹性布局的便利。下面来总结一下弹性布局吧！！！ flexDirection: 'row', //React Native justifyContent: 'center', alignItems: 'flex-start'弹性布局简单设置几个盒子 <style> #pink{ w
复制链接

扫一扫