0
点赞
收藏
分享

微信扫一扫

弹性盒模型

西特张 2022-03-22 阅读 49

弹性盒模型

介绍:弹性盒模型是一种更加先进的开发模式,相比较于之前更加简单有效,可以对一个元素的子元素进行排列、对齐、分配空间,主要用于网页布局、移动端、小程序、平板等界面;

使用 display:flex 开启弹性盒模型,注意是父级控制子级,需要在父级进行设置;

一、特征:

1、会将所有的元素并排成一行,自动分配空间(如果子元素的大小超过父级的大小,会等比例缩小);

2、子级的宽度不写为零,由内容撑开;

3、子级高度不写,会默认继承父级100%的高度;

.box{
            width: 800px;
            height: 800px;
            margin: 100px auto;
            border: 1px solid red;
            /* 使用display:flex开启盒模型 */
            display: flex;
}
.box li{
            width: 100px;
            height: 100px;
            background-color: blanchedalmond;
}
<ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
</ul>

 

二、主轴方向

使用flex-direction控制主轴方向,默认从左向右

/* 默认从左向右 */
flex-direction: row;

/* 从右向左 */
flex-direction: row-reverse;

/* 从上向下 */
flex-direction: column;

/* 从下向上 */
flex-direction: column-reverse;

 

 三、交叉轴换行

前提:子元素的宽度要大于父级的宽度才会进行换行

/* 换行 */
flex-wrap:wrap;

/* 不换行 */
flex-wrap:nowrap;

/* 反方向换行 */
flex-wrap:wrap-reverse;

使用flex-wrap:wrap进行换行,换行的方向为交叉轴方向,交叉轴方向由主轴方向确定,始终与主轴方向垂直

.box{
            width: 800px;
            height: 800px;
            margin: 100px auto;
            border: 1px solid red;
            display: flex;
            /* 主轴方向默认从左向右 */
            flex-direction: row;
            /* 设置交叉轴换行 */
            flex-wrap: wrap;
}
.box li{
            width: 200px;
            height: 100px;
            background-color: blanchedalmond;
}
<ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>

 

 

flex-wrap: wrap-reverse;

 

 控制主轴方向交叉轴换行复合写法

flex-flow: row wrap;

/* 相当于

flex-direction: row;
flex-wrap: wrap;

 */

四、主轴的多行控制对齐

通过设置justify-content样式控制主轴的多行对齐方式

1、开始位置对齐

由于主轴方向从左向右,开始位置在左边,所以向左对齐;

justify-content: flex-start;

 

2、结束位置对齐

由于主轴方向从左向右,终点位置在右边,所以向右对齐;

justify-content: flex-end;

 

3、居中对齐

justify-content: center;

 

4、两端对齐

子元素之间留有空隙

justify-content: space-between;

 

5、两端居中对齐

justify-content: space-around;

 

举报

相关推荐

0 条评论