一、flex布局体验
1.1 传统布局 flex 布局
1. 2 初体验
1. 搭建 HTML 结构
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
2. 添加样式
<style>
div {
80%;
height: 300px;
background-color: pink;
display: flex;
justify-content: space-around;
}
div span {
150px;
height: 100px;
background-color: purple;
margin-right: 5px;
}
</style>
在 div中 添加 display: flex; justify-content: space-around;
并且是自适应的效果
在 span 中添加 flex:1;，可以实现三等分
二、 flex 布局原理
2.1 布局原理
注意：不管是块级元素，还是行内元素，都可以使用 flex 布局
三、flex布局父项常见属性
3.1 常见父项属性
3.2 flex-direction 设置主轴的方向
1.主轴与侧轴
2. 属性值
栗子：
<style>
div {
80%;
height: 300px;
background-color: pink;
/*给父级添加 flex 属性*/
display: flex;
}
div span {
150px;
height: 100px;
background-color: purple;
margin-right: 5px;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
默认就是 默认的主轴就是 x 轴 行 row
flex-direction:row;
那么 y 轴就是 侧轴
我们的元素是跟着主轴来排列的
x 轴翻转： flex-direction: row-reverse;
我们可以把主轴弄成 y 轴，那么 x 轴就成为了 侧轴
flex-direction: column;
flex-direction: column-reverse;
3.3 justify-content 设置主轴上的排列方式
注意：只跟主轴来走，跟侧轴没有关系
栗子:
<style>
div {
60%;
height: 300px;
background-color: pink;
display: flex;
/*justify-content:是设置主轴上元素的排列方式*/
/*默认从左到右排列*/
/*justify-content: flex-start;*/
}
div span {
150px;
height: 100px;
background-color: purple;
margin-right: 5px;
margin-bottom: 5px;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
-
让子元素从尾部(从右到左或者从下往上)排列
justify-content: flex-end;
-
让我们的子元素居中对齐
justify-content: center;
-
平方剩余空间
justify-content: space-around;
每个子元素的 margin-left 和 margin-right 都是相等的
- 先两边贴边,再分配剩余的空间
justify-content: space-between;
5. 设置主轴为 Y 轴并且沿 Y 轴 垂直居中
flex-direction: column;
justify-content: center;
3.4 flex-wrap 设置子元素是否换行
栗子:
<style>
div {
500px;
height: 300px;
background-color: pink;
display: flex;
}
div span {
150px;
height: 100px;
background-color: purple;
margin-right: 5px;
margin-bottom: 5px;
}
</style>
注意: 在 flex 布局中,默认子元素是不换行的,如果子元素添加的话,父元素装不下子元素,会缩小子元素的宽度,放到父元素里面
默认是flex-wrap : nowrap
让子元素换行显示: flex-wrap: wrap;
3.5 align-items设置侧轴上的子元素排列方式(单行)
栗子:
- 实现水平居中和垂直居中(前提是主轴是默认的 x 轴)
<style>
div {
800px;
height: 300px;
background-color: pink;
display: flex;
justify-content: center;
align-items: center;
}
div span {
150px;
height: 100px;
background-color: purple;
margin: 10px;
}
</style>
-
align-items: flex-start;
-
align-items: flex-end;
-
如果设置主轴是 y 轴的话
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
-
拉伸,但是子元素不给高度,不然是没有效果的
align-items: stretch;
3.6 align-content 设置侧轴上的子元素的排列方式(多行)
栗子:
- 设置
align-content: flex-start;
div {
600px;
height: 300px;
background-color: pink;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
-
设置
align-content:center
-
设置
align-content: space-between;
-
设置
align-content: space-around;
3. 6 align-items 与 align-content 的区别
3.7 flex-flow
栗子:
flex- flow: column wrap
就相当于同时设置了
flex-wrap: wrap; 和 flex-direction: column;
四、flex 布局子项常见属性
4.1 flex 属性
栗子:
<style>
section {
display: flex;
80%;
height: 150px;
/*background-color: green;*/
}
section div:nth-child(1){
100px;
height: 150px;
background-color: pink;
}
section div:nth-child(2){
flex: 1;
background-color: purple;
}
section div:nth-child(3){
100px;
height: 150px;
background-color: orange;
}
</style>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
左右两侧是固定的,中间是自适应的
栗子2：
p {
80%;
height: 150px;
margin: 50px auto;
background-color: pink;
display: flex;
}
p span{
flex: 1;
}
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
注意：不给子项宽度,默认剩余宽度就是父盒子的宽度
栗子3：
p span{
flex: 1;
}
p span:nth-child(2){
background-color: purple;
flex: 2;
}
并且三个span都可以进行自适应
4.2 align-self 控制子项自己在侧轴上的排列方式
栗子：
<style>
div {
60%;
height: 300px;
background-color: pink;
display: flex;
}
div span{
150px;
height: 100px;
background-color: purple;
margin-right: 5px;
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
我们想要 第三个盒子在下面底侧
div span:nth-child(3){
align-items: flex-end
}
4.3 order 属性定义项目的排列顺序
栗子：
div span:nth-child(2){
order: -1;
}
第2个盒子与第1个盒子交换了，order默认是0，这里设置了-1 ，所以第2个盒子跑到了第1个盒子的前面