Question

嘿，我正在建立一个网站，并希望使联系页面与此完全相同： My contact

有什么办法可以通过网格实现吗？还是flex-box更好？

我使用了网格，但是看起来确实凌乱，并且我无法使边框停留在中心。

Answer 1

使用flexbox并设置flex: 0 1 50%;

body,html{
height:100%;
width:100%;
margin:0;
padding:0;
}
.wrap{
    display: flex;
    flex-wrap: wrap;
}
.wrap div{
    flex: 0 1 49%;
    height:49vh;
    text-align: center;
}
.wrap div:nth-of-type(n+4),.wrap div:nth-of-type(n+3)
{
    border-top:1px solid grey;
}
.wrap div:nth-of-type(odd)
{
    border-right:1px solid grey;
}

<div class="wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Answer 2

也许：

.box_container{
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:repeat(2, 1fr);
    
    /* Any size */
    width: 300px;
    height: 300px;
}

.box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    border: 1px solid black;
}

.box:first-child, .box:nth-child(3){
    border-left: none;
}

.box:first-child, .box:nth-child(2){
    border-top: none;
}

.box:nth-child(2), .box:nth-child(4){
    border-right: none;
}

.box:nth-child(3), .box:nth-child(4){
    border-bottom: none;
}

<div class="box_container">
  <div class="box"><span>Icon</span>Text</div>
  <div class="box"><span>Icon</span>Text</div>
  <div class="box"><span>Icon</span>Text</div>
  <div class="box"><span>Icon</span>Text</div>
</div>

Answer 3

这是一种简单的技术，可以与overflow: hidden和负边距（如margin: -1px）一起使用

.socialLinks{
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.link {
  flex: 1 0 45%;
  border-left: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  margin-left: -1px;
  margin-bottom: -1px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 35px 15px;
}

.link a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #000;
}

.link a img {
  margin-bottom: 10px;
}

<div class="socialLinks">
  <div class="link">
    <a href="">
      <img src="https://image.flaticon.com/icons/svg/174/174845.svg" height="30">
      Dropbox
    </a>
  </div>
  <div class="link">
    <a href="">
       <img src="https://image.flaticon.com/icons/svg/174/174876.svg" height="30">
      Twitter
    </a>
  </div>
  <div class="link">
    <a href="">
      <img src="https://image.flaticon.com/icons/svg/174/174848.svg" height="30">
     Facebook
    </a>
  </div>
  <div class="link">
    <a href="">
      <img src="https://image.flaticon.com/icons/svg/174/174857.svg" height="30">
      LinkedIn
    </a>
  </div>
</div>

带有网格的联系页面？

3 个答案: