移动端flex布局与多列布局_flexbox多列布局-CSDN博客

本文链接：https://blog.csdn.net/qq_45867247/article/details/128191727

文章目录

flex 布局

认识flex布局

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局。
采用Flex布局的元素，称为flex容器container。
它的所有子元素自动成为容器成员，称为flex项目item。

当我们为盒子设为flex布局以后，子元素的float、clear和vertical-align 属性将失效。

flex布局（其他叫法：伸缩布局、弹性布局、伸缩盒布局、弹性盒布局）

给一个元素设置了display: flex/inline-flex（块级元素/行内元素转为弹性盒子），那么这个元素就变成了弹性容器，这个元素的儿子们就变成了弹性项目，不会影响到孙子（但可以嵌套使用）

总结：flex布局原理就是：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。（父盒子：弹性容器，子元素：弹性项目）

flex 布局父项常见的属性

属性	描述
flex-direction	设置主轴的方向(默认x轴或叫行、row)
flex-wrap	设置子元素是否换行（默认不换行）
flex-flow	复合属性，相当于同时设置了flex-direction和flex-wrap
justify-content	设置主轴上的子元素排列方式
align-content	设置侧轴上的子元素的排列方式（多行）
align-items	设置侧轴上的子元素排列方式（单行）

flex-direction 属性

决定主轴的方向(即项目的排列方向)

row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端

以下两个了解就行：

column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿

如下图：

请添加图片描述

flex-wrap 属性（重要）

弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行

默认不换行，子元素宽度超过父元素宽度时，自动压缩子元素宽度

属性值	描述
nowrap	不换行（默认）
wrap	换行
wrap-reverse	换行，第一行在下方

flex-flow 属性

复合属性，相当于同时设置了flex-direction和flex-wrap

flex-flow:row wrap;

justify-content 属性

定义了项目在主轴上的对齐方式

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

flex-start：默认，顶端对齐（从头部开始，如果主轴是x轴，则从左到右）
flex-end：末端对齐
center：居中对齐
space-between：两端对齐，中间自动分配（先两边贴边，在平分剩余空间）（重要）
space-around：自动分配距离（平均分配剩余空间）

效果图：

请添加图片描述

align-content 属性

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

属性值	描述
flex-start	没有行间距
flex-end	底对齐没有行间距
center	居中没有行间距
space-between	两端对齐，中间自动分配
space-around	自动分配距离
stretch	设置子项元素高度平分父元素高度（默认值）

请添加图片描述

align-items 属性

定义项目在交叉轴上如何对齐

属性值	描述
flex-start	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center	弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline	如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch	拉伸（默认值）

flex 布局子项常见属性

属性	描述
align-self	控制子项自己在侧轴的排列方式
flex-grow	控制某一个弹性项目如何增长
flex-shrink	控制某一个弹性项目如何收缩
flex-basis	元素在主轴的基准值（尺寸）
flex	子项目占的份数
order	定义子项的配列顺序（前后顺序）

align-self 属性

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

注意：align-self 属性可重写灵活容器的 align-items 属性

属性值	描述
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
Stretch	元素被拉伸以适应容器。
Center	元素位于容器的中心。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的结尾。
baseline	项目内部文本基线对齐

效果图：

请添加图片描述

flex-grow 属性

如果主轴方向空间盈余，控制每个项目如何变大父元素的盈余的尺寸，项目按照取值的占比，各自增长各自的尺寸。

flex-grow: 默认值（0）

不分配空间不扩展

支持：数值（1 2 3 4 …）

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）

请添加图片描述

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

请添加图片描述

弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效

flex-shrink 属性

如果主轴方向空间不足，控制每个项目如何变小父元素收缩的尺寸，项目按照取值的占地，自动分配各自收缩的尺寸

flex-shrink:

1 默认值收缩
0 不收缩

支持：数值 1 2 3 4 …

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小

请添加图片描述

在容器宽度有剩余时，flex-shrink也是不会生效的

flex-basis 属性

设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸

浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目的本来大小，如设置了width则元素尺寸由width/height决定（主轴方向），没有设置则由内容决定

支持：

auto 默认
数值
百分比

当设置为0的是，会根据内容撑开

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

flex 属性

flex: 增长收缩尺寸;

注：顺序不能换

flex: 1：平分空间
flex: auto 等比例缩放

order 属性

说明：

number排序优先级，数字越大越往后排，默认为0，支持负数。

flex 布局的应用场景

实现元素水平垂直方向的居中
两栏三栏自适应布局中

案例1 — 骰子

<style>
    .box {
        width: 400px;
        height: 120px;
        border-radius: 10px;
        border: 1px solid #000;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .box div {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background-color: rgb(231, 231, 231);
    }
    .box .left {
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 5px 0px 1px 5px rgb(215, 215, 215);
    }
    .box .left div {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #000;
        box-shadow: 0px 1px 2px 2px rgb(105, 104, 104);
    }
    .box .center {
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        box-shadow: 5px 0px 1px 5px rgb(215, 215, 215);
    }
    .box .center div {
        border-radius: 50%;
        width: 30px;
        height: 30px;
        background-color: #000;
        /* 添加阴影 */
        box-shadow: 0px 1px 2px 2px rgb(105, 104, 104);
    }
    .box .center div:nth-child(2) {
        align-self: flex-end;
    }
    .box .right {
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        /* 添加阴影 */
        box-shadow: 5px 0px 1px 5px rgb(215, 215, 215);
    }
    .box .right div {
        border-radius: 50%;
        width: 30px;
        height: 30px;
        background-color: #000;
        /* 添加阴影 */
        box-shadow: 0px 1px 2px 2px rgb(105, 104, 104);
    }
    .box .right div:nth-child(2) {
        align-self: center;
    }
    .box .right div:nth-child(3) {
        align-self: flex-end;
    }
</style>
<!-- 分割线 -->
<body>
    <div class="box">
        <div class="left">
            <div></div>
        </div>
        <div class="center">
            <div></div>
            <div></div>
        </div>
        <div class="right">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>

效果图 ：

请添加图片描述

案例2

<style>
    * {
        padding: 0;
        margin: 0;
    }
    .box {
        margin: 40px;
        width: 800px;
        height: 600px;
        background-color: red;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
    }
    .box div:nth-child(1) {
        flex: 0 0 64%;
        height: 64%;
        background-color: pink;
    }
    .box div:nth-child(2) {
        flex: 0 0 34%;
        height: 64%;
        background-color: pink;
    }
    .box div:nth-child(3) {
        flex: 0 0 38%;
        height: 34%;
        background-color: pink;
    }
    .box div:nth-child(4) {
        flex: 0 0 19%;
        height: 34%;
        background-color: pink;
    }
    .box div:nth-child(5) {
        flex: 0 0 19%;
        height: 34%;
        background-color: pink;
    }
    .box div:nth-child(6) {
        flex: 0 0 19%;
        height: 34%;
        background-color: pink;
    }
</style>
<!-- 分割线 -->
<body>
    <div class="box">
        <div>top1</div>
        <div>top2</div>
        <div>bottom1</div>
        <div>bottom2</div>
        <div>bottom3</div>
        <div>bottom4</div>
    </div>
</body>

效果图 ：

请添加图片描述

CSS3 多列属性布局

CSS 多列布局（CSS Multi-column Layout）是一种定义了多栏布局的模块，可支持在布局中建立列（column）的数量，以及内容如何在列之间流动（flow）、列之间的间距（gap）大小，以及列的分隔线（column rules）。

实现报纸文章布局效果

多列属性	描述
column-count	分为的列数
column-width	每列的宽度
column-gap	列与列之间的间距
column-rule	列与列之间的分割线（语法与border一致）
column-fill	列的高度是否统一
column-span	是否恒跨所有的列

column-fill 属性

列的高度是否统一

默认 balance ：以最高一列统一
auto：自适应

break-inside: aviod 属性

防止元素被打破

实例（使用多列属性）帮助理解

<style>
    div {
        width: 800px;
        height: 500px;
        background-color: #ccc;
        column-count: 4;
        column-gap: 20px;
        column-rule: 1px solid blue;
        column-fill: auto;
    }
    h1{
        column-span: all;
        text-align: center;
    }
</style>
<!-- 分割线 -->
<body>
    <div>
        <h1>lorem*6</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
            eligendi earum id iure, consectetur harum! Dolorem nemo eveniet
            expedita, architecto quas illum sed mollitia nobis incidunt consequatur
            quae id quisquam. Lorem ipsum dolor sit amet consectetur adipisicing
            elit. Eveniet libero quia inventore atque temporibus asperiores placeat
            fugit voluptas fuga reprehenderit perspiciatis, cupiditate molestias aut
            vel natus quod eaque tempora laboriosam! Lorem ipsum dolor sit, amet
            consectetur adipisicing elit. Sapiente quod numquam libero doloribus!
            Corrupti delectus beatae quibusdam earum id ad, pariatur ullam numquam
            aspernatur magni rem nisi doloribus suscipit fugit! Ratione ex quas
            nihil aperiam assumenda vitae incidunt fugit delectus sed labore debitis
            illo, fuga omnis dignissimos ut mollitia quae veritatis non consectetur
            optio. Eos ipsa dolorem explicabo vero natus? Nostrum beatae saepe ad
            rerum necessitatibus vero quibusdam possimus quidem eligendi dolore
            voluptatibus omnis magni error excepturi nisi quas esse commodi adipisci
            perferendis, consequatur fuga, laudantium id illo molestiae. Magni. Quia
            omnis voluptatem recusandae qui, facere repellendus magni reprehenderit
            excepturi quaerat sint quod soluta, fuga nihil quae nulla similique
            doloremque. Dolorem soluta animi provident pariatur. Ex error
            praesentium nam adipisci!
        </p>
    </div>
</body>