06_Flex 布局

最新推荐文章于 2024-09-19 11:57:55 发布
最新推荐文章于 2024-09-19 11:57:55 发布
阅读量375 收藏
点赞数
分类专栏： 前端 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65601072/article/details/127332207
版权

百分比布局

百分比布局也叫流式布局

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

Float 浮动布局

Flex 布局

Flex 布局: 弹性布局

Flex 布局示例

查看 web 技术浏览器兼容性

Flex 布局组成部分

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

语法

注意：占用父级剩余尺寸的份数

示例:

<!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>

移动端触发区域默认大小 44x44

主轴方向 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

实现多行排列效果

语法

属性值

作用

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;
        }

        /* 注意父级需要增加的属性 */
        /* 溢出显示省略号 */
        /* 弹性盒子的尺寸可以被内容撑开*/
        .box-right {
            flex: 1;
            width: 0;
            border: 1px solid #666;
        }

        .box-right__content {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    </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>

利用flex布局实现六个骰子
Roronna_Zoro的博客
01-24 1609
一、初步布局 1、我们先设立一个外部盒子用flex布局将子代居中 .father { display: flex; margin: 200px auto; border-top: 2px solid #828384; width: 1200px; height: 300px; justify-content: space-around; } 再使用亲代选择器设置骰子盒子css .father>di
css flex 多宫格布局
weixin_43978604的博客
05-30 3048
带1px边框 的多宫格布局 效果图 html 结构 <div class='wrapper'> <div class='item'> 1</div> ... </div> css 样式 .wrapper{ display:flex; flex-wrap: wrap; } .item{ width:25%;...
前端页面布局之【Flex布局】详解
weixin_34746715的博客
08-17 246
目录????前言????浏览器支持????Flex简介????Flex基本概念????容器属性????项目排列方向????项目包裹方式????项目水平对齐方式????项目的垂直对齐方式????多行对齐方式????项目的属性????项目的顺序????项目占比(放大)????项目占比(缩小)????项目所占空间大小????项目自己的对齐方式????案例????推荐????写在最后 ????前言布局的传统解决方案，基于盒状模型，依赖 displ...
Flex布局
这个昵称没有被占用吧的博客
09-29 382
一、Flex布局是什么？Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局，指定方式如：.box { display:flex; }行内元素也可以使用Flex布局：.box { display:inline-flex; }webkit内核的浏览器，必须加上-webkit前缀：.box { displ
Flex Box页面布局实战课程-九宫格布局-六个项目的布局
杭州.黄老师
04-09 538
效果图 代码 &amp;lt;!DOCTYPE&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&amp;gt; &amp;lt;title&amp;gt;
flex九宫格布局
记录本人工作中遇到的问题、经验总结以及分享。
06-14 724
css
基本布局_flex基本布局模板_flex_
09-30
在前端开发中，Flex布局（Flexible Box）是一种强大的盒模型布局方式，允许开发者轻松地创建响应式和动态的用户界面。这个"基本布局_flex基本布局模板_flex_"项目旨在介绍和提供一个基础的Flex布局模板，帮助开发者...
15_flex布局常见问题.html
最新发布
10-09
15_flex布局常见问题
dh.rar_flex cool me_flex menu skin_flex 导航_flex4 menu_flex4 menu
09-23
至于"CircularDataViewerSource"这个文件名，它可能是Flex4中一个特殊的数据展示组件，用于以圆形布局显示数据。这类组件常用于数据可视化，例如在仪表盘应用中，它可以以环形图的形式展示数据，既美观又直观。 ...
FLEX_List).rar_flex_flex list_flex li_flex lis_flex list
09-21
在标签中，我们看到`flex_li`和`flex_lis`可能指的是列表项（list item）的样式和布局。Flex允许通过CSS样式来定制列表项的外观，包括字体、颜色、背景、边框等。同时，`flex_list`可能表示对整个列表组件的样式调整...
flex3-cn-api..zip_flex_flex 3 api_flex3 api_flex3 a_flex3 api
09-24
6. **States和Layouts**: 状态管理和布局管理是Flex 3的重要特性，可以方便地切换UI状态，以及调整组件的排列方式，适应不同的应用场景。 7. **动画和效果**: Flex 3提供了Animate、Fade、Slide等动画效果，可以...
九宫格布局 - Flex （有手就会系列）
QtumOne的博客
09-19 255
使用 flex，仅需 4 行 css 轻松实现九宫格布局。
css3中flex布局教程：语法篇
yeana1的博客
09-22 705
网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能
flex布局
Belle_Daisy的博客
02-23 1945
flex布局
关于flex布局和九宫格布局的实现
qq_44718039的博客
12-08 1168
flex布局和九宫格和另外一些常见布局
【CSS】简记问题：flex多宫格布局，最后一排元素差异时向左对齐
东小记的博客
09-16 449
解决flex多宫格布局，最后一排元素差异时向左对齐；
css基础精华---Flex 布局教程：实例篇
翟浩浩Android专栏
08-23 2353
转载地址：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。 你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Sch
css3 flex布局九宫格,CSS3 flex布局之快速实现BorderLayout布局
weixin_35683330的博客
08-04 251
学习完flex的布局模式之后,我们趁热打铁,来实现一个BoxLayout布局.什么是BoxLayout布局?那我们先上一个图看看BoxLayout布局写过后端UI代码的编程者应该不陌生了,写前端的代码的也同样很熟悉,包括html的框架frame.但以往的CSS中使用float浮动来进行控制,控制起来相对来说是复杂一些,也需要加入更多的标签和代码.看完这个界面,我们就可以着手写出标签的代码布局:.....
void lv_obj_set_flex_grow(lv_obj_t * obj, uint8_t grow); void lv_style_set_flex_flow(lv_style_t * style, lv_flex_flow_t value); void lv_style_set_flex_main_place(lv_style_t * style, lv_flex_align_t value); void lv_style_set_flex_cross_place(lv_style_t * style, lv_flex_align_t value); void lv_style_set_flex_track_place(lv_style_t * style, lv_flex_align_t value); void lv_style_set_flex_grow(lv_style_t * style, uint8_t value); void lv_obj_set_style_flex_flow(lv_obj_t * obj, lv_flex_flow_t value, lv_style_selector_t selector); void lv_obj_set_style_flex_main_place(lv_obj_t * obj, lv_flex_align_t value, lv_style_selector_t selector); void lv_obj_set_style_flex_cross_place(lv_obj_t * obj, lv_flex_align_t value, lv_style_selector_t selector); void lv_obj_set_style_flex_track_place(lv_obj_t * obj, lv_flex_align_t value, lv_style_selector_t selector); void lv_obj_set_style_flex_grow(lv_obj_t * obj, uint8_t value, lv_style_selector_t selector);
06-11
这些函数都是用于设置 LVGL 中的 Flexbox 布局相关的属性。 - `void lv_obj_set_flex_grow(lv_obj_t * obj, uint8_t grow);` 用于设置一个对象在 Flexbox 布局中的 grow 属性值，即当有多余的空间时，该对象能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值