10分钟看懂CSS3FlexBox基本介绍

时间：2023-04-02 16:06:01 HTML

特点flexbox是一种css显示类型，提供更简单高效的布局方式；flexbox可以相对于父元素和兄弟元素定位元素，控制大小，控制间距；flexbox对响应性有很好的支持；工作原理将父元素的display属性设置为flex，子元素就会变成flexitem，从而可以控制子元素的排列、大小、间距等；兼容性优先FlexContainer看一个最简单的flex例子，外层div设置display:flex成为??flex容器，内层三个div自动成为flexitems：html:

css:.flex-container{max-宽度：960px；保证金：0自动；显示：弹性；}.box{高度：100px；最小宽度：100px；}.one{背景：粉色；}.two{背景：浅绿色；}.three{背景：天蓝色；}效果：效果和浮动布局差不多，但是如果用浮动实现，需要多写代码，而flex可以一行搞定。1.JustifyContent如果我们想让flexitem居中，可以给flex容器添加一个css属性：justify-content，它控制flexitem在主轴方向（mainaxis,determinedbyflex-drection,默认为水平方向）对齐如上：.flex-container{...justify-content:center;}效果如图：另外justify-content也可以设置为flex-start,flex-end、space-around、space-between、space-even等取值，具体效果请实验。2、AlignItems实现了flex方向的居中后，可以通过align-items实现垂直于主轴（横轴）的居中。CSS:.flex-container{最大宽度:960px;保证金：0自动；显示：弹性；证明内容：居中；高度：200px；背景色：白色；align-items:center;}作用：用flex解决解决了以往css垂直居中复杂的问题！相应的，align-items也有flex-start、flex-end等值。3.FlexDirectionflex-direction决定了主轴的方向，即flex项的排列方向。除了默认的行方向，flexitems还可以垂直和反向排列（row-reverse/column-reverse）：css:.flex-container{...flex-direction:column;align-items:center;}作用：4.flexwrap如果我们不想在窗口变窄的时候压缩flexitem，而是让超出border的flexitem换行显示，那么我们可以设置flex-弹性容器包装：.flex-container{max-width:960px;保证金：0自动；显示：弹性；flex-wrap:wrap;}.box{height:100px;最小宽度：300px；flex-grow:1;}当我们压缩窗口时，效果如下：flexwrap还有一个值：wrap-reverse，设置这个值后，被包裹的元素会排列在其他元素之上：可以可见flexwrap在一定程度上可以替代mediaquery。5.FlexRow最后，flex-direction和flex-wrap可以合并为一个属性flex-flow，例如：flex-flow:row-reversewrap。弹性项目1。FlexGrow在上面所有的例子中，三个flexitem只占据了flex容器的一小部分。如果我们想让弹性项目充满弹性容器，我们需要为弹性项目设置flex-grow属性。grow顾名思义，就是增长的意思，用来控制flex项目大小的拉伸。修改css为：.box{height:100px;最小宽度：100px；弹性增长：1；}效果：可以看到三个子元素平分了父元素的空间，因为它们的flex-grow都是1。如果只有一个子元素设置了flex-grow怎么办？CSS:.box{高度:100px;最小宽度：100px；}.one{背景：粉色；弹性增长：1；}效果：此时二和三的大小不变，而一占据了父元素的剩余空间。如果我们将flex-grow的1改为2，将2和3改为1，让我们看看会发生什么：css:.box{height:100px;最小宽度：100px；弹性增长：1；}.one{背景：粉色；弹性增长：2；}效果：可以看到one的宽度变成了2和3的2倍，所以flexitem的大小和flex-grow的值成正比。2.flex-shrinkflex-grow的反义词是flex-shrink，flex-shrink用于控制子元素大小超过flex容器后对子元素的压缩。请看例子：修改box的宽度为flex容器的1/3，一、二、三的flex-shrink分别为1、2、3：.box{height:100px;宽度：320px；}.one{背景：粉色；伸缩收缩：1；}.two{背景：浅绿色；收缩：2；}.three{背景：天蓝色；收缩：3；}当窗口大小正常时，效果如下：当我们压缩窗口，使它变窄后，效果如下：当flex容器的宽度变为540px时，子元素被不同程度的压缩。一、二、三压缩后的宽度分别为250px、180px、110px，所以相对于初始宽度320px，压缩后的宽度分别为70px、140px、210px，70:140:210=1:2：3、与flexshrink值成反比。其实压缩率也和flexitem的初始大小有关，只是在初始大小相同的情况下忽略它的影响。假设flexshrink为fs，flexitem的初始大小为is，flexitem压缩后的大小为ss，那么正确的表达式是：fs∝is/ss3。FlexBasisflex-basis用于设置flexitem的初始宽度/高度。当我们有宽度和高度时，为什么我们需要添加另一个flex-basis？flex-basis和width/height的区别如下：flex-basis只能用于flex-item，而width/height可以应用于其他类型的元素；flex-basis与flex-direction相关，当flex-direction为row时，flex-basis设置为宽度，当flex-direction为column时，flex-basis设置高度；当flex项目绝对定位（absoluteposition）时，flex-basis不起作用，width/height是的；flex-basis可以使用flex的简写形式，如：flex:10200px；我们先看看flex-basis的作用，修改css如下：.box{height:100px;flex-grow:1;}.one{背景：粉红色;flex-basis:100px;}.two{背景：浅绿色;flex-basis:200px;}.three{背景：天蓝色;flex-basis:300px;}3个flexitem在原来的初始宽度上加上相同的宽度：当然，如果这个例子换成width，效果是一样的，但是虽然效果一样，但是含义不同，所以在使用flexlayout时，要尽量遵守规范，选对的人做对的事。4.order通过order属性，我们可以改变flexitem的排列顺序，例如：html:1234css:#blocks{display:flex;边距：10px；证明内容：空格之间；}#blocksdiv{flex:00100px;填充：40px0；文本对齐：居中；background:#ccc;}默认排列顺序是按照flexitem在html中出现的顺序：当我们修改flexitem的order值后，flexitem会按照order值升序排列：CSS:.one{命令:4;}.two{顺序：3；}.three{顺序：2；}.four{订单：1;效果：结语。这里简单介绍一下flex。Flex非常强大且简单。我希望你会喜欢使用它。

上一篇：[Javascript]获取选中的文字

下一篇：单页网站禁用浏览器后退按钮

10分钟看懂CSS3FlexBox基本介绍相关文章