弹性布局display：flex常用属性

最新推荐文章于 2024-04-27 10:05:36 发布

白糖冰棒

最新推荐文章于 2024-04-27 10:05:36 发布

阅读量1.3k

点赞数

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/qq_45876651/article/details/121757055

版权

弹性盒子定义

Flex是Flexible Box的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性。
它的作用：
它能够更加高效方便的控制元素的对齐、排列。
可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的控制元素在页面的布局方向。
按照不同于DOM所指定排序方式对屏幕上的元素重新排序。

设置了flex后float就失效了，但是定位仍然可以使用。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。以下元素展示了弹性子元素在一行内显示，从左到右:

<!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>
    .bigbox {
        display: -webkit-flex;
        display: flex;
        width: 400px;
        height: 250px;
        background-color: lightgrey;
    }
    .box {
        background-color: cornflowerblue;
        width: 100px;
        height: 100px;
        margin: 10px;
    }
</style>
</head>
<body>
<div class="bigbox">
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
</div>
</body>
</html>

效果如下图：

最低0.47元/天解锁文章

白糖冰棒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
弹性布局display：flex常用属性

弹性盒子定义Flex是Flexible Box的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性。它的作用：它能够更加高效方便的控制元素的对齐、排列。可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的控制元素在页面的布局方向。按照不同于DOM所指定排序方式对屏幕上的元素重新排序。设置了flex后float就失效了，但是定位仍然可以使用。注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示..
复制链接

扫一扫