Flex:简便完整、响应式的实现各种页面布局。现在各种浏览器支持
属性
示例:垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.parent{
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
border: 1px black solid;
}
.child{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
弹性盒模型的布局前提:父容器必须设置为flex弹性盒模型(display:flex),才能对父容器的子元素进行弹性操作。一旦设置之后,所有的子元素会默认都排在主轴,在以主轴的起始位置对齐。(下文会提及什么是主轴和侧轴)。侧轴:在不设置高度前提下子项会自动沾满一列
当全部子元素宽度总和超过了父元素的宽度时,子元素会自己调节自己的宽度,让子元素只能占据一行
但是当子元素的内容宽度超出了最大适配范围之后,子元素的内容就会自己接到父容器的后面。
作用在父容器上的属性:
**flex-direction:**用来控制整体布局方向,是从右到左,还是从左到右,是从上到下,还是从下到上
原图:
flex-direction:row-reverse 效果图:
注意:除了方块的排列顺序是反的外,它的起点还是靠右侧的
flex-direction:column 效果
flex-direction:column-reverse 效果图
flex-wrap:用来控制子项整体单行显示还是换行显示
原图:默认:flex-wrap:nowrap
flex-wrap:warp 换行 效果图:
可以看出,上面虽然换行啦,但是行与行之间有很大的空隙。这个与设置了高度有关,下文会提及。
flex-warp:warp 换行并且反向 效果图
flex-flow属性时flex-direction和flex-wrap的缩写,表示flex布局的flow流动特性一个值表示是方向,第二个值表示换行,中间用逗号隔开
flex-flow:column wrap;
justify-content:决定主轴方向上子项的对齐和分布方式
主轴:与flex-direction设置的方向一致的就是主轴(默认就是x轴向右)
原图:默认justify-content:flex-start
justify-content:flex-end
与flex-direction:row-reverse区别在于顺序没有变更
justify-content:center 主轴方向元素紧挨着,并且水平居中显示
justify-content:space-around
注:边缘两侧的空白只有中间空白的宽度的一半。因为中间空隙相当于左边的元素右空隙+右边元素的左空隙
justify-content:space-between
justify-content:space-evenly
与space-around的区别在于每个子元素的两侧分到空白区域都是一样的。连边缘也一致
改变主轴反向之后,justify-content原理也是一样的
多行情况下,每一行排列方式还是不受干扰的。
针对空白区域的操作,还是按照等比划分。
align-items:items指的是flex子项们,因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
侧轴:与主轴垂直的方向
默认:align-item:stretch:所有元素会自动拉伸,这就是弹性布局的特性
单行效果:
多行效果:
设置高度之后的效果:(中间有间隙的原因,因为弹性布局的原因,在这个例子中每行元应该占据父元素的50%,但是设置了高度没有显示出沾满的效果,也就出现了空隙)
align-item:flex-start(未设置高度,高度全靠内容撑开)
单行效果:
多行效果:
注意:给子元素设置高度之后,默认的align-items:stretch与align-item:flex-start效果一样
align-item:flex-end
单行效果:
多行效果:
设置高度之后:
align-item:center
单行效果
多行效果:
别看这个图跟flex-end类似,其实不一样的。先把父容器划分上50%下50%。然后center是在每一部分的中间部分。而flex-end则是每一部分的底部
设置高度之后的效果:
align-item:baseline 以文字排列对齐
原图:
效果图:
align-content:可以看成是和justify-content相似且对立的属性,如果所有flex子项只有一行,则align-content属性是没有任何效果的。
align-content:flex-start
align-content:flex-end
align-content:space-around
align-content:strecth
align-content:center
align-content: space-between;
注意:align-content对单行是不起作用的
作用在子元素的属性
还是一样。记得先给父容器设置display:flex,让容器变成弹性盒模型
order:(默认值 0)
flex-grow(当容器有剩余空间才起作用 默认值0)
原图:
有剩余空间:
没有剩余空间:没有效果
当flex-grow值小于1时,说明元素可以占剩余空间的百分之几。flex-grow:1将剩余空间沾满。如果有多个元素都有flex-grow时,将剩余空间按照他们设置flex-grow占比进行分配
flex-shrink(当没有剩余空间才起作用 默认值1)
当flex-shrink小于1时,表示变化后是比当前更大的。
大于1是是比当前更小的。当你不想让元素收缩时,设置flex-shrink:0即可
注意:当有剩余空间的条件下,一个收缩,一个扩张。那么收缩是不起作用的
当没有剩余空间的条件下,一个收缩,一个扩张。那么扩张是不起作用的
反正就记住:有剩余空间,跟flow-shrink没有关系的
flex-basis:就是可以指定某个子项的默认大小。与width差不多
这是设置width的
这是flex-basis的
注意:1.flex-basis的值是像素值,带单位的。
2.当width和flex-basis同时设置时,flex-basis的权重值高于width
3.因为flex-basis和width作用一样。所以设置的值不是一成不变的,该怎么压缩还是怎么压缩。该怎么扩张还是怎么扩张
**flex:**属于flex-grow,flex-shrink,flex-basis复合写法
flex:flex-grow flex-shrink flex-basis
只写一个值:flex-grow
原图:(只在父容器设置了 display:flex)
flex:1 0 100px;(只改变 flex-basisi:其他都是默认值 不收缩,不扩张,默认宽度100px )
没有剩余空间:
因为box2的默认宽度比其他的宽度要小,所以收缩程度也会比其他的子项更大些
有剩余空间:
就是除了设置默认宽度之外,其他毫无变化
flex:0 1(不扩张 不收缩 默认宽度为0)
有剩余空间
因为之前说过,flex-basis的权重值比width的高,所以设置了flex:0 1 之后相当于该子项的宽度为0,宽度完全靠内容撑起
没有剩余空间:(结局还是一样的 因为没有宽度)
所以说:只要该子项设置默认宽度为零(flex-basis:0)或者该子项的宽度为0(width:0),所有对该子项的收缩和扩张都无效。
其他的效果变化,都是按照原有的flex-grow 、 flex-shrink和flex-basis变化来的。就不多做解释了
align-self:(只作用垂直方向、与align-item对侧轴的操作一致,唯一的区别在于align-item 对多个子项操作,只有设置align-self的子项才有效果)
练习(一)骰子的点数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.tuozi {
display: flex;
}
.public {
width: 200px;
height: 200px;
background-color: gainsboro;
margin: 20px;
}
.tuozi div ul li {
width: 50px;
height: 50px;
background-color: #000000;
border-radius: 25px;
}
/* 一点 */
.tuozi .one {
display: flex;
justify-content: center;
align-items: center;
}
/* 两点 */
.tuozi .two ul {
display: flex;
height: 100%;
justify-content: space-between;
}
.tuozi .two ul li:nth-child(2) {
align-self: flex-end;
}
/* 三点 */
.tuozi .three ul {
display: flex;
height: 100%;
justify-content: space-between;
}
.tuozi .three ul li:nth-child(2) {
align-self: center;
}
.tuozi .three ul li:nth-child(3) {
align-self: flex-end;
}
/* 四点 */
.tuozi .four {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.touzi .four .line2{
/* align-items: flex-end; */
}
.tuozi .four div ul{
display: flex;
justify-content: space-between;
}
/* 五点 */
.tuozi .five{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tuozi .five .line2 ul{
display: flex;
justify-content: center;
}
.tuozi .five .line ul{
display: flex;
justify-content: space-between;
}
.tuozi .six{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tuozi .six .line ul{
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="tuozi">
<div class="one public">
<ul>
<li></li>
</ul>
</div>
<div class="two public">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="three public">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="four public">
<div class="line1">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
<div class="line2">
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="five public">
<div class="line1 line">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="line2">
<ul>
<li></li>
</ul>
</div>
<div class="line3 line">
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="six public">
<div class="line">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="line">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="line">
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>
练习二 两侧固定、中间自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.contain{
display: flex;
}
.fix{
width: 200px;
height: 200px;
background-color: yellow;
}
.center{
height: 200px;
flex-grow: 1;
background-color: pink;
}
</style>
</head>
<body>
<div class="contain">
<div class="fix"></div>
<div class="center"></div>
<div class="fix"></div>
</div>
</body>
</html>