CSS - 浅谈 CSS3 - Flex 基础语法

网页布局是css的重点应用之一,而在移动互联网肆虐横行的时代,移动端网页布局才是咱前端的主战区,传统的pc端布局方案比较依赖display、position、float、margin、padding等属性,而这些布局属性已经不能满足咱们移动端开发了,比如垂直居中就是让前端非常蛋疼的问题,有时还会傻傻的去做精确计算,太没效率了。为了解决这一痛点,W3C在2009年提出了一种全新的CSS布局方式——弹性布局方式,依赖flexbox,从此,我们可以更简单,高效的完成可伸缩式页面的布局。本文就针对flex的基础语法和应用场景做一些简要的概述,文采有限,非喜勿喷。

我记得第一次接触移动端开发时,就挣扎在微信端整整一个月,,难度可想而知,不过在度娘的帮助下,坑一个个的被填上,其中用起来最爽的要数flexbox,真是移动端布局神器。

 

一、兼容问题

前端同学对Flexbox布局方式是想用而不敢用,总是担心兼容性会出问题,现在我可以很负责任的告诉你,请你放心大胆的用,同事android 4.0亲测,是没问题的,不过请使用下面这种兼容写法:

Html

Css

 

二、基本语法

说之前先看张图。

(1)父元素

如图所示在felxbox布局中,父元素.fatcher可以设置六个属性,分别是

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content

1、flex-direction

在felxbox布局中,默认有两颗轴,水平轴和垂直轴。

此属性决定主轴的方向(即子元素.son的排列方向,默认是水平方向),有四个值可取,分别为,flex-direction: row row-reverse column column-reverse,接下来用一张图来看看这几个值的含义、写法和效果。

2、flex-wrap

此属性表示当子元素.son太多时,需不需要换行(默认是不换行),有三个值取,flex-wrap: nowrap wrap wrap-reverse,接下来用一张图来看看这几个值的含义、写法和效果。

3、flex-flow

这个属性是上面两个的简写形式,默认是水平方向,不换行,自行进行组合即可,在这就不再赘述。

4、justify-content

定义了子元素.son元素的对齐方式,默认是左对齐。五个值可选。

.fatcher{
    justify-content: flex-start flex-end center space-between space-around;
}

值的含义分别为:左对齐(默认),右对齐,居中对齐,两端对齐,每个子元素.son两侧的间隔相等;
效果分别为:

5、align-items

定义子元素.son在轴上怎么对齐,默认是沾满整个容器。五个值可选。

.fatcher{
    align-items: flex-start flex-end center baseline stretch;
}

值的含义分别为:轴的起点对齐、轴的终点对齐、轴的中心点对齐、子元素.son元素的第一行文字的基线对齐、默认值,如果子元素.son未设置高度或设为auto,将占满整个容器的高度。效果如图所示:

6、align-content

定义了多根轴线的对齐方式。如果子元素.son只有一根轴线,该属性不起作用。

.fatcher{
    align-content: flex-start flex-end center space-between space-around stretch;
}

含义分别为:轴的起点对齐、轴的终点对齐、轴的中心点对齐、与轴两端对齐,轴线之间的间隔平均分布、轴线占满整个交叉轴。效果与align-items类似,在这就不显示了。

 

(2)子元素

说完父元素的属性,再来说说子元素.son的属性值有哪些,同样六个:

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. align-self

1、order

定义子元素.son的排列顺序。数值越小,排列越靠前,默认为0。

写法:

.son{
    order:1/2/3/-1;
}

效果如图:

2、flex-grow

定义子元素.son的放大比例,默认为0,即如果存在剩余空间,也不放大。

如果所有子元素.son的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个子元素.son的flex-grow属性为2,其他子元素.son都为1,则前者占据的剩余空间将比其他子元素.son多一倍。效果如下:

3、flex-shrinK

定义了子元素.son的缩小比例,默认为1,即如果空间不足,该元素将缩小。
如果所有子元素.son的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个子元素.son的flex-shrink属性为0,其他子元素.son都为1,则空间不足时,前者不缩小。

.son{
    flex-grow: <number>; / default 0 /
}

4、flex-basis

属性定义了在分配多余空间之前,子元素.son占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即子元素.son的本来大小。它可以设为跟width或height属性一样的值(比如350px),则子元素.son将占据固定空间。

5、Flex

是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。

6、align-self

属性允许单个子元素.son有与其他子元素.son不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

.item {
    align-self: auto flex-start flex-end center baseline stretch;
}

该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

 

三、总结

flex 12个属性中,我在移动端开发常用的属性有:flex-direction 、justify-content 、flex-flow 、align-items (解决垂直对齐问题)、flex-grow 、flex-shrinK (图片容器不想它随便改变,就使用次属性),比如flex-direction当此属性值为column column-reverse(垂直轴)时,可以解决一个困扰我们的问题,当内容太少,footer会跳上来,而我们又想固定footer在底部,当内容增加时,自动撑开,而又不想使用position: fixed。

当然,用途可不止这么点,还待前端同学们自己去挖掘,通过此博客不难看出,每一个知识点如果要细分的话,是需要大量的时间去研究的,前端之路任重而道远,加油!

相关推荐
<p> <span style="font-size:14px;color:#E53333;">限时福利1:</span><span style="font-size:14px;">购课进答疑群专享柳峰(刘运强)老师答疑服务</span> </p> <p> <br /> </p> <p> <br /> </p> <p> <span style="font-size:14px;"></span> </p> <p> <span style="font-size:14px;color:#337FE5;"><strong>为什么需要掌握高性能的MySQL实战?</strong></span> </p> <p> <span><span style="font-size:14px;"><br /> </span></span> <span style="font-size:14px;">由于互联网产品用户量大、高并发请求场景多,因此对MySQL的性能、可用性、扩展性都提出了很高的要求。使用MySQL解决大量数据以及高并发请求已经是程序员的必备技能,也是衡量一个程序员能力和薪资的标准之一。</span> </p> <p> <br /> </p> <p> <span style="font-size:14px;">为了让大家快速系统了解高性能MySQL核心知识全貌,我为你总结了</span><span style="font-size:14px;">「高性能 MySQL 知识框架图」</span><span style="font-size:14px;">,帮你梳理学习重点,建议收藏!</span> </p> <p> <br /> </p> <p> <img alt="" src="https://img-bss.csdnimg.cn/202006031401338860.png" /> </p> <p> <br /> </p> <p> <span style="font-size:14px;color:#337FE5;"><strong>【课程设计】</strong></span> </p> <p> <span style="font-size:14px;"><br /> </span> </p> <p> <span style="font-size:14px;">课程分为四大篇章,将为你建立完整的 MySQL 知识体系,同时将重点讲解 MySQL 底层运行原理、数据库的性能调优、高并发、海量业务处理、面试解析等。</span> </p> <p> <span style="font-size:14px;"><br /> </span> </p> <p> <span style="font-size:14px;"></span> </p> <p style="text-align:justify;"> <span style="font-size:14px;"><strong>一、性能优化篇:</strong></span> </p> <p style="text-align:justify;"> <span style="font-size:14px;">主要包括经典 MySQL 问题剖析、索引底层原理和事务与锁机制。通过深入理解 MySQL 的索引结构 B+Tree ,学员能够从根本上弄懂为什么有些 SQL 走索引、有些不走索引,从而彻底掌握索引的使用和优化技巧,能够避开很多实战中遇到的“坑”。</span> </p> <p style="text-align:justify;"> <br /> </p> <p style="text-align:justify;"> <span style="font-size:14px;"><strong>二、MySQL 8.0新特性篇:</strong></span> </p> <p style="text-align:justify;"> <span style="font-size:14px;">主要包括窗口函数和通用表表达式。企业中的许多报表统计需求,如果不采用窗口函数,用普通的 SQL 语句是很难实现的。</span> </p> <p style="text-align:justify;"> <br /> </p> <p style="text-align:justify;"> <span style="font-size:14px;"><strong>三、高性能架构篇:</strong></span> </p> <p style="text-align:justify;"> <span style="font-size:14px;">主要包括主从复制和读写分离。在企业的生产环境中,很少采用单台MySQL节点的情况,因为一旦单个节点发生故障,整个系统都不可用,后果往往不堪设想,因此掌握高可用架构的实现是非常有必要的。</span> </p> <p style="text-align:justify;"> <br /> </p> <p style="text-align:justify;"> <span style="font-size:14px;"><strong>四、面试篇:</strong></span> </p> <p style="text-align:justify;"> <span style="font-size:14px;">程序员获得工作的第一步,就是高效的准备面试,面试篇主要从知识点回顾总结的角度出发,结合程序员面试高频MySQL问题精讲精练,帮助程序员吊打面试官,获得心仪的工作机会。</span> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页