居中布局与Flex

居中布局

水平居中

• text-align: center设置块元素或表格单元格中内容的水平对齐方式。这意味着它像vertical-align一样工作，但在水平方向。不能直接用于行内元素 ，另外，这个内容不一定是行内元素，块元素中有h1(块元素)一样可以实现效果。
• margin: 0 auto
• absolute + transform
• flex + justify-content: center

垂直居中

• line-height: 父元素height（基线之间的距离，行距=line-height-font-size，推荐在设置 line-height 时使用无单位数值）注意子元素是否存在margin。适合文本。

  

• vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。使行内元素盒模型与其行内元素容器垂直对齐/垂直对齐表格单元内容。不能用它垂直对齐块级元素。

• absolute + transform

• flex + align-items: center

• table、grid

水平垂直居中

HTML

<div class="wp">
    <div class="box size">123123</div>
</div>

公共代码

/* 公共代码 */
.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}

.box {
    background: green;    
}

.box.size{
    width: 100px;
    height: 100px;
}

• absolute + 负margin

.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

• absolute + margin auto

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

• absolute + transform

top,left跟根据父元素的宽和高偏移的。

transform: translate(-50%, -50%);是根据自身的宽高偏移的。

注意子元素是否存在margin。

.wp{
  position: relative;  
 
}     
.center{
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}  

• flex + justify-content + align-items

目前在移动端已经完全可以使用flex了，PC端需要看自己业务的兼容性情况。

.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}

但对子元素图片、文字都有时，竖直方向的对齐会有差异，可以父元素开启Flex布局，图片子元素设置align-self: center;，文字子元素使用line-height。

• 网格布局（Grid）是最强大的 CSS 布局方案。

下面是4种使用grid实现水平垂直居中的例子。

方法一：

.box {
    display: grid;
    justify-items: center;
    align-items: center;
}

方法二：

.box {
    display: grid;
}
.small {
    justify-self: center;
    align-self: center;
}

方法三：

.box {
    display: grid;
    justify-items: center;
}
.small {
    align-self: center;
}

方法四：

.box {
    display: grid;
    align-items: center;
}
.small {
    justify-self: center;
}

Flex

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为Flex布局

基本概念

采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。

其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。

• main start/main end：主轴开始位置/结束位置；
• cross start/cross end：交叉轴开始位置/结束位置；
• main size/cross size：单个项目占据主轴/交叉轴的空间；

容器属性

flex-direction

决定主轴的方向（即项目的排列方向）

.box {
   flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认）：主轴水平方向，起点在左端；
• row-reverse：主轴水平方向，起点在右端；
• column：主轴垂直方向，起点在上边沿；
• column-reserve：主轴垂直方向，起点在下边沿。

flex-wrap

定义换行情况

默认情况下，项目都排列在一条轴线上，但有可能一条轴线排不下。

.box{
   flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（默认）：不换行；
• wrap：换行，第一行在上方；
• wrap-reverse：换行，第一行在下方。

flex-flow

flex-direction和flex-wrap的简写，默认row nowrap

.box{
    flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content

定义项目在主轴上的对齐方式。

对齐方式与轴的方向有关，本文中假设主轴从左到右。

.box {
   justify-content: start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline;
}

• flex-start（默认值）：左对齐；

• flex-end：右对齐；

• center：居中；常用作水平居中

• space-between：两端对齐，项目之间间隔相等；

• space-around：每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍。

align-items

定义在交叉轴上的对齐方式

对齐方式与交叉轴的方向有关，假设交叉轴从上到下。

.box{
    align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start：起点对齐；
• flex-end：终点对齐；
• center：中点对齐；常用作垂直居中
• baseline：项目的第一行文字的基线对齐；
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content

定义多根轴线的对齐方式

如果项目只有一根轴线，该属性不起作用。
所以，容器必须设置flex-wrap：···；

.box{
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start：与交叉轴的起点对齐；

• flex-end：与交叉轴的终点对齐；

• center：与交叉轴的中点对齐；

• space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布；

• space-around：每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍；

• stretch（默认值）：轴线占满整个交叉轴。

项目的属性

flex

==flex-grow，flex-shrink和flex-basis的简写==

默认值为0 1 auto，第一个属性必须，后两个属性可选。

可以用 flex:auto; 代替 flex: 1 1 auto;；可以用 flex: none;代替 flex: 0 0 auto；

flex-grow

定义项目的放大比例（容器宽度>元素总宽度时如何伸展）

默认值为0，即如果空间有剩余，也不放大。
可以是小数，按比例占据剩余空间。

flex-grow：1或flex：1，经常用作自适应布局

flex-shrink

定义项目的缩小比例（容器宽度<元素总宽度时如何收缩）

默认值都为1，即如果空间不足将等比例缩小。
如果有一个项目的值为0，其他项目为1，当空间不足时，该项目不缩小。
负值对该属性无效，容器不应该设置flex-wrap。

flex-basis

定义在分配多余空间之前，项目占据的主轴空间。

设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。

浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目的本来大小，如设置了width则元素尺寸由width/height决定（主轴方向），没有设置则由内容决定。

align-self

允许单个项目与其他项目有不一样的对齐方式

默认值为auto，表示继承父元素的align-items属性，并可以覆盖align-items属性。

order

定义项目的排列顺序。

数值越小，排列越靠前，默认为0，可以是负值。

.item {
    order: <整数>;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .parent {
            display: flex;
            width: 600px;
        }
        .parent > div {
            height: 100px;
        }
        .item-1 {
            width: 140px;
            flex: 2 1 0%;
            background: blue;
        }
        .item-2 {
            width: 100px;
            flex: 2 1 auto;
            background: darkblue;
        }
        .item-3 {
            flex: 1 1 200px;
            background: lightblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="item-1"></div>
        <div class="item-2"></div>
        <div class="item-3"></div>
    </div>
     
</body>
</html>

• 主轴上父容器总尺寸为 600px
• 子元素的总基准值是：0% + auto + 200px = 300px，其中
  1. 0% 即 0 宽度
  2. auto 对应取主尺寸即 100px
• 故剩余空间为 600px - 300px = 300px
• 伸缩放大系数之和为： 2 + 2 + 1 = 5
• 剩余空间分配如下：
  1. - item-1 和 item-2 各分配 2/5，各得 120px
  2. - item-3 分配 1/5，得 60px
• 各项目最终宽度为：
  1. - item-1 = 0% + 120px = 120px
  2. - item-2 = auto + 120px = 220px
  3. - item-3 = 200px + 60px = 260px
• 当 item-1 基准值取 0% 的时候，是把该项目视为零尺寸的，故即便声明其尺寸为 140px，也并没有什么用，形同虚设
• 而 item-2 基准值取 auto 的时候，根据规则基准值使用值是主尺寸值即 100px，故这 100px 不会纳入剩余空间