html基础之弹性布局(dispaly :flex)
本文直接介绍一些属性,需要注意什么等等类似的不在介绍,知识点导航
父元素属性
- flex-direction:项目的排列方向
flex-wrap:若果一条轴线排不下,如何换行
flex-flow
justify-content
align-items
align-content
子元素属性
- order
flex-grow
flex-shrink
flex-basic
flex
使用之前需在父元素设置“display:flex”
话不多说,直接上代码,基础代码在最下面,会在原有的基础上添加
.parent{display:flex;}
-设置父元素 display: flex; 这会使每个子元素自动变为伸缩项; 所谓伸缩项,就是说当父元素的宽度不足以容纳所有子元素时,会将子元素进行等比例收缩直到父容器足以一行放下所有子元素;
注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效
作为父容器的六大属性
1,flex-direction决定主轴的方向(即项目的排列方向)
- row(默认值):主轴为水平方向,起点在左端
- row-reverse:主轴为水平方向,起点在右端
- column:主轴为垂直方向,起点在上沿
- column-reverse:主轴为垂直方向,起点在下沿
实例:其中只实验了一个属性,对应的图片分别为下图,关于父元素的元素全部都是在 . parent的基础上进行设置
display: flex;
flex-direction: row-reverse;
2,flex-wrap:若果一条轴线排不下,如何换行
- nowrap(默认):不换行,当容器宽度不够时,每个子元素会被挤压宽度
- rwrap:换行,并且第一行在容器最上方
- wrap-reverse:换行,并且排在第一行容器最下面
width:150px;//原来的宽度太大
display: flex;
flex-direction: row-reverse;
3,flex-flow:是flex-direction和,flex-wrap的缩写。默认值为:flex-flow:row wrap;一般不需要使用
4,justify-content:定义了项目在主轴上的对齐方向
> > 此属性与主轴方向息息相关。
主轴方向为:row - 起点在左边,row-reverse -起点在右边,column - 起点在上边,column-reverse -起点在下边
- flex - start(默认值):项目位于主轴起点。
- flex-end:主轴位于主轴终点。
- center:居中(常用);
- space-between:两端对齐,项目之间的距离都相等(开头和最后的子元素,与父容器边缘之间么有间隔)
- space-around:每个项目的间隔相同,切两端间隙是项目间距的一半(开头和最后的项目,与父容器边缘有一定距离)
5,align-items:定义项目在交叉轴如何对齐
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline:项目第一行文字基线对齐(文字的行高,字体大小会影响每行的基线)
这里以baseline为例;但图片还是按取值排列,所以对应的图片是最后一个
font-size:40px//改变第一个子元素的文字大小
<-- 父元素设置 -->
display: flex;
align-items:baseline;
6,align-content:定义了多跟轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
>>当项目换为多行时,可使用align-content取代align-items
- flex - start:与交叉轴起点对齐。
- flex-end:与交叉轴终点对齐。
- center:与交叉轴中点对齐。
- space-between:两端对齐
- spance-around:每根轴线距离相等
display: flex;
align-content:flex - start
关于父元素的属性就介绍到这里。还有一个小的知识点,是我在视频上看见的
.parent{float:flex}
.child{margin:auto}
justify-content:space-around
和
align-items:center
的结合体。
很常用
作为子元素的属性
1,order:定义项目的排列顺序。数值越小,排列越靠前。默认为 0
.child_1{order:2}
.child_1{order:1}
2,flex-grow:定义放大比例。默认0。即如果存在剩余空间,也不放大
>>这个可以说是个比例吧,当只有一个子元素设置时,即放大倍数,不过最好几个一起设置
.child_1{flex-grow:1}
.child_2{flex-grow:1}
.child_3{flex-grow:2}
.child_4{flex-grow:2}
如图所示,子元素1,2,3,4都设置的这个属性,效果是在父元素宽度上进行分配。子元素3,4和子元素1,2的比例是1:2
3,flex-shrink:定义了项目的缩小比例。默认为1;即如果空间不足,该项目将缩小
>>这个吧,即在父元素缩小的时候,让这个子元素不缩小,取值试了一下,好像是0-1,如果取值为0.5的话,即子元素最小缩小50%,为0则不能缩小,当然了,如果设置的总宽度超过了父元素,则会在父元素之外显示
.child{flex-shrink:0}
4,flex-basic:项目占据的主轴空间(如过主轴为水平,则设置这个属性,相当于设置宽度,原有width失效)
.child_1{flex-basis: 200px;}
5,flex:此属性是flex-grow,flex-shrink和flex-basic的简写,默认值 0 1 auto,后两个属性可选
基础代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>弹性布局</title>
<style type="text/css">
* {
font-size: 30px;
}
.parent {
width: 500px;
height: 500px;
border: 1px solid red;
}
.child_1 {
width: 50px;
height: 50px;
background: pink;
}
.child_2 {
width: 50px;
height: 60px;
background: blue;
}
.child_3 {
width: 50px;
height: 70px;
background: gray;
}
.child_4 {
width: 50px;
height: 80px;
background: red;
}
.child_5 {
width: 50px;
height: 90px;
background: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child child_1">1</div>
<div class="child child_2">2</div>
<div class="child child_3">3</div>
<div class="child child_4">4</div>
<div class="child child_5">5</div>
</div>
</body>
</html>
结果如下
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析