弹性盒子:flex布局
- 弹性盒子是一种布局方式
- 特点:改变元素的排列方式
- 采用flex布局的元素:称为flex容器,简称“容器”。它的所有子元素自动成为容器成员,成为flex项目(简称“项目”)
- 弹性盒子中的项目可以是块级元素、行内元素、行内块级元素
- 并且行内元素在弹性盒子中可以设置宽高
- display:inline-flex :转成行内弹性盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
.box{
width: 400px; height: 400px; background: bisque;
margin: 50px auto; overflow: hidden;
/* 转成弹性盒子 */
display: flex;
}
.zxw{
width: 120px; height: 50px; line-height: 50px;
background: red; text-align: center; color: #fff;
margin-top: 10px;
}
</style>
</head>
<body>
<ul class="box">
<li class="zxw">zxw1</li>
<li class="zxw">zxw2</li>
<li class="zxw">zxw3</li>
</ul>
</body>
</html>
主轴、交叉轴方向
x轴称为主轴;y轴称为交叉轴
flex-direction:row | column | row-reverse | column-reverse;
:定义弹性元素排列方向及顺序
- row:默认值;表示主轴是水平正向
- column:表示主轴是垂直正向
- row-reverse:表示主轴是水平方向
- column-reverse:表示主轴是垂直方向
换行、及换行方式
flex-wrap: nowrap | wrap | wrap-reverse;
:定义是否换行,换行方式都是交叉轴方向
- nowrap:默认值;不换行
- wrap:换行;默认交叉轴正向换行
- flex-wrap:换行;交叉轴反向换行
主轴方向对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
:子元素在主轴方向上的对齐方式
- flex-start:默认值;开始方向对齐
- flex-end:结束方法对齐
- center:居中对齐
- space-between:两端对齐,项目之间的间隔都相等
- space-around:项目会平均地分布在行里,两端保留项目与项目之间间距大小的一半
交叉轴方向对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
:子元素在交叉轴方向上的对齐方式
- flex-start:开始方向对齐
- flex-end:结束方法对齐
- center:居中对齐
- baseline:项目的第一行文字的基线对齐
- stretch:默认值;如果项目没设置高度或设为auto,将占满整个容器的高度
多行内容在交叉轴上对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around | stretch;
:多行子元素在交叉轴方向上的对齐方式
- flex-start:开始方向对齐
- flex-end:结束方法对齐
- center:居中对齐
- space-between:两端对齐,项目之间的间隔都相等
- space-around:项目会平均地分布在行里,两端保留项目与项目之间间距大小的一半
- stretch:默认值;会拉伸容器内每一个项目占用空间,填充方式为给每个项目下方增加空白,占满整个交叉轴
设置弹性元素的顺序
order:默认值0
- 元素按照order属性的值增序进行布局
- 值越小排列越靠前,拥有相同order属性值的元素按照它们在源代码中出现的顺序进行布局
弹性元素的扩展比率
flex-grow:0
:默认值为0;设置弹性元素的扩展比率来分配剩余空间
弹性元素的收缩比率
flex-shrink:1
:默认值为1;设置弹性元素的收缩比率来收缩空间
- 多出来的尺寸
- 总权重:元素1尺寸 * 收缩比率 + 元素2尺寸 * 收缩比率…
- 收缩空间:元素尺寸 * 收缩比率 * 多出来的尺寸 / 总权重
最大和最小宽高度
max-width:定义元素最大宽度
该属性值会对元素的宽度设置一个最大限制。因此,元素可以比指定值窄,但不能比其宽。不允许指定负值
min-width:定义元素最小宽度
该属性值会对元素的宽度设置一个最小限制。因此,元素可以比指定值宽,但不能比其窄。不允许指定负值
max-height:定义元素最大高度
该属性值会对元素的高度设置一个最大限制。因此,元素可以比指定值矮,但不能比其高。不允许指定负值
min-height:定义元素最小高度
该属性值会对元素的高度设置一个最小限制。因此,元素可以比指定值高,但不能比其矮。不允许指定负值