6Flex布局

最新推荐文章于 2023-05-12 20:24:23 发布

一束光亮

最新推荐文章于 2023-05-12 20:24:23 发布

阅读量138

点赞数

本文链接：https://blog.csdn.net/m0_52766105/article/details/127715864

版权

前端第一阶段：html5css3，移动端、网页布局专栏收录该内容

26 篇文章 0 订阅

订阅专栏

Flex布局

百分比布局（以前用的）

百分比布局也叫流式布局

效果：宽度自适应，高度固定

width: 100%;
height: 50px;

Float浮动布局

最初为了实现文字环绕
Float 布局会造成浮动的盒子脱标，不能撑开父级容器

Flex布局

Flex 布局: 弹性布局

浏览器提倡的布局模型
布局网页更简单，灵活
避免浮动脱标的问题
非常适合结构化布局

Flex 布局示例

.box {
  display: flex;
}

查看 web 技术浏览器兼容性：

https://caniuse.com/

Flex 布局组成部分

弹性容器：直接父级
弹性盒子：直接子级
主轴：默认 x 轴
侧轴/交叉轴：默认 y 轴

flex 容器下的元素默认水平排列：默认主轴在 x 轴，弹性盒子沿着主轴排列

主轴对齐方式justify-content

Flex 布局模型中，可以调节主轴或侧轴的对齐方式来设置盒子之间的间距

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性[盒子两侧]
space-between	弹性盒子沿主轴均匀排列，空白间距均分在相邻[盒子之间]
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间[间距相等]

示例:

<style>
    h3 {
        text-align: center;
    }

    .box-wrap {
        display: flex;
        margin: 0 auto;
        width: 500px;
        border: 1px solid #eee;
    }

    .box-wrap+.box-wrap {
        margin-top: 20px;
    }

    .box {
        width: 100px;
        height: 100px;
        font-size: 20px;
        line-height: 100px;
        text-align: center;
        background-color: skyblue;
    }

    /* 居中 */
    .box-center {
        justify-content: center;
    }

    /* 间距在盒子之间 */
    .box-between {
        justify-content: space-between;
    }

    /* 间距在子两侧，视觉效果：子级之间的距离是两头距离的 2 倍 */
    .box-around {
        justify-content: space-around;
    }

    /* 盒子和容器所有间距相等 */
    .box-evenly {
        justify-content: space-evenly;
    }
</style>

<h3>默认</h3>
<div class="box-wrap">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

<h3>justify-content: center;</h3>
<div class="box-wrap box-center">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

<h3>justify-content: space-between;</h3>
<div class="box-wrap box-between">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

<h3>justify-content: space-around;</h3>
<div class="box-wrap box-around">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>


<h3>justify-content: space-evenly;</h3>

<div class="box-wrap box-evenly">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

侧轴对齐方式align-items

容器属性 align-items 元素属性 align-self

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	重点开始依次排列
center	沿侧轴居中排列
stretch	默认值，弹性盒子沿着主轴线被拉伸至铺满容器

示例:

<!DOCTYPE html>
<html lang="en">

<body>
    <style>

        h3{
            text-align: center;
        }
        .box-wrap {
            width: 500px;
            margin: 0 auto;
            display: flex;
            height: 200px;
            border: 1px solid #666;
        }

        .box {
            width: 100px;
            background-color: skyblue;
        }

        .box-wrap-height .box {
            height: 100px;
        }

        /* 拉伸 */
        .stretch {
            align-items: stretch;
        }

        /* 顶对齐 */
        .flex-start {
            align-items: flex-start;
        }

        /* 底对齐 */
        .flex-end {
            align-items: flex-end;
        }

        /* 上下居中 */
        .center {
            align-items: center;
        }

        .child-center .box:nth-child(2){
            align-self: center;
        }
    </style>

    <h3>子元素没有设置高度，默认撑开和父级一样高</h3>
    <div class="box-wrap">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    
    <h3>子元素没有设置高度，默认：align-items: stretch;</h3>
    <div class="box-wrap stretch">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

    <h3>子元素设置高度，默认</h3>
    <div class="box-wrap box-wrap-height">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

    <h3>子元素设置高度，默认：align-items: flex-start;</h3>
    <div class="box-wrap box-wrap-height flex-start">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

    <h3>align-items: flex-end;</h3>
    <div class="box-wrap box-wrap-height flex-end">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

    <h3>align-items: center;</h3>
    <div class="box-wrap box-wrap-height center">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

    <h3>设置单独子元素 align-self: center</h3>
    <div class="box-wrap box-wrap-height child-center">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

</html>

伸缩比flex

语法

flex: 数值;

数值是子级平分父级剩余尺寸的份数

示例:

<!DOCTYPE html>
<html lang="en">

<body>
    <style>
        .box-wrap {
            width: 500px;
            margin: 0 auto;
            display: flex;
            height: 200px;
            border: 1px solid #666;
        }

        /* 固定尺寸 */
        .box-1 {
            width: 100px;
            background-color: skyblue;
        }
        
        /* 占 3/4 */
        .box-2 {
            flex: 3;
            background-color: yellow;
        }

        /* 占 1/4 */
        .box-3 {
            flex: 1;
            background-color: green;
        }
    </style>


    <div class="box-wrap">
        <div class="box box-1"></div>
        <div class="box box-2"></div>
        <div class="box box-3"></div>
    </div>

</body>

</html>

主轴方向flex-direction

修改主轴方向，实现改变元素排列方向

主轴默认是水平方向，侧轴默认是垂直方向

属性值	作用
row	默认值，行，水平
column	列，垂直
row-reverse	行，从右往左
column-reverse	列，从下到上

示例:

<!DOCTYPE html>
<html lang="en">

<body>
    <style>
        .box-wrap {
            margin: 0 auto;
            display: flex;

            /* 修改主轴方向为垂直方向 */
            /* 先确定主轴方向，再设置主轴或侧轴对齐 */
            flex-direction: column;
            
            /* 视觉效果：垂直居中 */
            justify-content: center;

            /* 视觉效果：水平居中 */
            align-items: center;

            width: 500px;
            height: 200px;
            border: 1px solid #666;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>


    <div class="box-wrap">
        <div class="box"></div>
    </div>

</body>

</html>

弹性盒子换行flex-wrap

实现多行排列效果

语法

flex-wrap: nowrap/wrap;

属性值	作用
nowrap	默认值，不换行
wrap	换行

行对齐方式align-content

取值和 justify-content 基本相同

示例:

<!DOCTYPE html>
<html lang="en">
    
<body>
    <style>
        .box-wrap {
            margin: 0 auto;
            display: flex;
            
            /* 换行显示 */
            flex-wrap: wrap;
            /* 行对齐方式 */
            align-content: space-between;

            width: 200px;
            height: 500px;
            border: 1px solid #666;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>


    <div class="box-wrap">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>

</body>

</html>

Flex溢出隐藏

示例:

<!DOCTYPE html>
<html lang="en">

<body>
    <style>
        .box-wrap {
            margin: 0 auto;
            display: flex;
            align-items: center;
            width: 500px;
        }

        .box-left {
            width: 200px;
            height: 100px;
            background-color: skyblue;
        }
         /* 重要点1：*/
         /* 溢出的时候显示省略号 */
         /* 因为弹性盒子的尺寸可以被内容撑开，
         不换行的文字可以撑开这个盒子的尺寸 */
         /* 给盒子一个为0的宽度，文字宽度就是盒子宽度
          但是溢出盒子就会被隐藏 */
        .box-right {
            flex: 1;
            
            width: 0;
            border: 1px solid #666;
        }

        .box-right__content {
            /* ellipsis:当对象内文本一处时显示省略标记(...)*/
            text-overflow: ellipsis;
            /* 文字不换行 */
            white-space: nowrap;
            /* 上面的width是给这里的hidden使用的 */
            overflow: hidden; 
        }
    </style>

    <div class="box-wrap">
        <div class="box-left"></div>
        <div class="box-right">
            <div class="box-right__title">长恨歌 白居易 〔唐代〕</div>
            <div class="box-right__content">天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。</div>
        </div>
    </div>
</body>

</html>
(...)*/
            text-overflow: ellipsis;
            /* 文字不换行 */
            white-space: nowrap;
            /* 上面的width是给这里的hidden使用的 */
            overflow: hidden; 
        }
    </style>

    <div class="box-wrap">
        <div class="box-left"></div>
        <div class="box-right">
            <div class="box-right__title">长恨歌 白居易 〔唐代〕</div>
            <div class="box-right__content">天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。</div>
        </div>
    </div>
</body>

</html>