HTML-flex弹性容器

weixin_45855594

已于 2022-06-27 22:52:50 修改

阅读量128

点赞数

文章标签： html css css3

于 2022-06-27 22:48:21 首次发布

本文链接：https://blog.csdn.net/weixin_45855594/article/details/125492525

版权

一、flex弹性布局

二、父元素属性

三、子元素属性

一、flex弹性布局

1.作用：可以让我们的盒子并排显示，并且也可以让行内元素转换为行内块元素。

2.使用：在父盒子上添加属性 display:flex。

注意：使用时要注意自己的主轴和侧轴的设置，因为一般情况下默认的主轴为X轴的方向，侧轴为y轴方向。

二、父元素属性

1.flex-direction：设置主轴方向，默认主轴方向为x轴方向，也可设置y轴为主轴。
row(默认的值) row-reverse column column-reverse

2.justify-content：设置主轴上子元素的排列方式 , 使用前先确定好主轴方向。
flex-start flex-end center space-around space-between*

 div{
            width: 600px;
            height: 800px;
            background-color: green;
            display: flex;//弹性容器
            flex-direction: row;//主轴为x轴
            justify-content: space-around;//元素左右两边同等距离分配
            flex-wrap: wrap;  //允许换行
        }
        span{
            background-color: red;
            width: 200px;
            height: 200px;
            margin: 10px;
            
        }


<div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
 </div>

3.flex-wrap：设置子元素是否换行，布局中默认不换行。
nowrap（不换行） wrap（换行）

4.align-items：设置侧轴上的子元素排列方式（单行）。
flex-start flex-end center stretch（使用时子项目不设置高度，使用较少）

5.align-content：设置侧轴上的子元素排列方式（多行），有换行时使用。
flex-start flex-end center space-around space-between stretch

6.flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap。

三、子元素属性

1.flex：子项目占的分数，定义子项目分配剩余空间，用flex来表示占多少份。

2.align-self:控制子项目自己在侧轴的排列方式。

3.order: 定义子项的排列顺序（前后顺序），默认为0，数值越小排列越靠前。

 div{
            width: 800px;
            height: 200px;
            background-color: pink;
            display: flex;
            /* flex-direction: row;
            justify-content: space-between; */
            margin: 0 auto;
            


        }
        span{
            width: 200px;
            height: 100px;
            background-color: green;
        }
      .two{
            flex: 2;
            width: 200px;
            height: 100px;
            background-color: yellowgreen;
            order: -1; //方块2跑到最前面

        }
      .one {
            flex: 1;
            width: 200px;
            height: 100px;
            /* height: 100px; */
            
        }
        .three{
            flex: 1;
            width: 200px;
            height: 100px;
            align-self: flex-end; //方块3的排列位置
            /* order: -1; */
            /* height: 100px; */
            
        }

<body>
    <div>
        <span class="one">1</span>
        <span class="two">2</span>
        <span class="three">3</span>

    </div>
</body>