移动web flex弹性布局

最新推荐文章于 2024-08-15 18:19:19 发布

流川枫不风流

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量78

点赞数 1

文章标签：前端 css css3

本文链接：https://blog.csdn.net/YasWestmere/article/details/127198839

版权

flex布局: 父元素添加display:flex 父元素就称之为弹性容器,子元素成为弹性盒子

主轴对齐居中方式:justify-content: space-between; space-around; space-evenly; center;

侧轴对齐居中方式: align-items: center;

.box {
            width: 800px;
            height: 400px;
            background-color: pink;
            display: flex;
            /* 弹性容器 给父元素添加 */
            justify-content: space-between;
            /* 主轴对齐方式 */
            margin: 0 auto;
        }
        .box div {
            width: 150px;
            height: 200px;
            background-color: aqua;
        }
        .box div:nth-child(2n) {
            background-color: blue;
        }
        /* flex布局:弹性布局 (操作父亲管儿子)
        1:父元素:弹性容器
        2:子盒子:弹性盒子
        3:主轴:(默认x轴)
        4:侧轴:(默认y轴) */

 <style>
          .box {
            width: 800px;
            height: 400px;
            background-color: pink;
            display: flex;
            /* 弹性容器 给父元素添加 */
            /* justify-content: space-between; */
            /* 主轴对齐方式 */
            margin: 0 auto;
            align-items: flex-start;
            /* 侧轴从上到下 */
            align-items: flex-end;
            /* 侧轴从下到上 */
            align-items: center;
            /* 子盒子垂直居中 */
            align-items: stretch;
            /* 拉伸子盒子,若子盒子没高度默认拉伸与父元素一样的高度 */
        }
        .box div {
            width: 150px;
            /* height: 200px; */
            background-color: aqua;
        }
        .box div:nth-child(2n) {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
</body>

    <style>
         .box {
            width: 800px;
            height: 400px;
            background-color: pink;
            display: flex;
            /* 弹性容器 给父元素添加 */
            margin: 0 auto;
            /* 主轴对齐方式 */
            justify-content: space-between;
            /* 左右边距对齐,中间自适应 */
            justify-content: space-around;
            /* 左右边距比例为1,中间边距为2 */
            justify-content: space-evenly;
             /* 中间空隙1:1 */
        }
        .box div {
            width: 150px;
            height: 200px;
            background-color: aqua;
        }
        .box div:nth-child(2n) {
            background-color: blue;
        }

    </style>
</head>
<body>
      <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
</body>

圣杯布局:左右两边弹性盒子固定贴在弹性容器旁边,中间剩余内容在自身弹性盒子里占比例一份取flex为1

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 100%;
            height: 50px;
            background-color: pink;
            display: flex;
        }
        .box .left,
        .box .right {
            width: 50px;
            height: 50px;
            background-color: blue;
        }
       
        .box .center {
            flex: 1;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>