<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
样式
<style>
.wrap {
width: 400px;
height: 200px;
background-color: pink;
/* 设置弹性容器 */
display: flex;
/* 设置弹性元素排列方向 */
/* flex-direction: column-reverse; */
/* flex-direction: row-reverse; */
/* 设置主轴空白空间的分布 */
justify-content: center;
/* justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly; */
align-items: center;
align-items: flex-end;
/*错误的属性值
align-items: space-between; */
flex-wrap: wrap-reverse;
align-content: center;
align-content: space-around;
}
.wrap>div {
height: 30px;
width: 100px;
border: 1px solid #00f;
}
.content {
/* width: 300px; */
width: 500px;
height: 200px;
background-color: aqua;
margin: 50px auto;
display: flex;
}
.content>div {
/* width: 80px; */
width: 150px;
height: 80px;
border: 2px solid #f00;
}
.content>.item2 {
flex-grow: 1;
/* width: 40px; */
flex-shrink: 2;
order: 2;
}
.content>.item1 {
order: 3;
flex-basis: 100px;
flex-grow: 1;
}
</style>
</head>
内容
<body>
<!--
弹性容器:元素设置display: flex;
弹性元素:弹性容器的子元素
主轴:弹性元素的排列方向
辅轴:垂直于主轴
注意:一个元素既可以是弹性容器,也可以是弹性元素
弹性盒子是代替浮动
-->
<!-- 弹性容器里面设置
1.设置弹性元素的在弹性容器排列方向:
flex-direction
取值:column 垂直方向 自上向下
column-reverse 自下向上
row 水平方向 自左向右 默认值
row-reverse 自右向左
2.设置主轴空白空间的分布:
justify-content
取值:
center: 是弹性元素在主轴居中显示
flex-start:是弹性元素在主轴开始处排列
flex-end:是弹性元素在主轴结束处排列
space-between:是空白空间平均分布在弹性元素之间,弹性元素与弹性容器之间没有距离
space-around:是空白空间平均分布在弹性元素二侧,弹性元素与弹性容器之间有距离
space-evenly:是空白空间平均分布在弹性元素一侧,弹性元素与弹性容器之间有距离
3.设置弹性元素在辅轴的排列方式 辅轴单行或单列
align-items
取值:
center 辅轴居中
flex-end 辅轴结束
flex-start 辅轴开始
4.设置弹性元素是否转行
flex-wrap
取值:
nowrap 默认值 不转行
wrap 转行
wrap-reverse 反向转行
5.设置辅轴空白空间的分布:
align-content
取值:
center: 是弹性元素在辅轴居中显示
flex-start:是弹性元素在辅轴开始处排列
flex-end:是弹性元素在辅轴结束处排列
space-between:是空白空间平均分布在弹性元素之间,弹性元素与弹性容器之间没有距离
space-around:是空白空间平均分布在弹性元素二侧,弹性元素与弹性容器之间有距离
space-evenly:是空白空间平均分布在弹性元素一侧,弹性元素与弹性容器之间有距离
-->
<!-- 弹性元素
1.设置弹性元素扩大系数,当弹性容器的主轴宽度>弹性元素时,
注意:弹性元素实际占用空间与系数和基础长度有关
flex-grow:默认值0
2.设置弹性元素缩小系数,当弹性容器的主轴宽度<弹性元素时,
注意:弹性元素实际占用空间与系数和基础长度有关
flex-shrink:默认值0
3.设置弹性元素的顺序
order 值越大,排在后面
注意:设置order属性的弹性元素在没有设置order属性大弹性元素后面排列
4,
-->
<div class="wrap">
<div class="div1">lorem1</div>
<div class="div2">lorem2</div>
<div class="div3">lorem3</div>
<div class="div1">lorem4</div>
<div class="div2">lorem5</div>
<div class="div3">lorem6</div>
<div class="div1">lorem7</div>
<div class="div2">lorem8</div>
<div class="div3">lorem9</div>
</div>
<div class="content">
<div class="item1">lorm1</div>
<div class="item2">lorm2</div>
<div class="item3">lorm3</div>
</div>
</body>
</html>