搜索
  • CSS如何实现弹性(flex)布局
  • 发布于 2个月前
  • 246 热度
    0 评论
flexible 模型又被称为 flexbox，它不像栅格布局可以同时处理行跟列，只能处理单行或者当列，是一维的布局模型。它可以简便、完整且适应的实现页面各种布局，web网站页面一般用 em 或者 rem 单位(1em = 16px, 1rem = 10px)，小程序一般用 rpx 单位(1px = 2rpx)进行相对布局，特别的是字体能够放缩方便且自适应。flex 是我平常使用最多的布局，它适用的场景有很多，主要是用于比例分割居中显示，例如携程的移动页面或者淘宝网页的布局等。

特点：能够调整其子元素在不同的屏幕分辨率下用最适合的方法填充合适的空间。
优点：适应性强，容易上手，且很简便的完成很多页面布局效果，后期维护容易，若需求细微度不高，那么是很好的选择。
缺点：兼容性差，在低版本的浏览器有可能渲染不出效果（ie9及以上）。
注：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

效果如下：

CSS实现Flex布局代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局-堆代码 duidaima.com</title>
    <style>
        .flexbox {
            width: 500px;
            background: bisque;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            padding: 10px;
        }
        .flexbox div {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            border: 1px solid #fefefe;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="flexbox">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

总结：

以上就是CSS实现的flex布局的代码，这里面的核心代码就是用 display: flex;来声明布局模式

用户评论
可能感兴趣的话题