文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS3中怎么实现 FlexBox弹性布局

2023-06-08 07:53

关注

这篇文章将为大家详细讲解有关CSS3中怎么实现 FlexBox弹性布局,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

工作原理

设置父元素的display属性为flex,则子元素都变成flex item,由此可以控制子元素的排列方式、尺寸、间距等;

兼容性

CSS3中怎么实现 FlexBox弹性布局

Flex Container

先来看一个最简单的flex示例,外层div设置display: flex成为一个flex container,内部的3个div则自动变为flex item:

html:

<div class="flex-container">  <div class="box one"></div>  <div class="box two"></div>  <div class="box three"></div></div>

css:

.flex-container{ max-width: 960px; margin: 0 auto; display:flex; }.box{ height: 100px; min-width: 100px; }.one{ background: pink; }.two{ background: lightgreen; }.three{ background: skyblue; }

效果:

CSS3中怎么实现 FlexBox弹性布局

效果与浮动布局类似,但是如果用浮动实现的话需要写更多的代码,而flex一行就搞定了。

1. Justify Content

如果我们想让flex item居中排列呢,我们可以给flex container增加一个css属性:justify-content,它控制flex item在主轴方向(main axis,由flex-drection决定,默认为水平方向)上的对齐方式:

.flex-container{  ...  justify-content: center;}

效果如图:

CSS3中怎么实现 FlexBox弹性布局

除此之外justify-content还可以设置为flex-start, flex-end, space-around, space-between, space-even等值,具体效果请自行实验。

2. Align Items

实现了flex方向的居中后,垂直于主轴方向(cross axis)的居中可以用align-items实现。

css:

.flex-container{  max-width: 960px;  margin: 0 auto;  display:flex;  justify-content: center;  height: 200px;  background-color: white;  align-items: center;}

效果:

CSS3中怎么实现 FlexBox弹性布局

使用flex解决了以往css垂直居中实现复杂的问题!相应的,align-items还有flex-start, flex-end等其他值。

3. Flex Direction

flex-direction决定了主轴方向即flex item排列方向,除了默认的row方向之外,还可以纵向、反向(row-reverse/column-reverse)排列flex item:

css:

.flex-container{  ...    flex-direction: column;  align-items: center;}

效果:

CSS3中怎么实现 FlexBox弹性布局

4. Flex Wrap

如果我们不想在窗口变窄的情况下压缩flex item,而是让超出边界的flex item换行显示那我们可以设置flex container的flex-wrap

.flex-container{  max-width: 960px;  margin: 0 auto;  display:flex;  flex-wrap: wrap;}.box{  height: 100px;  min-width: 300px;  flex-grow: 1;}

当我们压缩窗口的时候,效果如下:

CSS3中怎么实现 FlexBox弹性布局

flex wrap还有一个值:wrap-reverse,设置该值后,被wrap的元素会排到其他元素上面:

CSS3中怎么实现 FlexBox弹性布局

由此可见,flex wrap一定程度上可以取代media query了。

5. Flex Row

最后,flex-directionflex-wrap可以合并为一个属性flex-flow,比如:flex-flow: row-reverse wrap

Flex Item

1. Flex Grow

在上面所有的例子中,三个flex item只占据了flex container小部分空间,如果想让flex item占满flex container我们需要给flex item设置flex-grow属性。顾名思义,grow意味着增长,用于控制flex item的尺寸的伸展。

将css修改为:

.box {     height: 100px;     min-width: 100px;     flex-grow:1; }

效果:

CSS3中怎么实现 FlexBox弹性布局

可以看到三个子元素平分了父元素的空间,因为此时它们的flex-grow都是1。如果只有一个子元素设置了flex-grow呢?

css:

.box{ height: 100px; min-width: 100px; }.one{ background: pink; flex-grow: 1; }

效果:

CSS3中怎么实现 FlexBox弹性布局

此时two和three的大小不变,而one占据了父元素剩余空间。

如果将one的flex-grow改为2,而two和three改为1,我们看看会发生什么:

css:

.box{ height: 100px; min-width: 100px; flex-grow:1; }.one{ background: pink; flex-grow: 2; }

效果:

CSS3中怎么实现 FlexBox弹性布局

可以看到one的宽度变成了two和three的两倍,因此flex item的尺寸和flex-grow的值成正比。

2. Flex Shrink

flex-grow相对的是flex-shrinkflex-shrink用于控制子元素尺寸超过flex container后,对子元素的压缩。请看示例:

修改box的宽度为flex container的1/3,one、two、three的flex-shrink分别为1,2,3:

.box{ height: 100px; width: 320px; }.one{ background: pink; flex-shrink: 1; }.two{ background: lightgreen; flex-shrink: 2; }.three{ background: skyblue; flex-shrink: 3; }

当窗口正常尺寸时,效果如下:

CSS3中怎么实现 FlexBox弹性布局

当我们压缩窗口使其变得更窄后,效果如下:

CSS3中怎么实现 FlexBox弹性布局

当flex container宽度变为540px后,子元素都被不同程度的压缩了。压缩后的one、two、three的宽度分别为250px、180px、110px,所以相比于初始宽度320px被压缩掉的宽度分别为70px、140px、210px,70 : 140 : 210 = 1 : 2 : 3,与flex shrink的值成反比。实际上压缩率和flex item的初始尺寸也有关系,只不过当初始尺寸一样时它带来的影响被忽略了。

假设flex shrink为fs,flex item的初始尺寸为is,flex item被压缩的尺寸为ss,则正确的表达式为:

fs &prop; is/ss

3. Flex Basis

flex-basis用于设置flex item的初始宽/高。为什么有width和height还需要重新加一个flex-basis呢?flex-basis和width/height有如下的区别:

  1. flex-basis只能用于flex-item,而width/height可以应用于其他类型的元素;

  2. flex-basis和flex-direction有关,当flex-direction为row的时,flex-basis设置的是宽度,当flex-direction为column时,flex-basis设置的是高度;

  3. 当flex item被绝对定位后(absolute position),flex-basis不起作用,而width/height可以;

  4. flex-basis可以用于flex的简写形式,如:flex: 1 0 200px;

我们来看一下flex-basis的作用,将css修改如下:

.box{  height: 100px;  flex-grow: 1;}.one{  background: pink;  flex-basis: 100px;}.two{  background: lightgreen;  flex-basis: 200px;}.three{  background: skyblue;  flex-basis: 300px;}

3个flex item都在原来的初始宽度基础上增加了相同的宽度:

CSS3中怎么实现 FlexBox弹性布局

当然,这个例子如果换成使用width也是一样的效果,但是虽然效果一样但意义不一样,所以使用flex布局时还是应该尽量遵守规范,选合适的人去干正确的事。

4. Order

通过order属性我们可以改变flex item的排列顺序,例如:

html:

<section id="blocks">  <div class="one">1</div>  <div class="two">2</div>  <div class="three">3</div>  <div class="four">4</div></section>

css:

#blocks{  display: flex;  margin: 10px;  justify-content: space-between;}#blocks div{  flex: 0 0 100px;  padding: 40px 0;  text-align: center;  background: #ccc;}

默认排列顺序是按照flex item在html中的出现顺序:

CSS3中怎么实现 FlexBox弹性布局

当我们修改flex item的order值后,flex item会按照order值升序排列:

css:

.one{ order: 4; }.two{ order: 3; }.three{ order: 2; }.four{ order: 1; }

效果:

CSS3中怎么实现 FlexBox弹性布局

关于CSS3中怎么实现 FlexBox弹性布局就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯