• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

js-div-flex布局-弹性布局-元素居-盒子水平垂直居

武飞扬头像
插件开发
帮助1


display: flex; 一定要给亲爸爸(父元素)style中添加。

<!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: 1250px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            /* 弹性容器 */
            display: flex;
            /* 主轴对齐方式 */
            justify-content: space-between;
        } 
        .box>div {
            width: 250px;
            height: 200px;
            background-color: aqua;
        } 
        .box>div:nth-child(2n) {
            background-color: yellowgreen;
        } 
        a {
            width: 250px;
            height: 200px;
            background-color: blue;
        } 
        /* 通过父元素,操作子元素,弹性布局 */
    </style>
</head>
 
<body>
    <div class="box">
        <!-- 弹性盒子,默认放在一排 -->
        <div>1</div>
        <div>2</div>
        <a href="#">3</a>
    </div>
</body>
</html>

1.主轴对齐方式

属性值 作用
flex-start 默认值, 起点开始依次排列
flex-end 终点开始依次排列
center 沿主轴居中排列
space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

1.1.justify-content:space-between; 两侧没缝隙

学新通

1.2.justify-content:space-around; 盒子平均分,比例1:2

学新通

1.3.justify-content:space-evenly; 盒子平均分,比例为1:1

学新通

1.4.justify-content: center; 经常用于让一个盒子水平居中

学新通

2.侧轴对齐方式

属性值 作用
flex-start 起点开始依次排列
flex-end 终点开始依次排列
center 沿侧轴居中排列
stretch 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器
可以让元素垂直居中。  

可以通过flex让一个子盒子(块)水平和垂直居中。

        .box {
            width            : 400px;
            height           : 400px;
            margin           : 100px auto;
            background-color : red;
            display          : flex;

            /* 主轴居中 */
            justify-content  : center;
            /* 侧轴居中 */
            align-items      : center;
        }

        .box > div {
            width            : 200px;
            height           : 200px;
            background-color : green;
        }

3.伸缩比

把父盒子分为若干份数,每个子盒子各占几份。
flex:1; 一定给子盒子加
分配父级剩余的空间

flex: 1;

比如有一个父盒子里面有四个子盒子,每个子盒子写 flex:1; 此时每个子盒子各占四分之一。

        .box {
            width            : 1200px;
            height           : 400px;
            background-color : pink;
            margin           : 100px auto;
            /* 弹性容器 */
            display          : flex;
        }

        /* 弹性盒子 */
        .box > div {
            /* 伸缩比,占的是父盒子的宽度,把他分成了等份 */
            flex             : 1;
            /* 默认子盒子和父亲一样高 */
            background-color : aqua;
        }
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

注意:
一定要给子盒子添加。
子盒子默认高度会和父盒子一样高。(前提是不给高度)

4.圣杯布局

核心思路:
两侧盒子写固定大小
中间盒子 flex: 1; 占满剩余空间

        .search {
            width   : 100%;
            height  : 50px;
            display : flex;
        }

        .left {
            width            : 50px;
            height           : 50px;
            background-color : yellowgreen;
        }

        .center {
            flex             : 1;
            height           : 50px;
            background-color : red;
        }

        .right {
            width            : 50px;
            height           : 50px;
            background-color : yellowgreen;
        }

注意:中间flex: 1; 和 width 有冲突。 优先执行 flex:1;

5.总结

  1. flex眼中,标签不再分类。简单说就是没有块级元素,行内元素和行内块元素。任何一个元素都可以直接给宽度和高度一行显示。
  2. Flex不存在脱标的情况:也就是基本淘汰了浮动,更不用清除浮动。
  3. 当然存在兼容性问题,如果不考虑兼容性可以大量使用,如果是移动端则不用考虑直接flex。

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhfgkee
系列文章
更多 icon
同类精品
更多 icon
继续加载