【css】Flex布局

最新推荐文章于 2024-03-07 23:10:59 发布
最新推荐文章于 2024-03-07 23:10:59 发布
阅读量738 收藏 1
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/107914072
版权

文章目录


本文档完全参考阮一峰大神的 Flex布局教程，详细记录以备忘。

  • Flex容器
    display:flex|inline-flex
  • Flex项
    Flex容器内的子元素
  • 主轴/交叉轴
    Flex项总是沿主轴排列。
    默认水平轴为主轴，主轴起点在左端；垂直轴为交叉轴，交叉轴的起点在上端。
    即flex-direction默认值是row。
容器属性
flex-direction

flex-direction:row | row-reverse | column | column-reverse

<body>
    <div class="container flexbox">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>

.container{
    width:100px;
    height:100px;
    background-color:lightgoldenrodyellow;
}
.box{
    width:20px;
    height:20px;
    border:5px solid transparent;
    background-clip:padding-box;
    background-color:lightskyblue;
    text-align:center;
}

.flexbox{
    display:flex;
    flex-direction:row;
    flex-direction:row-reverse;
    flex-direction: column;
    flex-direction: column-reverse;
}

在这里插入图片描述
在这里插入图片描述

flex-wrap

Flex项总是沿主轴排列，如果主轴排不下，要不要换行，flex-wrap对此作决定。
flex-wrap的默认值是nowrap ，意思是，即使一行排不下所有的Flex项，也不换行。
flex-wrap：nowrap | wrap | wrap-reverse

    <div class="container flexbox">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
    </div>

在这里插入图片描述

justify-content

justify-content 决定了浏览器如何分配主轴的剩余空间，也因此确定了Flex项在主轴上的对齐方式。
justify-content:flex-start | flex-end | center | space-between | space-around | space-evenly

</head>
<body>
    <div class="container flexbox">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <!-- <div class="box">4</div> -->
    </div>
</body>

在这里插入图片描述

align-items

align-items决定了Flex项在交叉轴上的对齐方式。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

align-content

对单行(flex-wrap:nowrap)无效，仅对多行有效，即flex-wrap:wrap
align-content 决定了 多行情况下浏览器如何分配交叉轴上的剩余空间。

<body>
    <div class="container flexbox">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
    </div>
</body>

.container{
    width:100px;
    height:200px;
    background-color:lightgoldenrodyellow;
}
.box{
    width:20px;
    height:20px;
    border:5px solid transparent;
    background-clip:padding-box;
    background-color:lightskyblue;
    text-align:center;
}
.flexbox{
    display:flex;
    flex-wrap: wrap;
    align-items:flex-start;
    /* align-items:flex-end;
    align-items:center;
    align-items:space-between;
    align-items:space-around;
    align-items:space-evenly; */
}

在这里插入图片描述

flex-flow

flex-flow:flex-direction flex-wrap

项目属性
order

决定了Flex项的排列顺序，默认值是0，值越小越往前排。
在这里插入图片描述
在这里插入图片描述

flex-grow

如果Flex容器有剩余空间，flex-grow决定了Flex项能够分配得到多少剩余空间。
flex-grow的默认值是0，这意味着，即使有剩余空间，该Flex项目也不会参与分配。
看例子吧。
例1：第一个.item的flex-grow设置为3，第二个.item的flex-grow设置为1，第三个.item的flex-grow取默认值0。

<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

.container{
    width: 400px;
    display: flex;
}
.item{
    height: 100px;
}
.item:nth-of-type(1){
    width: 80px;
    background-color: lightgoldenrodyellow;
    flex-grow: 3;
}
.item:nth-of-type(2){
    width: 120px;
    background-color: lightskyblue;
    flex-grow: 1;
}
.item:nth-of-type(3){
    width: 140px;
    background-color: lightgrey;
}
  • 总扩展空间
    400px-(80px+120px+140px)=60px
  • 总权重
    3+1+0=4
  • 单项的权重
    第一个项目的权重是3;
    第二个项目的权重是1；
    第三个项目的权重是0。
  • 单项的扩展空间
    第一项的扩展空间是60px*3/4=45px;
    第二项的扩展空间是60px*1/4=15px;
    第三项的扩展空间是60px*0/4=0px。
  • 单项的最终宽度
    第一项的最终宽度是80px+45px=125px；
    第二项的最终宽度是120px+15px=135px;
    第三项的最终宽度是140px+0px=140px。
    在这里插入图片描述

例2：第一个.item的flex-grow设置为0.1，第二个.item的flex-grow设置为0.2，第三个.item的flex-grow设置为0.2。

  • 总扩展空间
    400px-(80px+120px+140px)=60px
  • 总权重
    0.1+0.2+0.2=0.5
    所有.item的flex-grow加起来等于0.1+0.2+0.2=0.5，小于1，这时总权重就不是0.5，而是1
  • 单项的权重
    第一个项目的权重是0.1;
    第二个项目的权重是0.2；
    第三个项目的权重是0.2。
  • 单项的扩展空间
    第一项的扩展空间是60px*0.1/1=6px;
    第二项的扩展空间是60px*0.2/1=12px;
    第三项的扩展空间是60px*0.2/1=12px。
  • 单项的最终宽度
    第一项的最终宽度是80px+6px=86px；
    第二项的最终宽度是120px+12px=132px;
    第三项的最终宽度是140px+12px=152px。
    在这里插入图片描述
flex-shrink

如果Flex项的宽度总和大于Flex容器的宽度，即Flex容器空间不足时，Flex项会缩小，缩小的程度由flex-shrink决定，flex-shrink的默认值是1。
看例子吧。
例1： .item的flex-shrink都取默认值1

<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

 .container{
     width: 400px;
     display:flex;
 }
 .item{
     height: 100px;
 }
 .item:nth-of-type(1){
     width: 120px;
     background-color: lightgoldenrodyellow;
     /* flex-shrink: 2; */
 }
 .item:nth-of-type(2){
     width: 150px;
     background-color: lightskyblue;
     /* flex-shrink: 3; */
 }
 .item:nth-of-type(3){
     width: 180px;
     background-color: lightgrey;
 }
  • 总溢出空间
    (120px+150px+180px)-400px=50px
  • 总权重
    120*1+150*1+180*1=450
  • 单项的权重
    第一个项目的权重是120*1=120;
    第二个项目的权重是150*1=150；
    第三个项目的权重是180*1=180。
  • 单项的压缩空间
    第一项的压缩空间是50px*120/450=13.33px;
    第二项的压缩空间是50px*150/450=16.66px;
    第三项的压缩空间是50px*180/450=20px。
  • 单项的最终宽度
    第一项的最终宽度是120px-13.33px=106.66px；
    第二项的最终宽度是150px-16.66px=133.34px;
    第三项的最终宽度是180px-20px=160px。
    在这里插入图片描述

例2：第一个.item的flex-shrink设置为2，第二个.item的flex-shrink设置为3，第三个.item的flex-shrink取默认值1。

  • 总溢出空间
    (120px+150px+180px)-400px=50px
  • 总权重
    120*2+150*3+180*1=870
  • 单项的权重
    第一个项目的权重是120*2=240;
    第二个项目的权重是150*3=450；
    第三个项目的权重是180*1=180。
  • 单项的压缩空间
    第一项的压缩空间是50px*240/870=13.79px;
    第二项的压缩空间是50px*450/870=25.86px;
    第三项的压缩空间是50px*180/870=10.35px。
  • 单项的最终宽度
    第一项的最终宽度是120px-13.79px=106.21px；
    第二项的最终宽度是150px-25.86px=124.14px;
    第三项的最终宽度是180px-10.35px=169.65px。
    在这里插入图片描述

例3：第一个.item的flex-shrink设置为0.1，第二个.item的flex-shrink设置为0.2，第三个.item的flex-shrink设置为0.3。

  • 总溢出空间
    (120px+150px+180px)-400px=50px
    所有.item的flex-shrink加起来等于0.1+0.2+0.3=0.6，小于1，这时总溢出空间就不是(120px+150px+180px)-400px=50px了，而是50px*(0.1+0.2+0..3)/1=30px。
  • 总权重
    120*0.1+150*0.2+180*0.3=96
  • 单项的权重
    第一个项目的权重是120*0.1=12;
    第二个项目的权重是150*0.2=30；
    第三个项目的权重是180*0.3=54。
  • 单项的压缩空间
    第一项的压缩空间是30px*12/96=3.75px;
    第二项的压缩空间是30px*30/96=9.37px;
    第三项的压缩空间是30px*54/96=16.87px。
  • 单项的最终宽度
    第一项的最终宽度是120px-3.75px=116.25px；
    第二项的最终宽度是150px-9.37px=140.63px;
    第三项的最终宽度是180px-16.87px=163.13px。
    在这里插入图片描述
flex-basis

在分配剩余空间之前，Flex项占据了多少主轴空间，这个由flex-basis决定。
flex-basis的默认值是auto，即Flex项本身的大小。
浏览器根据各Flex项的flex-basis，计算Flex容器的剩余空间。
当flex-direction为row| row-reverse，且flex-basis、width同时存在时，此时flex-basis的优先级高于width；
当flex-direction为column|column-reverse，且flex-basis、height同时存在时，此时flex-basic的优先级高于height。

<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

.container{
    width: 400px;
    display: flex;
}
.item{
    height: 100px;
}
.item:nth-of-type(1){
    width: 80px;
    background-color: lightgoldenrodyellow;
    flex: 100px 0 0;
}
.item:nth-of-type(2){
    width: 120px;
    background-color: lightskyblue;
    flex: 120px 0 0;
}
.item:nth-of-type(3){
    width: 140px;
    background-color: lightgrey;
    flex: 140px 0 0;
}

在这里插入图片描述

flex

flex:flex-grow flex-shrink flex-basis
flex:无单位的数 无单位的数 有效的宽度值
无单位的数，第一个是flex-grow，第二个是flex-shrink；有效的宽度值是flex-basis。

align-self

设置单个Flex项的对齐方式，将覆盖align-items。

参考文档

justify-content
align-content
align-items
flex-shrink
flex-grow
Flex布局教程

richest_qi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 上下布局 flex,Css Flex布局
weixin_36398921的博客
08-03 2990
Flex布局是Css3中新加入的额外布局系统。传统布局基于盒模型，依赖“display”、“position”、“float”属性，对于特殊布局非常不便。因此2009年，W3C提出新的布局方案-Flex布局，但由于浏览器兼容问题，Flex布局并没有大范围铺开。实现Flex布局的条件1.必须有一个父级容器作为Flex容器(作为容器)·定义一个Flex容器.box{ display: flex; }2...
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。... 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
css Flex布局的可伸缩性(Flexibility)
09-24
主要介绍了css Flex布局的可伸缩性(Flexibility)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
今日css Flex布局相关知识
06-09
容器属性相关练习
flex布局---flex-wrap属性，决定排列是否换行
weixin_45128912的博客
07-17 3125
flex布局---flex-wrap属性，决定排列是否换行
一、弹性盒子
m0_73326255的博客
08-18 197
align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）flex-shrink属性：子元素的缩小比例（子项宽度和>父盒子宽度的时候）flex-grow属性：子元素的放大比例（子项宽度和...
HTML之flex布局
HeroIsUseless的博客
07-05 2533
flex布局老是忘，记录一下吧 flex-wrap:wrap; 属性：让弹性盒元素在必要的时候拆行，也就是换行。 （1）nowrap（默认）：不换行。 （2）wrap：换行，第一行在上方。 （3）wrap-reverse：换行，第一行在下方。(适合消息) 如何实现那种平铺式flex布局？关键在于after伪元素 .shelf{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around
css flex 布局换行
最新发布
℡メ㏑╭ァ小凯
03-07 1198
加上这个就行了：flex: 1 0 calc(20% - 40px);/* 控制一行显示5个，设置间距为20px */，最后效果。默认使用display: flex;是不换行的，只需要加上flex-wrap: wrap;通过上面我们发现虽然时间换行了，但是每行的边距不一样。
flex 布局常用属性整合
摸鱼小队
03-31 4613
语法： display：flex； 1、给父盒子添加属性，对父盒子进行描述，仅子盒子生效； 2、这个时候的盒子就是弹性盒子，有主轴和侧轴（） 3、有自己独立的布局方式 一、使用方法 父盒子添加：display：flex；（必须写） 父盒子进行布局描述即可：比如flex-wrap：wrap;，justify-content：space-around; 二、flex 布局常用属性 1.主轴方向： flex-direction 属性 取值（常用）： row： 从左到右 （默认） column： 从上到下 2. 开
flex布局（详细）
weixin_50619875的博客
05-05 514
flex布局 父项常见属性 flex-direction flex-direction: row; 默认值：元素沿行排列，起始线在左边，终止线在右边 效果图 flex-direction: row-reverse; 元素沿着行排列，起始线右边，终止线左边 flex-direction: column; 主轴和交叉轴交换，元素沿着列的方向排列显示，起始线在顶部，终止线在底部 flex-direction: column-reverse; 主轴和交
Css Flex 弹性布局中的换行与溢出处理方法
热门推荐
忧郁的蛋的专栏
10-02 1万+
本文将详细介绍Flex布局中的换行与溢出处理方法，并结合具体的代码示例，帮助读者更好地理解与运用。2，使用flex属性：flex属性是flex-grow、flex-shrink和flex-basis的缩写。可以通过设置不同的flex-basis值来改变子元素的宽度，从而实现溢出内容的隐藏效果。在上述代码中，容器元素的宽度为400px，设置了flex-wrap属性为wrap，以及子元素的flex-basis属性为200px。在Flex布局中，当子元素的总宽度超过父容器的宽度时，有时我们需要进行换行处理。
flex布局之 flex-wrap:wrap 自动换行属性，导致最后一行无法垂直对齐，搬砖解。记录！！
WillGoodNext的博客
08-08 838
首先功能是布局自动换行自动对齐。
[每天进步一点点~] flex布局
DarlingYL的博客
12-01 174
Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 flex布局有以下6个属性： flex-direction flex-wrap flex-flow just...
【css】text-align:justify实现两端对齐
richest_qi的博客
05-07 1万+
p{ width:150px;line-height:50px; background:#58a; color:white; text-align:center; } <body> <p>hello world</p> </body> 给p设置line-height...
【css】实现箭头
richest_qi的博客
01-19 4424
实现向上、右、下、左的箭头 <body> <div class="arrow-top"></div> <div class="arrow-right"></div> <div class="arrow-bottom"></div> <div class="arrow-left"></div> </body> div{ width: 20px; height: 20
【css】overflow
richest_qi的博客
07-18 3373
overflow <body> <div class="container"> <div class="content"></div> </div> </body> .container{ width:100px;height:100px; padding:5px; border:5px solid darkorch
【css】实现图片与文本对齐
richest_qi的博客
08-01 3341
要实现图片和文本对齐，可以使用下列几种方法。 第一种，使用vertical-align:middle .icon{ background-repeat:no-repeat; background-position:center; display:inline-block; width:16px; height:16px; vertical-align:middle; } .icon-down{ background-image:url(./imgs/ic
【css】实现切角
richest_qi的博客
09-06 2580
<body> <div class="box"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </body> div{ margin: 50px;
【css】Flex之骰子布局
richest_qi的博客
08-16 2558
本文档完全参考阮一峰大神的Flex布局教程，详细记录以备忘。 单个Flex项 <body> <div class="container box"> <div class="item"></div> </div> </body> body{ background-color:#333; } .container{ background-color:#e7e7e7; margin:1
css flex布局
04-05
CSS Flex布局是一种弹性盒子布局模型，它可以让容器中的子元素自动适应空间分配，并且可以轻松地实现对齐、排列和分布。 Flex布局中有两个重要的概念：容器和项目。容器是指包含Flex布局的父元素，而项目则是指容器中的子元素。 以下是一些Flex布局的基本属性： 1. display: flex; - 将元素设置为Flex容器，使其子元素成为Flex项目。 2. flex-direction: row/column; - 定义Flex容器中项目的排列方向，可以是水平方向（默认）或垂直方向。 3. justify-content: flex-start/end/center/space-between/space-around; - 定义Flex容器中项目的水平对齐方式。 4. align-items: flex-start/end/center/baseline/stretch; - 定义Flex容器中项目的垂直对齐方式。 5. flex-wrap: nowrap/wrap/wrap-reverse; - 定义Flex容器中项目的换行方式。 6. flex-grow: number; - 定义Flex项目的放大比例。 7. flex-shrink: number; - 定义Flex项目的缩小比例。 8. flex-basis: length/initial/auto; - 定义Flex项目的基准大小。 9. flex: flex-grow flex-shrink flex-basis; - 以上三个属性的缩写形式。 10. align-self: flex-start/end/center/baseline/stretch/auto; - 定义Flex项目自身的垂直对齐方式，覆盖容器的align-items属性。 以上是Flex布局的一些基本属性，通过这些属性的组合，可以实现各种不同的布局效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值