CSS布局技巧｜青训营CSS布局技巧汇总一、水平垂直居中 1、flexbox实现水平垂直居中在Flex容器上设置

CSS布局技巧汇总

一、水平垂直居中

1、flexbox实现水平垂直居中

在Flex容器上设置 justify-content、align-items 的值为 center 时，可以让单个元素在Flex容器中达到水平垂直居中的效果。也可以不设置align-content,改设置flex容器里的元素align-self:center。

 <!-- HTML -->
 <div class="flex__container">
     <div class="flex__item"></div>
 </div>
 
 /* CSS */
 .flex__container {
     display: flex;
     justify-content: center;
     align-items: center;
 }

在这种模式之下，如果要让多个元素实现水平垂直居中的效果，那还需要加上 flex-direction: column。

除此之外，也可以使用 place-content: center 让Flex项目实现水平垂直居中。

 .flex__container {
     display: flex;
     place-content: center;
 }
 
 .flex__item {
     align-self: center;
 }

2、Grid中实现水平垂直居中

CSS Grid布局可以说是现代Web布局中的银弹。它也是到目前为止布局系统中唯一一个二维布局系统。

在CSS Grid布局中，只需要仅仅的几行代码也可以快速的帮助我们实现水平垂直居中的效果。比如以下例子：

 <!-- HTML -->
 <div class="grid__container">
     <div class="grid__item"></div>
 </div>
 
 /* CSS */
 .grid {
     display: grid; // 或 inline-grid
     place-items: center
 }

这种方法也适用于CSS Grid容器中有多个子元素（Grid项目）。且palce-items 适用于每个单元格。这意味着它将居中单元格的内容。

二、等高布局

等高布局也是Web中非常常见的一种布局方式，常见实现等高布局方案有以下两种：

1.flexbox实现等高布局

 <!-- Flexbox -->
 <flex__container>
     <flex__item></flex__item>
     <flex__item></flex__item>
     <flex__item></flex__item>
 </flex__container>
 
 /* CSS */
 .flex__container {
     display: flex; // 或 inline-flex
 }

原理即，在容器上显式设置了 display 的值为 flex 或 inline-flex，该容器的所有子元素的高度都相等，因为容器的 align-items 的默认值为 stretch。此方法适用于卡片组件中。

2.Grid实现等高布局

 <!-- HTML -->
 <grid__container>
     <grid__item></grid__item>
     <grid__item></grid__item>
     <grid__item></grid__item>
 </grid__container>
 
 /* CSS */
 .grid__container {
     display: grid;
     grid-template-columns: 20vw 1fr 20vw; /* 根据需求调整值*/
 }

方法与flexbox实现类似，且同样适用于卡片类布局。

三、均分列

在Web布局中，很多时候会对列做均分布局，最为常见的就是在移动端的底部Bar。若不使用flexbox和Grid布局，想要真正的做到均分效果，可以用 100%（或 100vw）除以具体的列数。如下：

 <!-- HTML -->
 <container>
     <column></column>
     <column></column>
     <column></column>
 </container>
 
 /* CCSS */
 .container {
     inline-size: 50vw;
     min-inline-size: 320px;
     display: flex-row;
 }
 
 .column {
     float: left;
     width: calc(100% / 3);
 }

1.flexbox实现均分列

 <!-- HTML -->
 <flex__container>
     <flex__item></flex__item>
     <flex__item></flex__item>
     <flex__item></flex__item>
 </flex__container>
 
 /* CSS */
 .flex__container {
     inline-size: 50vw;
     display: flex;
 }
 
 .flex__item {
     flex: 1;
 }

这种方法要比上一种简便许多。原理即，在Flexbox布局模块中，当flex取的值是一个单值（无单位的数），比如示例中的 flex:1，它会当作显式的设置了 flex-grow: 1。

2.Grid实现均分列

 <!-- HTML -->
 <grid__container>
     <grid__item></grid__item>
     <grid__item></grid__item>
     <grid__item></grid__item>
 </grid__container>
 
 /* CSS */
 .grid__container {
     display: grid;
     grid-template-columns: repeat(3, 1fr); /*这里的3表示具体的列数*/
 }

上述两种方法，不管是Flexbox还是Grid布局中，都存在一定的缺陷，当容器没有足够的空间容纳Flex项目（或Grid项目）时，Flex项目或Grid项目会溢出（或隐藏，如果Flex容器或Grid容器显式设置了 overflow:hidden）。修复这种现象最简单的方式是在Flex容器或Grid容器显式设置一个 min-width（或 min-inline-size）。

CSS布局技巧 ｜ 青训营