flex布局(三) : 多行显示

最新推荐文章于 2024-05-24 17:57:30 发布

winfyho

最新推荐文章于 2024-05-24 17:57:30 发布

阅读量4.7k

点赞数 1

分类专栏：前端 html5css3 文章标签： html html5 css css3 flex

本文链接：https://blog.csdn.net/h284306976/article/details/103998047

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html5css3

4 篇文章 0 订阅

订阅专栏

flex布局(三) : 多行显示

4. flex-wrap 决定items的换行

控制item的多行显示

nowrap(默认) ：单行显示，如果容器container宽度不够，则压缩item宽度适应
wrap ：多行显示，每一行平分容器container高度
wrap-reverse ：多行显示，交叉轴上对调顺序。大多数情况下不会使用这个属性

<style>
.container{
    width: 500px;
    height: 400px;
    border: 1px solid #000;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}
.item{
    width: 100px;
    height: 100px;
    color: #fff;
    text-align: center;
    line-height: 100px;
}
.container{
    /* 设置多行显示 */
    flex-wrap: nowrap;
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;
}

</style>

<body>
    <div class="container">
        <div class="item" style="background: #f00;">item1</div>
        <div class="item" style="background: #0f0;">item2</div>
        <div class="item" style="background: #00f;">item3</div>
        <div class="item" style="background: #f00;">item4</div>
        <div class="item" style="background: #0f0;">item5</div>
        <div class="item" style="background: #00f;">item6</div>
        <div class="item" style="background: #f00;">item7</div>
        <div class="item" style="background: #0f0;">item8</div>
        <div class="item" style="background: #00f;">item9</div>
    </div>
</body>

在这里插入图片描述

5. flex-flow direction和wrap的复合属性

flex-direction和flex-wrap的组合缩写属性

flex : flex-direction || flex-wrap

通常情况设置为flex-flow:row wrap

6. align-content 决定行与行之间的排列方式

控制行与行之间的对齐方式，只用在多行显示。需要设置flex-wrap: wrap

stretch(默认)
flex-start
flex-center
flex-end
space-between
space-evently
space-around

<style>
.container{
    width: 500px;
    height: 400px;
    border: 1px solid #000;

    /* flex布局的排列方式 */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}
.item{
    width: 100px;
    height: 100px;
    color: #fff;
    text-align: center;
    line-height: 100px;
}
.container{
    /* 设置多行显示 */
    flex-wrap: wrap;
    align-content: stretch;
    align-content: flex-start;
    align-content: center;
    align-content: flex-end;
    align-content: space-between;
    align-content: space-evenly;
    align-content: space-around;
    
}

</style>

<body>
    <div class="container">
        <div class="item" style="background: #f00;">item1</div>
        <div class="item" style="background: #0f0;">item2</div>
        <div class="item" style="background: #00f;">item3</div>
        <div class="item" style="background: #f00;">item4</div>
        <div class="item" style="background: #0f0;">item5</div>
        <div class="item" style="background: #00f;">item6</div>
        <div class="item" style="background: #f00;">item7</div>
        <div class="item" style="background: #0f0;">item8</div>
        <div class="item" style="background: #00f;">item9</div>
       
    </div>
</body>

在这里插入图片描述

winfyho

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
flex布局(三) : 多行显示

flex布局(三) : 多行显示4. flex-wrap 决定items的换行控制item的多行显示nowrap(默认) ：单行显示，如果容器container宽度不够，则压缩item宽度适应wrap ：多行显示，每一行平分容器container高度wrap-reverse ：多行显示，交叉轴上对调顺序。大多数情况下不会使用这个属性<style>.container{...
复制链接

扫一扫