移动WEB开发之flex布局

flex布局

学习目标

• 能够说出flex盒子的布局原理
• 能够使用flex布局的常用属性

学习目录

• flex 布局体验
• flex 布局原理
• flex 布局父项常见属性
• flex 布局子项常见属性
• 2021-3-5新增记录：项目的属性

flex布局体验

传统布局与flex布局

传统布局的特点

• 兼容性好
• 布局繁琐
• 局限性，不能在移动端很好的布局

flex弹性布局

• 操作方便，局部极为简单，移动端应用很广泛
• PC端浏览器支持情况较差
• IE11 或更低版本，不支持或仅部分支持

建议：
1.如果是PC端页面布局，还是使用传统布局
2.如果是移动端或者不考虑兼容性问题的PC端页面布局，还是考虑使用flex弹性布局

flex初体验

做一个这样的布局

搭建HTML结构

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

搭建CSS结构

使用span是因为span为行内元素，默认是不改变大小宽度的，这样使用了flex布局效果更加明显

效果1

display: flex;

就从

变为了

效果2

再加一句话

justify-content: space-around;

就能变成

并且还有自适应效果

效果3

更改span的代码后

div span {
    /* width: 150px; */
    height: 150px;
    background-color: purple;
    margin-right: 5px;
    /* 新增 */
    flex: 1;
}

可以平均分成三等分

flex布局原理

布局原理

flex是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

• 当我们把父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动称为容器成员，称为Flex项目（flex item），简称“项目”。

• 体验中div就是flex父容器
• 体验中span就是子容器flex项目
• 子容器可以横向排列也可以纵向排列

总结flex布局原理：

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex布局父项常见属性

常见父项属性（主要）

以下6个属性是对父元素设置的

• flex-direction: 设置主轴方向
• justify-content: 设置主轴上的子元素排列方式
• flex-wrap: 设置子元素是否换行
• align-content: 设置侧轴上的子元素排列方式（多行）
• align-items: 设置侧轴上的子元素排列方式（单行）
• flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap

flex-direction 设置主轴的方向

主轴与侧轴

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

• 默认主轴方法就是x轴方向，水平向右
• 默认侧轴方法就是y轴方向，水平向下

属性值

flex-direction 属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的（默认是设置x轴为主轴）

div {
    /* 给父级添加flex属性 */
    display: flex;
    width: 800px;
    height: 300px;
    background-color: pink;
    /* 默认的主轴是x轴，行row，那么y轴就是侧轴*/
    /* 下为默认可写可不写 */
    /* 我们的元素是跟着主轴来排列的 */
    flex-direction: row;
    /* flex-direction: row-reverse; 翻转排列不重要 */
    /*