CSS：布局——伸缩布局flex

最新推荐文章于 2023-05-23 10:02:13 发布
最新推荐文章于 2023-05-23 10:02:13 发布
阅读量555 收藏 3
点赞数 1
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KaiSarH/article/details/103573773
版权

1. Flex布局

两个属性
① display : inline-flex 将对象作为弹性伸缩盒展示,用于行内元素
② display : flex 将对象作为弹性伸缩盒展示,用于块级元素

2. 常用属性

  1. flex-direction : 用于指定Flex主轴的方向,继而决定Flex子项在Flex容器中的位置
    取值 : row | row-reverse | column | column-reverse
    row : 默认值,表示水平方向从左到右排列,此时水平方向轴线为主轴
    row-reverse : 与row相反
    column : 表示垂直方向从上到下排列,此时垂直方向轴线为主轴
    column-reverse : 与column相反

  2. justify-content : 用于指定主轴(水平方向)上Flex子项的对齐方式
    取值 : flex-start | flex-end | center | space-between | space-around
    flex-start : 默认值,表示与行的起始位置对齐
    flex-end : 表示与行的结束位置对齐
    center : 表示与行中间对齐
    space-between : 表示两端对齐,中间间距相等.要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于flex-start
    space-around : 表示间距相等,中间间距是两端间距的2倍.要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于center.

  3. align-items : 用来指定侧轴(垂直方向)上Flex子项的对齐方式
    取值 : stretch | flex-start | flex-end | center | baseline
    stretch : 默认值,当Flex子项未设置高度或者高度值为auto时,stretch起作用,将Flex子项高度设置为行高度.这里需要注意一下,在只有一行的情况下,行的高度为容器的高度,即Flex子项高度为容器的高度
    flex-start : 表示与侧轴的开始位置对齐
    flex-end : 表示与侧轴的结束位置对齐
    center : 表示与侧轴中间对齐
    baseline : 表示基线对齐,当行内轴与侧轴在同一线上,即所有Flex子项的基线在同一线上,效果等同于flex-start

  4. flex-wrap : 用来指定Flex子项是否换行
    取值 : nowrap | wrap | wrap-reverse
    nowrap : 默认值,表示不换行,Flex子项可能会溢出
    wrap : 表示换行,溢出的Flex子项会被放到下一行
    wrap-reverse : 表示反向换行

  5. align-self : 该属性用于单独指定某Flex子项的对齐方式
    取值 : auto | flex-start | flex-end | center | baseline | stretch

  6. align-content : 该属性只用于多行的情况下,用于多行的对齐方式
    取值 : stretch | flex-start | flex-end | center | space-between | space-around
    stretch : 默认值,当Flex子项未设置高度或者高度值为auto时,stretch起作用,将Flex子项高度设置为行高度
    flex-start : 表示各行与侧轴开始位置对齐,第一行紧靠侧轴开始边界,之后的每一行都紧靠前面一行
    flex-end : 表示各行与侧轴的结束位置对齐,最后一行紧靠侧轴结束边界,之后的每一行都紧靠前面一行
    center : 表示各行与侧轴中间对齐
    space-between :表示两端对齐,中间间距相等.要注意特殊情况,当剩余空间为负数时,效果等同于flex-start
    space-around : 表示各行之间间距相等,中间间距是两端间距的2倍.要注意特殊情况,当剩余空间为负数时,效果等同于center

3. 复合属性

复合属性flex,是flex-grow、flex-shrink和flex-basis的简写属性,用于指定Flex子项如何分配空间

flex-grow : 默认值为0,若省略则被默认为1
flex-shrink : 默认值为1,省略时默认为1
flex-basis : 默认值为auto,省略是默认为0%

4. 案例 : 手机端百度界面设计

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        html{
            font-size: 10px;
        }

        body{
            font-size: 1.6rem;
            background-color: #e8e8e8;
        }

        .bd-layout{
            width: 100%;
            height: 100%;
            /*background-color: red;*/
        }

        .bd-header{
            width: 100%;
            height: 4rem;
            background-color: #fff;
            border-bottom: 0.1rem solid #CCCCCC;

            /*伸缩布局*/
            display: flex;
            /*主轴两端对齐*/
            justify-content: space-around;
            align-items: center;

            position: fixed;
            left: 0;
            top: 0;
        }

        .bd-header span{
            /*background-color: skyblue;*/
            padding: 3px;
        }

        .bd-header span.current{
            color: deepskyblue;
        }

        .bd-content{
            margin-top: 5rem;
        }

        .bd-content .cell1{
            background-color: #fff;
            padding: 0.5rem;
            border-bottom: 1px solid #e8e8e8;
        }

        .cell1-center{
            /*伸缩布局*/
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .cell1-center div{
            /*background-color: red;*/
            /*height: 6rem;*/
            flex: 1;
            padding: 0.5rem;
        }

        .cell1-center div img{
            width: 100%;
        }

        .cell2{
            background-color: #fff;
            padding: 0.5rem;
            border-bottom: 1px solid #e8e8e8;

            display: flex;
        }

        .cell2-left{
            flex: 2;
            background-color: red;
        }

        .cell2-left img{
            width: 100%;
            height: 100%;
        }

        .cell2-right{
            flex: 4;
            /*background-color: green;*/

            display: flex;
            flex-direction: column;
            margin-left: 1rem;
        }

        .cell2-right p:first-child{
            flex: 1;
            height: 2rem;
            line-height: 2.5rem;
            overflow: hidden;
            /*background-color: red;*/
        }
    </style>
</head>
<body>
    <div class="bd-layout">
        <!--头部-->
        <div class="bd-header">
            <span class="current">推荐</span>
            <span>热点</span>
            <span>视频</span>
            <span>娱乐</span>
            <span>军事</span>
        </div>
        <!--内容-->
        <div class="bd-content">
            <div class="cell1">
                <div class="cell1-top">这两部吓死过人的鬼片你敢看吗</div>
                <div class="cell1-center">
                    <div><img src="imgs/img1.jpg" alt=""></div>
                    <div><img src="imgs/img2.jpg" alt=""></div>
                    <div><img src="imgs/img3.jpg" alt=""></div>
                </div>
                <div class="cell1-bottom">
                    <span>小谈食刻</span>
                    <span>11-21</span>
                </div>
            </div>
            <div class="cell2">
                <div class="cell2-left">
                    <img src="imgs/img4.jpg" alt="">
                </div>
                <div class="cell2-right">
                    <p>环球时报：基因编辑婴儿事件 国家应全面调查环球时报：基因编辑婴儿事件 国家应全面调查</p>
                    <p>
                        <span>环球网</span>
                        <span>11-26</span>
                    </p>
                </div>
            </div>
            <div class="cell1">
                <div class="cell1-top">这两部吓死过人的鬼片你敢看吗</div>
                <div class="cell1-center">
                    <div><img src="imgs/img1.jpg" alt=""></div>
                    <div><img src="imgs/img2.jpg" alt=""></div>
                    <div><img src="imgs/img3.jpg" alt=""></div>
                </div>
                <div class="cell1-bottom">
                    <span>小谈食刻</span>
                    <span>11-21</span>
                </div>
            </div>
            <div class="cell2">
                <div class="cell2-left">
                    <img src="imgs/img4.jpg" alt="">
                </div>
                <div class="cell2-right">
                    <p>环球时报：基因编辑婴儿事件 国家应全面调查环球时报：基因编辑婴儿事件 国家应全面调查</p>
                    <p>
                        <span>环球网</span>
                        <span>11-26</span>
                    </p>
                </div>
            </div>
            <div class="cell1">
                <div class="cell1-top">这两部吓死过人的鬼片你敢看吗</div>
                <div class="cell1-center">
                    <div><img src="imgs/img1.jpg" alt=""></div>
                    <div><img src="imgs/img2.jpg" alt=""></div>
                    <div><img src="imgs/img3.jpg" alt=""></div>
                </div>
                <div class="cell1-bottom">
                    <span>小谈食刻</span>
                    <span>11-21</span>
                </div>
            </div>
            <div class="cell2">
                <div class="cell2-left">
                    <img src="imgs/img4.jpg" alt="">
                </div>
                <div class="cell2-right">
                    <p>环球时报：基因编辑婴儿事件 国家应全面调查环球时报：基因编辑婴儿事件 国家应全面调查</p>
                    <p>
                        <span>环球网</span>
                        <span>11-26</span>
                    </p>
                </div>
            </div>
            <div class="cell1">
                <div class="cell1-top">这两部吓死过人的鬼片你敢看吗</div>
                <div class="cell1-center">
                    <div><img src="imgs/img1.jpg" alt=""></div>
                    <div><img src="imgs/img2.jpg" alt=""></div>
                    <div><img src="imgs/img3.jpg" alt=""></div>
                </div>
                <div class="cell1-bottom">
                    <span>小谈食刻</span>
                    <span>11-21</span>
                </div>
            </div>
            <div class="cell2">
                <div class="cell2-left">
                    <img src="imgs/img4.jpg" alt="">
                </div>
                <div class="cell2-right">
                    <p>环球时报：基因编辑婴儿事件 国家应全面调查环球时报：基因编辑婴儿事件 国家应全面调查</p>
                    <p>
                        <span>环球网</span>
                        <span>11-26</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

运行后效果:
在这里插入图片描述

KaiSarH
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Flex伸缩布局
菜鸟小铭的博客
06-04 1519
Flex伸缩布局 flexible Box的缩写，意为弹性布局 Flex 布局原理 当父元素设置为 flex 布局之后子元素的 float clear 和 vertical-align 属性都将失效 采取 Flex 布局的元素我们称为 Flex容器 Flex容器的子元素称为容器成员，简称项目 通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式 Flex 可以使行内元素可以设置高度和宽度 Flex 布局父项常用属性 给父元素添加 flex 属性 div {
flex布局
dyk
02-03 472
flex布局传统布局与flex布局传统布局flex 弹性布局flex布局原理flex布局父项常见属性flex-direction主轴与侧轴flex-direction 的属性值justify-contentjustify-content 属性值flex-wrapalign-itemsalign-items 属性值align-contentalign-content 属性值align-content 和 align-items 区别flex-flowflex布局子项常见属性flex 属性align-selfo
flex 伸缩布局
Lily-HU
09-07 228
1、设置伸缩布局 display: flex; 2、设置固定宽度 flex-basis flex-basis: 值; 3、弹性盒子实现多行排列 flex-wrap flex-wrap : nowrap; // nowrap 默认不换行 // wrap 换行 4、设置水平方向对齐方式 justify-content justify-co...
flex 伸缩布局
weixin_44684357的博客
11-18 288
Flex是Flexible Box的缩写，意为”弹性布局”，任何一个容器都可以指定为flex布局； 为什么要有弹性布局？？？ 答：在将某三个盒子排布在一行不用flex，width设置为%值，盒子之间的用margin进行间隔时缩放浏览器会出现元素溢出的情况；如果这个时候设置display：flex；无论元素怎么margin都不会溢出都在父盒子里面等比例缩放； 其中可以设置缩放的最小值 min-width，最大值max-width 其主要包含六个属性： flex-direction flex-wrap flex
详解CSS3伸缩布局盒模型Flex布局
12-09
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局（Flexible Box）模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。 CSS3引入...
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
在CSS布局设计中，三栏布局是一种常见的网页结构，它通常包括左、中、右三部分，其中两侧的栏宽可变，而中间的栏宽固定。本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾...
CSS3的Flexible Boxes详细使用教程
12-13
Flexible意为可伸缩的，Box意为盒子，可以理解为一种新式的盒模型——伸缩盒模型。由CSS3规范提出，这是在原有的大家非常熟悉的block, inline-block, inline的基础上延伸出的新一代布局模式。浏览器兼容性 作为非常...
源代码：网站制作FlexLayout布局.rar
09-24
FlexLayout布局是现代网页设计中常用的一种布局方式，它基于CSS3中的 Flexible Box 模块，简称 Flexbox。这种布局模式极大地提高了网页设计的灵活性，能够轻松处理元素的对齐、排列以及尺寸调整，尤其在响应式设计和...
深入剖析CSS弹性盒模型flex
09-24
在引入弹性盒模型前，CSS布局主要依赖于盒模型、浮动和定位等机制。这些方法虽然功能强大，但在某些复杂的布局场景中，会显得十分笨拙。为了解决这些问题，W3C提出了弹性盒模型，它可以更智能地调整内部元素的尺寸、...
前端移动Web第二天：Flex伸缩布局-携程首页案例.zip
04-16
携程首页源代码
flex(伸缩)布局：
最新发布
xcgljgq的博客
05-23 156
flex-start（左对齐） flex-end（右对齐） center（居中对齐） baseline （项目的第一行文字的基线对齐） stretch（默认值，若未设置高度或高度为auto，将占满整个容器的高度）flex-start（与交叉轴的起点对齐） flex-end（与交叉轴的终点对齐） center（与交叉轴的中点对齐） space-between（与交叉轴两端对齐，轴线之间的间隔平均分布）表示项目的缩小比例，默认为1，表示如果空间不足则所有项目同比缩小，若设置为0，则空间不足时该项目也不缩小。
伸缩布局flex
高高的博客
07-18 1203
网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很
Flex伸缩布局，带你走进简洁的代码，一种新的体验
txq231254的博客
01-22 788
前言 简单来讲flex伸缩布局是咱们移动端布局比较经常使用的一种方式，移动端布局还有流式布局，less+rem+媒体查询布局这些都是单独制做移动端页面的一些布局方式。布局 这里主要介绍一下flex伸缩布局，由于它有不少优势，好比操做方便，布局很是简单，在移动端运用很普遍。 一、移动端基础 移动端浏览器我们主要对webkit内核进行兼容我们现在开发的移动端主要针对手机端开发 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一学会用谷歌浏览器模拟手机界面以及调试 1、视口 视口( viewpor..
flexbox——css伸缩布局
初夏的博客
03-05 258
1术语伸缩容器：设有“display：flex”或“display：inline-flex”的元素伸缩项目：伸缩容器的子元素主轴：沿着主轴伸缩项目主轴长度：伸缩项目在主轴方向的宽度或者高度就是株洲长度，其属性是width或者height；侧周长度则是另一个；测轴：垂直于主轴2开始使用flex指定元素为flex之后，用flex-row属性决定子元素是在一行还是在一列显示，可以定义关键词“wrap”指...
CSS3弹性伸缩布局——flex布局
vaelcy的博客
10-20 592
flex伸缩布局~ html代码： 发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给 发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给 发生过的空间还是看
伸缩布局
何良语的博客
03-21 387
将父盒子设置为display：flex（块级元素），display：inline-flex（内联元素）弹性盒子有六个属性：1.flex-drection：row | row-reverse | clomun | clomun-reverse（决定主轴的方向，也就是x轴方向项目的排列方式）2.felx-wrap：nowrap | wrap | wrap-reserve （决定多余的项目是否换行&lt...
014 flex伸缩布局
的博客
04-13 130
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex</title> <style> /*flex:1、默认方向 从左到右（主轴） 2、从上到下（侧轴）*/ section{ width: 80%;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

KaiSarH

如果觉得文章不错，可以支持下~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值