一篇文章学会Flex布局的基本使用｜ 8月更文挑战-阿里云开发者社区

一篇文章学会Flex布局的基本使用｜ 8月更文挑战

2021-11-16 124

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 一篇文章学会Flex布局的基本使用｜ 8月更文挑战

传统布局与Flex布局的区别

传统布局兼容性好，flex布局兼容性较差。
传统布局不能在移动端很好的布局，flex布局则适合在移动端布局。
传统布局布局较为繁琐，Flex布局较为简单。

flxe的布局原理

flex布局意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flxe布局。
当为父盒子设置flex布局之后，子元素的float、clear和vertical-align属性都将失效。
采用Flex布局的元素，称为Flex容器，简称容器，它的所有子元素自动成为容器成员，并称为Flex项目。

总结Flex布局原理：就是用过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

Flex布局常见的父项属性

分清主轴和侧轴

flex-direction设置主轴方向

这个属性的默认值是flex-start，假如不写就默认这个。

div {   
    display: flex;
    width: 800px;
    height: 300px;
    background-color: pink;
    /* justify-content: space-around; */
    justify-content: space-between;
    /* justify-content: space-around; */
}
复制代码

codeSandBox在线演示

flex-wrap设置子元素是否换行

在flex布局中默认是不换行的。

div {   
    display: flex;
    width: 600px;
    height: 400px;
    background-color: pink;
    flex-wrap: wrap;
}
复制代码

codeSandBox在线演示

align-items设置侧轴上的子元素排列方式（单行）

div {   
    display: flex;
    width: 600px;
    height: 400px;
    background-color: pink;
    justify-content: center;
    align-items: center;
}
复制代码

codeSandBox在线演示

align-content：设置侧轴上子元素的排列方式（适用于多行，这个属性在单行下是没有效果的）

div {   
    display: flex;
    width: 800px;
    height: 400px;
    background-color: pink;
    flex-wrap: wrap;
    /* align-content: flex-start; */
    /* align-content: flex-end; */
    align-content: space-between;
}
复制代码

codeSandBox在线演示

align-content和align-items的区别

section {
    display: flex;
    width: 60%;
    height: 150px;
    background-color: pink;
    margin: 0 auto;
}
section div:nth-child(1) {
    width: 100px;
    height: 150px;
    background-color: red;
}
section div:nth-child(2) {
    flex: 1;
    background-color: aqua;
}
section div:nth-child(3) {
    width: 100px;
    height: 150px;
    background-color: blue;
}