前端第四章

最新推荐文章于 2024-08-14 20:13:10 发布

qianmingmaoyao

最新推荐文章于 2024-08-14 20:13:10 发布

阅读量184

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/qianmingmaoyao/article/details/126515963

版权

01-弹性盒子初体验====================

 <style>
        .main {
            display: flex;
            width: 600px;
            /* height: 300px; */
            background-color: #ccc;
        }
        /* .main div {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        } */
        /* 子元素：一行内显示，如果宽度多，子元素不变，如果宽度不够子元素自动进行缩小 */
        /* 对于弹性盒子，子元素div和span都是同等属性 */
        
        .main span {
            width: 200px;
            height: 100px;
            border: 1px solid yellow;
        }
    </style>
</head>

<body>
    <div class="main">
        <!-- <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
        <div class="con4">con4</div>
        <div class="con5">con5</div> -->
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <span>span5</span>
    </div>
</body>

02-父元素-flex-direction=======================

    <style>
        .main {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: #ccc;
            /* 主轴的方向 flex-direction*/
            /* 默认 */
            /* 主轴为水平方向，起点在左端。 */
            flex-direction: row;
            /* 主轴为水平方向，起点在右端。 */
            /* flex-direction: row-reverse; */
            /* column：主轴为垂直方向，起点在上沿。 */
            /* flex-direction: column; */
            /* column-reverse：主轴为垂直方向，起点在下沿。 */
            /* flex-direction: column-reverse; */
        }
        
        .main div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
        <div class="con4">con4</div>
        <div class="con5">con5</div>
    </div>
</body>

03-父元素-flex-wrap=====================

 <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 600px;
            height: 600px;
            background-color: #ccc;
            /* 换行方式 */
            /* （默认） */
            /* flex-wrap: nowrap; */
            /* wrap：换行，第一行在上方。 */
            flex-wrap: wrap;
            /* wrap-reverse：换行，第一行在下方。 */
            flex-wrap: wrap-reverse;
        }
        
        .main div {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
        <div class="con4">con4</div>
        <div class="con5">con5</div>
    </div>
</body>

04-父元素-flex-flow======================

  <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 600px;
            height: 300px;
            background-color: #ccc;
            /* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */
            flex-flow: column wrap;
        }
        
        .main div {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
        <div class="con4">con4</div>
        <div class="con5">con5</div>
    </div>
</body>

05-主轴上的对齐方式============================

 <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 1200px;
            height: 200px;
            margin: 0 auto;
            background-color: #ccc;
            /* 主轴上的对齐方式 */
            /* flex-start（默认值）：左对齐 */
            /* flex-end：右对齐 */
            /* justify-content: flex-end; */
            /* center：居中 */
            /* justify-content: center; */
            /* space-between：两端对齐，项目之间的间隔都相等。 */
            /* justify-content: space-between; */
            /* space-around：每个项目两侧的间隔相等。 */
            justify-content: space-around;
        }
        
        .main div {
            width: 250px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
        <div class="con4">con4</div>
    </div>
</body>

06-副轴上的对齐方式==================

 <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 1200px;
            height: 600px;
            margin: 0 auto;
            background-color: #ccc;
            /* 默认 */
            align-items: stretch;
            /* flex-start：交叉轴的起点对齐。 */
            align-items: flex-start;
            /* flex-end：交叉轴的终点对齐。 */
            align-items: flex-end;
            /* center：居中 */
            align-items: center;
            /* 基线对齐 */
            align-items: baseline;
        }
        
        .main div {
            width: 250px;
            height: 100px;
            border: 1px solid red;
        }
        
        .con1 {
            font-size: 24px;
        }
        
        .con3 {
            font-size: 36px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1x</div>
        <div class="con2">con2x</div>
        <div class="con3">con3x</div>
        <div class="con4">con4x</div>
    </div>
</body>

07-多根轴线的对齐方式================

<style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 1200px;
            height: 600px;
            margin: 0 auto;
            background-color: #ccc;
            flex-wrap: wrap;
            /* 多根轴线的对齐方式 */
            /* align-content: stretch; */
            /* 起点在上方 */
            align-content: start;
            /* 起点在下方 */
            align-content: end;
            /* 居中 */
            align-content: center;
            /* 两端对齐 */
            align-content: space-between;
            /* 每个项目两侧的间隔相等。 */
            align-content: space-around
        }
        
        .main div {
            width: 300px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
        <div class="con4">con4</div>
        <div class="con5">con5</div>
        <div class="con6">con6</div>
        <div class="con7">con7</div>
        <div class="con8">con8</div>
    </div>
</body>

08-水平垂直居中=============================

<style>
        .father {
            width: 600px;
            height: 300px;
            border: 1px solid red;
            display: flex;
            /* 主轴center */
            justify-content: center;
            align-items: center;
        }
        
        .son {
            width: 200px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

09-多个盒子水平水平垂直居中==============

 <style>
        .father {
            width: 800px;
            height: 300px;
            border: 1px solid red;
            display: flex;
            /* 主轴center */
            justify-content: center;
            align-items: center;
        }
        
        .son {
            width: 200px;
            height: 100px;
            border: 1px solid #666;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>

10-弹性盒子常用的布局方式===================

<style>
        .father {
            width: 1000px;
            height: 300px;
            border: 1px solid red;
            display: flex;
            /* 主轴center */
            justify-content: space-between;
            align-items: center;
        }
        
        .son {
            width: 200px;
            height: 250px;
            border: 1px solid #666;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
    </div>
</body>

11-多根轴线的对齐方式=====================

 <style>
        .father {
            width: 900px;
            height: 600px;
            border: 1px solid red;
            display: flex;
            /* 主轴center */
            justify-content: space-between;
            /* 副轴居中 */
            align-items: center;
            flex-wrap: wrap;
            padding: 0px 10px;
        }
        
        .son {
            width: 200px;
            height: 250px;
            border: 1px solid #666;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
        <div class="son">son</div>
    </div>
</body>

12-子元素-order=======================

<style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 600px;
            height: 300px;
            background-color: #ccc;
        }
        
        .main div {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
        /* 由小到大的顺序进行排列-默认order：0 
            支持负数
        */
        
        .con1 {
            order: 2;
        }
        
        .con3 {
            /* 默认的order：0 */
            order: 1;
        }
        
        .con2 {
            order: -1;
        }
        
        .con4 {
            order: 3;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
        <div class="con4">con4</div>
        <div class="con5">con5</div>
    </div>
</body>

13-子元素-flex-grow=====================

<style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: #ccc;
        }
        
        .main div {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
        /* 默认值 */
        /* flex-grow: 0; */
        
        .con1 {
            flex-grow: 1;
        }
        
        .con2 {
            flex-grow: 2;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
    </div>
</body>

14-子元素-flex-shrink====================

 <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 500px;
            height: 300px;
            background-color: #ccc;
        }
        
        .main div {
            width: 200px;
            height: 100px;
            border: 1px solid red;
        }
        /* 默认值 */
        /* flex-shrink: 1; */
        /* 值越大，缩小的倍数越大 */
        
        .con1 {
            flex-shrink: 2;
        }
        
        .con2 {
            flex-shrink: 3;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
    </div>
</body>

15-子元素-flex-basis============================

 <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 1000px;
            height: 300px;
            background-color: #ccc;
        }
        
        .main div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            flex-grow: 1;
        }
        
        .main .con1 {
            flex-basis: 0px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
    </div>
</body>

16-子元素-flex@==========================

<style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 1000px;
            height: 300px;
            background-color: #ccc;
        }
        
        .main div {
            width: 400px;
            height: 100px;
            border: 1px solid red;
        }
        
        .main .con1 {
            /* flex-grow flex-shrink flex-basis; */
            /* 1 1 auto */
            /* flex: auto; */
            /* 0 0 auto */
            /* flex: none; */
            /* 0 1 0% */
            /* flex: 0; */
            /* （flex-grow 1， flex-shrink 1,flex-basis 0%） */
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <div class="con2">con2</div>
        <div class="con3">con3</div>
    </div>
</body>

17-子元素-flex1的应用

 <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            height: 300px;
            background-color: #ccc;
        }
        
        .main div {
            height: 100px;
            border: 1px solid red;
            margin: 0 10px;
            /* flex-grow flex-shrink flex-basis */
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1</div>
        <!-- <div class="con2">con2</div>
        <div class="con3">con3</div> -->
    </div>
</body>

18-副轴子元素-不一样的对齐方式=============

 <style>
        .main {
            /* 设置为弹性盒子 */
            display: flex;
            width: 1200px;
            height: 600px;
            margin: 0 auto;
            background-color: #ccc;
            /* center：居中 */
            align-items: center;
        }
        
        .main div {
            width: 250px;
            height: 100px;
            border: 1px solid red;
        }
        /* align-self: auto | flex-start | flex-end | center | baseline | stretch; */
        
        .con1 {
            align-self: flex-start;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="con1">con1x</div>
        <div class="con2">con2x</div>
        <div class="con3">con3x</div>
        <div class="con4">con4x</div>
    </div>
</body>