Java教程

flex布局归纳大全-弹性盒模型详解

本文主要是介绍flex布局归纳大全-弹性盒模型详解，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

第十六章：flex布局-弹性盒模型

  • 前言
  • 一、弹性盒模型
    • 1.开启（使用）弹性和模型
    • 2.弹性盒模型的默认排列方式
  • 二、弹性盒模型父级的一些属性
    • 1.flex-wrap 控制子元素换行
    • 2.flex-direction 控制子元素的排列方向
    • 3.justify-content 控制子元素在主轴的对齐方式
    • 4. align-items 控制子元素在副轴的对齐方式
    • 5. align-content 控制子元素行与行之间的对齐方式
  • 三、弹性盒模型子级的一些属性
  • 四、使元素在父级居中的方法归纳
  • 总结

前言

在前面我们学过的页面布局主要依靠元素类型（块级、行内、行内块）、定位、浮动等结合margin来进行页面排列布局，有时候需要计算元素的宽高等问题。而使用flex弹性盒模型布局就可以有效地规避这些问题。

一、弹性盒模型

flex弹性盒模型布局，可以提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是

1.开启（使用）弹性和模型

在父级样式中添加： display: flex; 或者 display: inline-flex; 。其子元素则可按照弹性盒模型的规则进行布局。
在这里插入图片描述

2.弹性盒模型的默认排列方式

  • 默认自左到右横向排列，不换行；
  • 注意：当子级宽度和超过父级宽度时，将会等比例缩放各个子级的宽度。高度不受影响
<style>
        .wrap{
            /* 父级开启弹性盒模型 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
        }
        .wrap div{
            width: 350px;
            height: 350px;
            border: 1px solid rebeccapurple;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>

效果图：
在这里插入图片描述

二、弹性盒模型父级的一些属性

这些属性必须是写在父级样式中，对子级生效的

1.flex-wrap 控制子元素换行

flex-wrap属性决定子元素主轴摆放不下的时候，项目换不换行，默认不换行。

  • none ，默认值，不换行；（摆放不下按比例缩放）
  • wrap，换行，第一排在最前；
  • wrap-reverse，换行，最后一排在最前。

在这里插入图片描述

2.flex-direction 控制子元素的排列方向

  • 子元素沿主轴方向，横向排列
  • row ，默认值，水平方向从左到右横向排列；
  • row-reverse，水平方向从右到左横向排列；
  • 子元素沿侧轴方向，纵向排列
  • column，垂直方向从上到下纵向排列；
  • column-reverse，垂直方向从下到上纵向排列。
  • flex-flow 复合写法

flex-flow属性是flex-direction和flex-wrap的缩写。
默认值为flex-flow: row none;。

在这里插入图片描述

3.justify-content 控制子元素在主轴的对齐方式

justify-content属性定义子元素在主轴（水平方向）的对齐方式。

  • flex-start，默认值，起点对齐，即左对齐；
  • flex-end，终点对齐，即右对齐；
  • center，水平居中对齐
  • space-between，两端对齐，中间间隔分均分配；
  • space-around，所有间隔分均分配，相邻间隔会被叠加。
  • space-evenly，所有间隔均匀分配

在这里插入图片描述

4. align-items 控制子元素在副轴的对齐方式

align-items属性定义子元素在副轴（垂直方向）的对齐方式。

  • flex-start，副轴起点对齐，即从上往下对齐；
  • flex-end，副轴终点对齐，即从下往上对齐；
  • center，垂直居中对齐；
  • baseline，文本基线对齐
  • stretch，默认值，子元素如果没有设置高度(宽度)，占满整个容器。（如果全部子元素都有设置高度值，则表现和flex-start一致。）

在这里插入图片描述

5. align-content 控制子元素行与行之间的对齐方式

align-content属性定义多主轴之间（也就是换行后行与行之间）的对齐方式。所以，如果子元素没有换行，这个属性就不起作用。

  • flex-start，副轴起点对齐；
  • flex-end，副轴终点对齐；
  • center，副轴居中对齐；
  • space-between，副轴两端对齐，中间平均分配；
  • space-around，每行之间间距平均分配，相邻间隔会被叠加；
  • space-evenly，所有间隔均匀分配
  • strecth，默认值，如果子元素没有设置高度，则占满对应主轴。（其余5个值中，没有设置高度的，则子该元素高度=该行最高的高度+行距）
    在这里插入图片描述

三、弹性盒模型子级的一些属性

这些属性是写在子级本身上，是可以自己定义自己的（前提是父级中有flex属性）。

  • order
    order属性定义子元素（视觉上）的展示顺序，值为一个数字，越小越优先摆放。

  • flex-grow
    flex-grow属性用于规定 主轴有剩余空间时 子元素增大的分配比例，默认为0，即不增大。
    在这里插入图片描述

  • flex-shrink
    flex-shrink属性用于规定 主轴空间不足时 子元素缩小的分配比例，默认为1，即分均分配来缩小。
    在这里插入图片描述

  • flex-basis
    flex-basis属性定义在分配空间之前，子元素占据的主轴空间大小。默认值auto即元素本来的大小。

  • flex
    flex属性是flex-grow flex-shrink flex-basis的简写，默认值就是这三者的默认值flex: 0 1 auto;。最少需要写一个值，后两个值省略。
    flex有两个特殊值，auto相当于1 1 auto，none相当于0 0 auto。
    推荐使用优先使用这个属性，而不是单独写三个分解属性，因为浏览器会自动推算相关值。

  • align-self
    align-self属性允许子元素自己规定自己的对齐方式。该属性默认继承父级的align-items，可以通过修改各自的align-self实现各个子元素不同的对齐方式。其属性值同 align-items。

四、使元素在父级居中的方法归纳

  1. 直接用外边距margin
  2. 定位法：点击此处移步，第十一章的第4点
  3. 平移
  4. flex布局
    display: flex;
    justify-content: center;
    align-items: center;

总结

上述是小编为大家整理的flex盒模型布局的各种排列方式等结合相关案例做了一个比较详细的讲解，父级有哪些属性，子级有哪些属性，还是归纳的比较全面；最后结合前面学过的知识，总结了4种可以让子元素在父级居中的方法。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。

这篇关于flex布局归纳大全-弹性盒模型详解的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航