flex布局和多种居中方式

[xiaochengzi6]

在线修改样式

flex 布局

决定是否是 flex 布局的是你是否设置了 display: flex

父盒子

一、flex 布局最重要的是明确主轴和交叉轴的概念

justify-content: 决定在这个盒子内 子盒子 在主轴方向的排布情况

space-between 两边靠边，中间平均分布 || space-evenly 平均排列 || space-around 设置每一个元素的左右距离让其排列

align-items: 决定在这个盒子内 子盒子 在交叉轴方向的分布情况

二、父盒子的内部的排列情况

一般情况都是默认为横向排列

flex-direction:column 设置子盒子纵向排列 || column 纵向排列反转 || row 横向排列 || row-reverse 横向排列翻转

flex-direction:column-reverse 设置子盒子纵向排列 但是排列方向会颠倒过来

需要注意的是当设置 flex-direction: column; 时主轴方向也发生改变以原来交叉轴方向变成主轴方向

三、额外的

关于justify-content 和 align-items这两个属性都有共同的值 flex-start、 flex-end和center

子盒子

以上都是处理子盒子在方向上的分布

align-self：决定自己在父盒子在交叉轴方向的排列

主轴方向上可以通过 margin 来决定其分布

flex 盒子

flex: 调节盒子空间的占空比 它又是 flex-grow，flex-shrink和flex-basiz, 三者之和

flex-basis :设置盒子在主轴方向的尺寸 默认值 auto

设置了 flex-basis 就会决定这个盒子在主轴方向上的大小比如说现在是一个行排列, 主轴方向就是盒子的宽度，当设置 flex-basis: 200px 的时候就决定了整个盒子的宽度，在设置 width: 220px 时候就会失效，但能通过 min-width 来设置盒子的主轴大小

flex-grow: number: 当 flex 有剩余空间的时候，子元素占据剩余空间的占比

flex-shrink: number: 当子盒子的宽度总和超过容器盒子的时候就会按照这个比例收缩

换行

flex-wrap: wrap:换行，子元素超过父元素的时候通过整个来开始换行

水平居中

一、盒子水平居中

1、子元素内使用 text-align: center; margin: 0 auto

.father{
  height: 300px;
  width: 400px;
  background-color: aqua;
  /* 水平居中 */
 
}
.child{
  height: 100px;
  width: 100px;
  background-color: blue;
  /* 水平居中 */
  text-align: center;
  margin: 0 auto;
}

2、flex 布局： 父盒子设置 主轴的分布方向为center

.father{
  height: 300px;
  width: 400px;
  background-color: aqua;
  /* 水平居中 */
  display: flex;
  justify-content: center;
}

3、父元素使用 table-cell 布局方式 子元素是块级就设置其 margin: auto 否则设置父元素为 text-align: center

.father{
  height: 300px;
  width: 300px;
  background-color: aqua;
  /*  */
  display: table-cell;
  vertical-align: middle;
  /*子元素是行内级元素*/
  text-align: center;
}

二、盒子内容水平居中

1、高度和line-height 相同

.child{
    height: 100px;
    lint-height: 100px
}

垂直居中

1、使用 flex 布局

.flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

2、父元素使用 table-cell 布局方式在设置 vertical-align: middle 让其垂直居中

.father{
  height: 300px;
  width: 300px;
  background-color: aqua;
  /*  */
  display: table-cell;
  vertical-align: middle;
}

居中

一、盒子关系的居中

1.1 不考虑宽高

1.1.1 使用 flex 布局

.father{
  background-color: aqua;
  /* 居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

1.1.2 父盒子设置 flex 布局方式 子盒子使用 margin: auto

.father{
  height: 300px;
  width: 300px;
  background-color: aqua;
  /*  */
  display: flex;
}
.child{
  background-color: blue;
  /*  */
  margin: auto;
}

1.1.3 父元素要确保是正方形才能保证居中 而且也用到了css 的动画

子元素绝对定位后在原来的位置上去移动各一半然后让其旋转到中心位置

.child{
  height: 100px;
  width: 100px;
  background-color: blue;
  /*  */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*可以将 transform 换成下面属性*/
  /* margin-left: -50px; */
  /* margin-top: -50px; */
}

优点是不用考虑子盒子的宽高

1.1.4 父元素使用 tabel-cell 布局方式,设置 vertical-align: middle 垂直居中

水平居中：子盒子是块级就设置子元素为 margin: auto 子盒子是行内级就设置父元素为 text-align: center

.father{
  height: 300px;
  width: 300px;
  background-color: aqua;
  /*  */
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.child{
  height: 100px;
  width: 100px;
  background-color: blue;
  /*  */
  display: inline-block;
}

1.1.5 使用 grid 布局 但兼容性较差

.father{
  height: 300px;
  width: 300px;
  background-color: aqua;
  /*  */
  display: grid;
  justify-content: center;
  align-items: center;
}

1.1.6 使用 grid 布局时 子元素设置 margin: auto 缺点： 兼容性差

.father{
  height: 300px;
  width: 300px;
  background-color: aqua;
  /*  */
  display: grid;

}
.child{
  height: 100px;
  width: 100px;
  background-color: blue;
  /*  */
  margin: auto;
}

2.1 考虑宽高

2.1.1 定位后让其脱离文档流然后设置其 margin: auto

.child{
  height: 100px;
  width: 100px;
  background-color: blue;
  /*  */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

二、盒子和内容的居中

1.1 通过伪元素设置其 line-height: 父元素高度 让盒子内要居中的元素设置为行内级才行

.father{
  height: 300px;
  width: 300px;
  background-color: aqua;
  /*  */
  text-align: center;
}
.father::after{
  content: '';
  line-height: 300px;
}
.child{
  /* height: 100px; */
  /* width: 100px; */
  background-color: blue;
  /*  */
  display: inline-block;
}

子盒子或者要居中的东西不能有高度，这样才能居中，一般都是设置内容的

参考文章：

[flex 居中的方式](https://juejin.cn/post/6844904098777710599#heading-3)

[css flex 布局](https://juejin.cn/post/6844904116141948936)

[css八种居中方式](https://juejin.cn/post/7119133627568357384#heading-0)