弹性布局flex平分一行、换行平分以及flex布局宽度自定义

最新推荐文章于 2024-07-27 10:37:47 发布

左又

最新推荐文章于 2024-07-27 10:37:47 发布

阅读量1.1w

点赞数 3

分类专栏： css3

本文链接：https://blog.csdn.net/qq_29715077/article/details/94381653

版权

css3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<div class="nav">

  <div class="nav-li">成就</div>

  <div class="nav-li">动态</div>

  <div class="nav-li">收藏</div>

</div>

Css:

   .nav{

 

 display:inline-block;

    /* Firefox */

    display:-moz-box;

    -moz-box-orient:horizontal;

    /* Safari, Opera, and Chrome */

    display:-webkit-box;

    -webkit-box-orient:horizontal;

    /* W3C */

    display:box;

    box-orient:horizontal;

}

.nav-li{

height: 40px;

line-height: 40px;

-webkit-box-flex: 1.0;

-moz-box-flex:1.0;

 box-flex:1.0;

}

第二种平分一行

/*ul*/  
.flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

/*li 平均分配*/  
.flex .flex_item{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

不管添加多少行都是平分

第一种换行平分

.list{
    display: flex;
    flex-flow: row wrap;


}
.item{
    flex: 0 0 25%;
}

第二种换行平分

.list{
		display: flex;
        flex-wrap: wrap;
        justify-content: space-between; 
        text-align: center;
        position: relative;
        width: 750px;
		border:1px solid red;
	 }
	.item{
		border: 1px solid #CACACA;
        color: #888;
        font-size: 15px;
        width: 180px; 
		margin-top:20px;
		margin-bottom:20px; 
        text-align: center; 
		align-items:center;
        
	 }
	 .item:not(:nth-child(3n)){
		margin-right: 68px;
	}
	.list:after {
		content: "";
		flex: auto;
	}

html

<div class="list">
		<div class="item">
			全部
		</div>
		<div class="item">
			全部
		</div>
		<div class="item">
			全部
		</div>
		<div class="item">
			全部
		</div>
		<div class="item">
			全部
		</div>
		<div class="item">
			全部
		</div>
		<div class="item">
			全部
		</div>
		<div class="item">
			全部
		</div>
		<div class="item">
			全部
		</div>
		<div class="item">
			全部
		</div>
	 </div>

3。针对微信小程序画table

.tr{
    display: flex;
}
.td{
    flex-shrink: 0;  
    width: 200rpx;
}

4、换行平分比如一行三个显示两行

            .product-list{
                display: flex;
                flex-wrap: wrap;
                justify-content: start;
                position: relative;
                margin: 0 20rpx;
                .product-item{
                    flex: 0 0 210rpx;
                    margin-left: 20rpx;
                    &:nth-child(3n+1){
                        margin-left: 0rpx; 
                    }
                    .img{
                        width: 210rpx;
                        height: 210rpx;
                    }
                }
            }