如何深入理解弹性布局，小司机娓娓道来！

最新推荐文章于 2021-12-09 16:54:36 发布

小猫爱摸鱼

最新推荐文章于 2021-12-09 16:54:36 发布

阅读量158

点赞数

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/Wsh20210301/article/details/115218533

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

弹性布局（Flex）

## 弹性盒子（父级）

弹性布局

父级  叫做弹性容器
子级  叫做弹性元素

下面七种样式都是在父级容器（弹性容器）里面设置的

1.定义弹性盒子
    display：flex
2.用于控制弹性盒子里面的弹性元素排列的方向
    flex-direction
        row从左到右   row-reverse从右到左  column从上到下 column-reverse从下到上
3.规定是单行还是多行
    flex-wrap
        nowrap 默认 元素不拆行或不拆列
        wrap   必要的时候拆行或拆列
        wrap-reverse 必要的时候拆行或拆列，但是拆的方向是相反的
4.flex-flow
    flex-wrap和direction的结合体
轴的概念
    主轴   交叉轴  
5.控制元素在主轴上的排列方式
    justify-content 
        flex-start      紧靠开头
        flex-end        紧靠结尾
        center          居中
        space-between   第一个元素紧靠七点第二个元素紧靠重点 其他空间由其他元素平均分配
        space-around    每个元素两侧的间距相等
        space-evenly    元素间距距离平均分配
6.控制元素在交叉轴上的排列方式
    align-items
        stretch   元素被拉伸以适应容器（没有设置固定的行高或者大于高度字体大小）
        center    位于容器的中心
        flex-start  紧靠交叉轴的开头
        flex-end     紧靠交叉轴的结尾
7.适用于多行用于控制行而不是元素在交叉轴的排列方式
    align-content
        flex-start      每一行紧靠交叉轴开始位置
        flex-end        每一行紧靠交叉轴的结束位置
        center          居中  紧靠交叉轴的中间位置
        space-between   第一行紧靠起点最后一行紧靠终点 其他空间由其他行平均分配
        space-around    每行两侧的间距相等
        space-evenly    每行间距距离平均分配

下面的都是在弹性元素里面的写的放在弹性的盒子里面的元素都叫弹性元素注意：不用使用float和clear规则弹性元素都为块级元素绝对定位不参与弹性布局

## 弹性元素（子级）
1.align-self
用来设置单个元素在交叉轴的排列方式
stretch 默认方式平均分配
flex-start 单个元素紧靠交叉轴的开始位置
flex-end center
2.flex-grow
用于将弹性盒子的可用空间，分配给弹性元素
3.flex-shrink
装不下的时候定义的缩小值 0 1 2 3 …
3.flex-basis
定在了在在分配多余空间之间项目占据的主轴空间
优先级更高的width
4.order
调整元素的位置

下面用图示来讲一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            /* width: 1200px; */
            height: 300px;
            border: 3px solid gold;
            display: flex;
            flex-flow:row nowrap;
            justify-content: start;
            margin-top: 150px;
            /* stretch    元素被拉伸以适应容器 */
            
            /* align-content: space-evenly; */
            /* align-items: space-between; */
        }
        .father div{
            width: 250px;
            height: 100px;
            border: 2px solid pink;
            text-align: center;
            line-height: 100px;
            font-size: 40px;
        }
        .father div:nth-of-type(1){ 
            align-self: flex-start;
            width: 240px;
            flex-grow: 1;
            flex-shrink: 0;
             order: 4;
         } 
         div:nth-of-type(2){ 
            align-self: flex-start;
            flex-grow: 3;
            flex-shrink: 1;
            order: 3;
        }
        div:nth-of-type(3){
            align-self: flex-start;
            flex-grow: 5;
            flex-shrink: 4;
        }
        div:nth-of-type(4){
            align-self: flex-start;
            flex-grow: 7;
            flex-shrink: 4;
        }
    </style>
</head>
<body>
    <div class="father">
        <div>div1</div>
        <div>div2</div>
        <div>div3</div>
        <div>div4</div>
    </div>
</body>
</html>

沿着X主轴排列的几种情况：

justify-content
flex-start 紧靠开头
flex-end 紧靠结尾
center 居中
space-between 第一个元素紧靠七点第二个元素紧靠重点其他空间由其他元素平均分配
space-around 每个元素两侧的间距相等
space-evenly 元素间距距离平均分配在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
控制元素在交叉轴上的排列方式

   align-items
        stretch   元素被拉伸以适应容器（没有设置固定的行高或者大于高度字体大小）
        center    位于容器的中心
        flex-start  紧靠交叉轴的开头
        flex-end     紧靠交叉轴的结尾

在这里插入图片描述
## 弹性元素（子级）

1.align-self
    用来设置单个元素在交叉轴的排列方式
        stretch  默认方式平均分配
        flex-start   单个元素紧靠交叉轴的开始位置
        flex-end   center
2.flex-grow
    用于将弹性盒子的可用空间，分配给弹性元素
3.flex-shrink
    装不下的时候定义的缩小值  0 1 2 3 ....
3.flex-basis
    定在了在在分配多余空间之间项目占据的主轴空间
    优先级更高的width
4.order
    调整元素的位置

在这里插入图片描述
总结：总之在了解弹性布局的各项元素之后，还是要将弹性布局放到实际案例中去，结合实际来用，作用不可小觑，我们主要用上面详细介绍的父级容器的排列方式，这个以后用的挺多的，子级元素用的比较少，大家了解一下即可不需要深究！