父元素css3

最新推荐文章于 2024-07-25 11:52:08 发布

地狱火牛战士

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量155

点赞数 4

文章标签： html css 前端

本文链接：https://blog.csdn.net/kkaagf/article/details/138537151

版权

align-content

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>flex弹性盒子布局</title>
    <style>
        .flex-container {
            height: 600px;
            /* padding: 20px; */
            display: flex;
            border: 3px solid rgb(196, 229, 232);
            flex-direction: row;
            flex-wrap: wrap;

            /*  
                align-content  设置侧轴上的子元素的排列方式  （多行）  
                只能用于子元素出现换行的情况，在单行的情况下是没有效果的
             */

            /* align-content: flex-start;   默认值在侧轴的头部开始排列 */
            /* align-content: flex-end;    在侧轴的尾部开始排列 */
            /* align-content: center;  在侧轴中间显示 */
            /* align-content: space-around;   子元素在侧轴平分剩余空间 */
            /* align-content: space-between;    子元素在侧轴先分布在两头，再平分剩余空间 */
            /* align-content: stretch;  设置子元素高度平分父元素高度   此时子元素不要设置高度 */

            align-content: stretch;
        }

        .flex-item {
            background-color: rgb(0, 181, 203);
            color: white;
            width: 100px;
            /* height: 100px; */
            margin: 2px;
            font-weight: bold;
            font-size: 5em;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
        <div class="flex-item">10</div>

    </div>
</body>

</html>

2 align-items

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>flex弹性盒子布局</title>
    <style>
        .flex-container {
            height: 400px;
            /* padding: 20px; */
            display: flex;
            border: 3px solid rgb(196, 229, 232);
            flex-direction: row;

            /*  align-items  设置侧轴上的子元素的排列方式  （单行） */
            /* align-items: flex-start;     从上到下 */
            /* align-items: flex-end;   从下到上 */
            /* align-items: center;    垂直居中（挤在一起居中） */
            /* align-items: stretch;   拉伸（默认值）  不要设置height */



            /* align-items: flex-start; */
            /* align-items: flex-end; */
            /* align-items: center; */
            /* align-items: stretch; */
            align-items: baseline;

        }

        .flex-item {
            background-color: rgb(0, 181, 203);
            color: white;
            width: 100px;
            height: 100px;
            margin: 2px;
            font-weight: bold;
            font-size: 5em;
            text-align: center;
            line-height: 100px;
        }

        .flex-item:nth-child(1) {
            height: 200px;
            line-height: 200px;
        }

        .flex-item:nth-child(3) {
            height: 150px;
            line-height: 150px;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">a</div>
        <div class="flex-item">b</div>
        <div class="flex-item">c</div>
        <div class="flex-item">d</div>
        <div class="flex-item">e</div>
        <div class="flex-item">f</div>
        <div class="flex-item">g</div>
        <div class="flex-item">h</div>
        <div class="flex-item">i</div>
        <div class="flex-item">j</div>

    </div>
</body>

</html>

3.display-item

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>flex弹性盒子布局</title>
    <style>
        .flex-container {
            height: 400px;
            padding: 20px;
            border: 3px solid rgb(196, 229, 232);
            display: flex;

        }

        .flex-item {
            background-color: rgb(0, 181, 203);
            color: white;
            width: 100px;
            /* 查看align-items的默认值效果时需要去掉固定高度设置 */
            height: 100px;
            margin: 2px;
            font-weight: bold;
            font-size: 5em;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
        <div class="flex-item">10</div>

    </div>
</body>

</html>

 /* justify-content   设置主轴上子元素的排列方式    使用此属性时先确定主轴方向*/

            /* justify-content: flex-start;   主轴是x轴（从左向右） */
            /* justify-content: flex-end;   主轴是x轴（从右向左） */
            /* justify-content: center;   在主轴居中对齐 */
            /* justify-content: space-around;   平分剩余空间 */
            /* justify-content: space-between;*/
            /*先两边贴边 ，再评分剩余空间*/
/* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* justify-content: space-around; */