【HTML+CSS】移动端布局之flex布局

学习视频及笔记参考来源：

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

---

一、flex布局原理

1、概念

flex ( flexible Box ) ，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

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

2、布局原理

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

3、Flex 容器

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

1、flex父容器：div；flex项目：span。

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

2、子容器可以横向排列也可以纵向排列。

二、flex 布局父项常见属性

1、常见父项属性

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

2、 flex-direction — 设置主轴的方向

2.1 主轴与侧轴

• 在 flex 布局中，是分为主轴和侧轴两个方向。
• 默认主轴方向为 x 轴方向，默认侧轴方向为 y 轴方向。

2.2 属性值

• flex-direction 属性决定主轴的方向（即项目的排列方向）。

 3、justify-content — 设置主轴上的子元素排列方式

• justify-content 属性定义了项目在主轴上的对齐方式，使用这个属性之前一定要确定好主轴是哪个。

将所有的方式都写了一下，默认以x轴为主轴，如下：

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

• 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的，若元素装不下，将会自适应调整宽或高，如下：