专栏首页cwl_Java前端基础-CSS弹性布局

前端基础-CSS弹性布局

三、弹性布局

1.多栏布局

概念:实现多个栏目的布局,类似于报纸

a) 分栏显示–语法:column-count:值

取值:值是一个栏目的数量

<style type="text/css">
		.box{column-count:3;width:500px;}
	</style>
</head>
<body>
	<div class="box">
		本次论坛以“智能互联时代的媒体变革与发展”为主题,由中共中央网络安全和信息化委员会办公室指导,中华全国新闻工作者协会、中国网络社会组织联合会、中共宁波市委、宁波市人民政府、中共浙江省委网络安全和信息化领导小组办公室主办,央视网、中共宁波市委宣传部(市委网络安全和信息化领导小组办公室)共同承办,宁波日报报业集团(甬派传媒)、新浪网协办。

  为了对论坛主题进行更深入、透彻地探讨,论坛将邀请主管部门、各地网信办、中央和地方主要新闻网站、重点商业网站和知名新媒体机构负责人等,共同研讨和应对当前网上内容建设和管理过程中遇到的问题和挑战,预测未来网络媒体发展趋势,解决技术变革带来的实际问题,分析分享媒体未来发展方向。

  截至目前,承办方已邀请相关政府官员、中央及地方新闻网站和主要商业网站代表、专家学者、运营商代表等700多位嘉宾参会。
	</div>
</body>

b) 多栏隔断框–语法:column-rule:值

取值:这里的取值和边框的取值是一样的,也有边框厚度,边框颜色,边框样式

<style type="text/css">
		.box{column-rule:5px solid red;column-count:3;width:500px;}
	</style>
</head>
<body>
	<div class="box">
		本次论坛以“智能互联时代的媒体变革与发展”为主题,由中共中央网络安全和信息化委员会办公室指导,中华全国新闻工作者协会、中国网络社会组织联合会、中共宁波市委、宁波市人民政府、中共浙江省委网络安全和信息化领导小组办公室主办,央视网、中共宁波市委宣传部(市委网络安全和信息化领导小组办公室)共同承办,宁波日报报业集团(甬派传媒)、新浪网协办。

  为了对论坛主题进行更深入、透彻地探讨,论坛将邀请主管部门、各地网信办、中央和地方主要新闻网站、重点商业网站和知名新媒体机构负责人等,共同研讨和应对当前网上内容建设和管理过程中遇到的问题和挑战,预测未来网络媒体发展趋势,解决技术变革带来的实际问题,分析分享媒体未来发展方向。

  截至目前,承办方已邀请相关政府官员、中央及地方新闻网站和主要商业网站代表、专家学者、运营商代表等700多位嘉宾参会。
	</div>
</body>

c) 设置每一栏的宽度–语法:column-width:值

取值:值和宽度的值一样

<style type="text/css">
		.box{column-width:80px;width:500px;border:1px solid red;}
	</style>
</head>
<body>
	<div class="box">
		本次论坛以“智能互联时代的媒体变革与发展”为主题,由中共中央网络安全和信息化委员会办公室指导,中华全国新闻工作者协会、中国网络社会组织联合会、中共宁波市委、宁波市人民政府、中共浙江省委网络安全和信息化领导小组办公室主办,央视网、中共宁波市委宣传部(市委网络安全和信息化领导小组办公室)共同承办,宁波日报报业集团(甬派传媒)、新浪网协办。

  为了对论坛主题进行更深入、透彻地探讨,论坛将邀请主管部门、各地网信办、中央和地方主要新闻网站、重点商业网站和知名新媒体机构负责人等,共同研讨和应对当前网上内容建设和管理过程中遇到的问题和挑战,预测未来网络媒体发展趋势,解决技术变革带来的实际问题,分析分享媒体未来发展方向。

  截至目前,承办方已邀请相关政府官员、中央及地方新闻网站和主要商业网站代表、专家学者、运营商代表等700多位嘉宾参会。
	</div>
</body>

2.弹性布局

概念:可以实现类似浮动的效果,但是不会脱离文档流

语法:display:flex -------------设置一个弹性容器

主要属性(都需要先设置display:flex;):

a) 设置弹性布局的方向–语法:flex-direction:值

取值:

​ (1)row横向排列,等同于左浮动浮动效果

​ (2)row-reverse 横向反向排列,等同于右浮动的效果

​ (3)column 纵向排列

​ (4)column-reverse 纵向反向排列,从下到上的排列

b) 设置 弹性布局是否换行,语法:flex-wrap:值

取值:

​ (1)不换行(默认),nowrap

​ (2)换行, wrap

​ (3)换行,并反向排列(从下往上排列),wrap-reverse------从下往上,从左往右进行排列

c) 设置弹性布局的水平对齐方式,语法:justify-content:值

取值:

​ (1)从左向右(左对齐),默认,flex-start

​ (2)从右往左排列(右对齐),flex-end

​ (3)两端对齐,中间等距离隔开,space-between

​ (4)两端的空白是中间空白的一半,space-around------------环绕对齐

​ (5)居中对齐,center

​ (6)等距离排列,space-evenly

d) 垂直对齐方式,语法:align-content:值(在换行的时候用)

取值:

​ (1)默认的排列方式,stretch--------靠上排列,但是元素之间有间距

​ (2)靠上排列(上对齐),flex-start

​ (3)靠下排列(下对齐),flex-end

​ (4)垂直上下两端对齐,中间等距离空白,space-between

​ (5) 两端的空白是中间的空白的一半,space-around

​ (6)居中对齐,center

​ (7)等距离摆放,space-evenly

e) 交叉对齐方式,语法:align-items:值 ,需要横向排列

取值:

​ (1)flex-start,从起始位置对齐

​ (2)flex-end,在结束位置对齐--------底部对齐

​ (3)center,居中对齐---------垂直居中

​ (4)baseline,在基准线对齐

​ (5)stretch,拉伸子元素------图片不行

使用场景:当网页结构鲜明,简单,使用弹性布局

f)子元素单独在y轴上的对齐方式,语法:align-self:值

取值:

​ auto:默认值,元素继承了它的父容器的align-items属性,如果没有父容器则为"stretch"

​ stretch:拉伸

​ center:居中

​ flex-start:最上面

​ flex-end:最下面

​ baseline:容器的基线

其实这个属性的结果和align-items的一样,只是align-items修饰的弹性容器中的所有子元素,align-self修饰的当前这一个元素。

text-align:center;和margin:auto;的区别

​ text-align:center;

​ 1.文本水平居中对齐

​ 2.设置在父元素上,作用于子元素(行元素和行内块,不能对块元素生效)

​ margin:auto;

​ 1.盒子水平居中

​ 2.设置在自身,作用于自身(自己是块元素,在父元素中居中,不能对行元素生效)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java工具集-yml配置处理工具

    cwl_java
  • VUE-Vuetify框架

    Vue虽然会帮我们进行视图的渲染,但样式还是由我们自己来完成。这显然不是我们的强项,因此后端开发人员一般都喜欢使用一些现成的UI组件,拿来即用,常见的例如:

    cwl_java
  • 快速学习-微信小程序开发(flex布局)

    https://www.w3.org/TR/css-flexbox-1/ https://www.w3.org/TR/css-align-3/

    cwl_java
  • numpy小结

    numpy是进行科学运算不可或缺的工具,很多其他科学计算的库也是基于numpy的,比如pandas

    opprash
  • Angular实战项目(2)

    ng new taskmgr -si --style=scss installing ng

    达达前端
  • 准备好迎接AV1的黄金时代了吗?

    今天,我将演示SVT-AV1如何以相同码率更快地提供更高质量的内容。结合dav1d的快速AV1解码, AV1编解码器即将为全面推广做好准备。

    LiveVideoStack
  • 机器学习中的基本问题——log损失与交叉熵的等价性

    1、log损失 image.png 2、交叉熵 image.png

    zhaozhiyong
  • 【玩转腾讯云】用轻量应用服务器搭建网站

    不少小伙伴应该知道,腾讯云正在内测轻量应用服务器,而且马上就要公测了!我提前申请到了一台内测机器,那就来告诉大家,在公测后购买腾讯云轻量应用服务器之后如何玩转它...

    BessCroft
  • 高质量编码-EchartsLayer

    在GIS中,对于有方向属性的线数据,比如河流流向,管网流向,使用有动画流动效果的表示更为形象。

    MiaoGIS
  • 程序员面试神回复,最后一个“过分”了!

    1. image.png 2. image.png 3. image.png 4. image.png 5. image.png 6. image.png 7...

    用户2040787

扫码关注云+社区

领取腾讯云代金券