Flex弹性盒子布局

一、弹性盒子布局快速预览

display: flex;
如果这个容器中的内容要使用FlexBox布局，第一步就是将这个容器转为弹性盒子
一旦将父元素转为弹性容器，内部的子元素就会自动成为：弹性项目
不管这个项目标签之前是什么类型，统统转为“行内块”
行内：全部在一排显示
块：可以设置宽和高
盒子的多行容器
1.flex-wrap: wrap;换行显示，多行排列
单行容器中的对齐方式
一、容器剩余空间在所有项目两边如何分配，将全部项目视为一个主体
1.justify-content: start;左对齐

2.justify-content: end;右对齐

3.stify-content: center;中间对齐

二、容器剩余空间在所有项目之间如何分配，将项目视为一个个独立的个体
1.justify-content: space-between;两端对齐

2.justify-content: space-around;分散对齐：剩余空间在所有项目的两边平均分配

3.justify-content: space-evenly;平均分配，项目之间的间距相等
多行容器中的对齐方式
一、容器剩余空间在所有项目两边如何分配，将全部项目视为一个主体
1.align-content: flex-start;多行上对齐

2.align-content: flex-end;多行下对齐

3.align-content: center;多行中对齐

二、容器剩余空间在所有项目之间如何分配，将项目视为一个个独立的个体
1.align-content:space-between;两端对齐

2.align-content: space-around;分散对齐：剩余空间在所有项目的两边平均分配

3.align-content: space-evenly;平均分配，项目之间的间距相等
主轴为垂直方向的项目排列
主轴方向：默认为行
1.flex-direction: row;行
2.flex-direction: column;列

快速撸一个导航

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex容器属性实战：快速撸一个导航</title>
</head>
<style>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
    color: #cccccc;
}
nav{
    height: 40px;
    background-color: #333;
    padding: 0 50px;
    display: flex;
}
nav a{
    height: inherit;
    line-height: 40px;
    padding: 0 15px;
}
nav a:hover{
    background-color: seagreen;
    color: white;
}
nav a:last-of-type{
    margin-left: auto;
}
</style>
<body>
<header>
    <nav>
<a href="">首页</a>
<a href="">教学视频</a>
<a href="">社区问答</a>
<a href="">资源下载</a>
<a href="">登录/注册</a>
</nav>
</header>
</body>
</html>

一、弹性盒子布局快速预览

盒子的多行容器

单行容器中的对齐方式

多行容器中的对齐方式

主轴为垂直方向的项目排列

快速撸一个导航

相关文章