• 3、flex弹性盒布局（flex:1?、水平垂直居中、三栏布局）

    一、flex布局

    任何一个容器都可以指定为 Flex 布局。块元素，行内元素即可。

    div{
      display: flex;
    }
    span{
      display: inline-flex;
    }

    注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 

    二、flex属性

    父容器属性

    1.justify-content 主轴对齐方式

    2. align-items 侧轴对齐方式 

     （弹性盒子在侧轴没有尺寸才能拉伸）

    3. flex-direction 修改主轴方向

    4.flex-wrap换行

    5.align-content 行的对齐方式 

    对单行弹性盒子不生效

    项目属性：

    flex:1？代表什么？

    flex-grow：1；flex-shrink:1; flex-basis:0%;

    表示子项目将会占用容器中所有可用的剩余空间，实现均匀分布。

    • flex-grow：1。代表项目将占用容器的剩余空间，并按比例进行分配。默认为0代表不会增长
    • flex-shrink:1。代表项目将在空间不足时按比例缩小。默认为1.
    • flex-basis:0%。代表初始大小为0。默认auto代表项目根据内容决定大小

    三、实现未知宽高元素水平垂直居中

    （1）flex布局

    父盒子开启flex弹性布局，设置justify-content: center;align-items: center;

    1.

    （2）绝对定位+位移+transform

    子绝父相。子向右下移动父元素的一半，再利用transform.

    top: 50%;left: 50%;  transform: translate(-50%,-50%);

    transform: translate(-50%, -50%);:

    translate 函数用于移动元素。负值表示向左（对于X轴）和向上（对于Y轴）移动。
    translate(-50%, -50%) 将元素向左移动其自身宽度的50%，并向上移动其自身高度的50%。
    由于元素已经通过 top 和 left 属性定位到了其父元素的中心线（水平和垂直），这个 transform 调用实际上是将元素的中心移动到这些中心线上，从而实现了真正的水平垂直居中。

    1. .container{
    2.             position: relative;
    3.             width: 100%;
    4.             height: 500px;
    5.             background-color: yellow;
    6.         }
    7.         .item{
    8.             position: absolute;
    9.             top: 50%;
    10.             left: 50%;
    11.             transform: translate(-50%,-50%);
    12.             width: 100px;
    13.             height: 100px;
    14.             background-color: green;
    15.         }

    （3）绝对定位+margin 

     子绝父相。设置子的top left bottom right都相等，margin设置为auto

    1. .container{
    2.             position: relative;
    3.             width: 500px;
    4.             height: 500px;
    5.             background-color: yellow;
    6.         }
    7.         .item{
    8.             position: absolute;
    9.             top: 0;
    10.             left: 0;
    11.             right: 0;
    12.             bottom: 0;
    13.             margin: auto;
    14.             width: 100px;
    15.             height: 100px;
    16.             background-color: green;
    17.         }

     （4）text-align 

    父盒子设置行高等于高，tex-talign：center.使得其水平居中

    子盒子开启display:inline-block,设置vertical-align:middle.使得行内块元素垂直居中。

    1.   .container{
    2.             line-height: 500px;
    3.             text-align: center;
    4.             width: 500px;
    5.             height: 500px;
    6.             background-color: yellow;
    7.         }
    8.         .item{
    9.             display: inline-block;
    10.             /* vertical-align用于行内元素的垂直对齐方式 */
    11.             vertical-align: middle;
    12.             width: 100px;
    13.             height: 100px;
    14.             background-color: green;
    15.         }

     四、三栏布局

    （1）flex布局

    body中按照左中右排列顺序。

    父盒子dispaly:flex，左右设置固定大小宽高，中间盒子flex1。

    1. <style>
    2.         .container{
    3.             display: flex;
    4.         }
    5.         .left{
    6.             width: 200px;
    7.             height: 200px;
    8.             background-color: yellow;
    9.         }
    10.         .middle{
    11.             flex: 1;
    12.            /*  height: 200px;*/
    13.             background-color: green;
    14.         }
    15.         .right{
    16.             width: 200px;
    17.             height: 200px;
    18.             background-color: blue;
    19.         }
    20.     style>
    21. head>
    22. <body>
    23.     <div class="container">
    24.         <div class="left">div>
    25.         <div class="middle">div>
    26.         <div class="right">div>
    27.     div>
    28. body>

    （2）圣杯布局

    1.按照中左右顺序排列。

    2.首先给这三个div都给一个float: left，让它们均左浮动。设置左右固定大小，中间宽度100%。这时左边盒子和右边盒子都在第一行。

    3.设置左盒子的margin-left: -100%，把左盒子拉上来，调整左盒子的浮动位置到中间盒子的左侧。再设置右盒子的margin-left: - 右盒子宽度px，把右盒子拉上来，调整右盒子的浮动位置到中间盒子的右侧。把两个盒子拉到第一行。

    4.此时的布局基本出来了，但是中间盒子的左右两侧会被左右两个盒子覆盖掉，此时我们要通过相对定位来避免覆盖。给左右盒子position: relative，再分别设置它们的left和right移动他们,并且控制父元素的padding来为左右两边留白。

    margin-left:-100%:往左边移动父元素宽度的100%

    margin-left:-200px :往左边移动负数  -宽度，能把第二行的拉到第一行最右边。

    1.     
    4.     <div class="container">
    5.         <div class="middle">div>
    6.         <div class="left">div>
    7.         <div class="right">div>
    8.     div>

     （3）双飞翼布局

    1.按照中左右顺序排列。

    2.首先给这三个div都给一个float: left，让它们均左浮动。设置左右固定大小，中间宽度100%。这时左边盒子和右边盒子都在第一行。

    3.设置左盒子的margin-left: -100%，把左盒子拉上来，调整左盒子的浮动位置到中间盒子的左侧。再设置右盒子的margin-left: - 右盒子宽度px，把右盒子拉上来，调整右盒子的浮动位置到中间盒子的右侧。把两个盒子拉到第一行。

    4.在双飞翼布局中，避免左右盒子被覆盖是通过设置中间盒子内部的inner-middle的左右margin来实现的。

    1.     
    3. <body>
    4.     <div class="container">
    5.         <div class="middle">
    6.             <div class="inner-middle">div>
    7.         div>
    8.         <div class="left">div>
    9.         <div class="right">div>
    10.     div>
    11. body>

    （4）float浮动

    排列顺序：左右中。

    左右设置固定大小和左右浮动，中间自适应overflow:hidden。（或者中间设置对应方向的margin值。

    4.     <div class="container">
    5.         <div class="left">div>
    6.         <div class="right">div>
    7.         <div class="center">div>
    8.     div>

    圣杯布局对比双飞翼布局

    双飞翼布局好处

    （1）主要的内容先加载的优化。

    （2）兼容目前所有的主流浏览器，包括IE6在内。

    （3）实现不同的布局方式，可以通过调整相关CSS属性即可实现。

    对比

    （1）都是左右栏定宽，中间栏自适应的三栏布局，中间栏都放到文档流前面，保证先行渲染。

    （2）解决方案基本相似：都是三栏全部设置左浮动float：left,然后分别解决中间栏内容被覆盖的问题。

    （3）解决中间栏内容被覆盖问题时，圣杯布局设置父元素的padding,双飞翼布局在中间栏嵌套一个div,内容放到新的div中，并设置margin，实际上，双飞翼布局就是圣杯布局的改进方案。

     （5）绝对定位布局 position+margin

    排列顺序：左右中

    子绝父相。左右两栏固定大小，设置绝对定位，设置右栏的位置利用top right。中间设置对应方向的marginleft right值。

    1.     
    3. <body>
    4.     <div class="container">
    5.         <div class="left">div>
    6.         <div class="right">div>
    7.         <div class="middle">div>
    8.     div>
    9. body>

     （6）Grid网格布局

    排列顺序：左中右

    .container{
                display: grid;
                width: 100%;
                /* 行高 */
                grid-template-rows: 100px;
                /* 列属性  左 中 右*/
                grid-template-columns: 300px auto 200px;
            }

    1.     
    3. <body>
    4.     <div class="container">
    5.         <div class="left">div>
    6.         <div class="middle">div>
    7.         <div class="right">div>
    8.     div>
    9. body>

  • 相关阅读:
    MindSpore社区群组介绍系列之二——SIG-DPP
    Android | 再探 RecyclerView 之名词解析
    WPF 截图控件之文字(七)「仿微信」
    [附源码]计算机毕业设计JAVA竞价拍卖系统
    Android：自定义原生TimePickerDialog样式
    C语言编译与链接过程详解
    【斗破年番】谣言不攻自破，萧潇造型曝光，制作进度已达中州，风尊者帅翻
    几行 Python 代码就可以提取数百个时间序列特征
    Linux基本指令（二）
    【Linux 之二】Ubuntu下开发环境的搭建（NFS \ SSH \ FTP \ Smba \ ...）
  • 原文地址：https://blog.csdn.net/m0_73560798/article/details/139392124