移动 WEB 开发布局方式 ---- flex 布局

一、flex布局体验

1.1 传统布局 flex 布局

1. 2 初体验

1. 搭建 HTML 结构

<div>

    <span>1</span>

    <span>2</span>

    <span>3</span>

</div>

2. 添加样式

<style>

    div {

        width: 80%;

        height: 300px;

        background-color: pink;

        display: flex;

        justify-content: space-around;

    }

    div span {

        width: 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 {

        width: 80%;

        height: 300px;

        background-color: pink;

        /*给父级添加 flex 属性*/

        display: flex;

    }

    div span {

        width: 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 {

        width: 60%;

        height: 300px;

        background-color: pink;

        display: flex;

        /*justify-content:是设置主轴上元素的排列方式*/

        /*默认从左到右排列*/

        /*justify-content: flex-start;*/

    }

    div span {

        width: 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 {

        width: 500px;

        height: 300px;

        background-color: pink;

        display: flex;

    }

    div span {

        width: 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 {

        width: 800px;

        height: 300px;

        background-color: pink;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    div span {

        width: 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 {

        width: 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;

        width: 80%;

        height: 150px;

        /*background-color: green;*/

    }

    section div:nth-child(1){

        width: 100px;

        height: 150px;

        background-color: pink;

    }

    section div:nth-child(2){

        flex: 1;

        background-color: purple;

    }

    section div:nth-child(3){

        width: 100px;

        height: 150px;

        background-color: orange;

    }

</style>

<body>

<section>

    <div></div>

    <div></div>

    <div></div>

</section>

</body>

左右两侧是固定的,中间是自适应的

栗子2：

 p {

        width: 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 {

        width: 60%;

        height: 300px;

        background-color: pink;

        display: flex;

    }

    div span{

        width: 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个盒子的前面

五、携程网首页制作

https://blog.csdn.net/qq_45103612/article/details/111146551